Create a Random Post Button – CSS and Function Live Example.

Home » css examples » Create a Random Post Button – CSS and Function Live Example.

Create a Random Post Button - CSS and Function Live Example.

Create a Random Post Button – CSS and Function Live Example.

Today we will create  “random post button” for your WordPress website.

All around the net there are code snippets to create  random post on button click. I’ve decided to expand it a little bit and show you the function code together with css and html code for your button, you can simply copy / paste it. There is already a button below each of my posts that does exactly what we want to create here. On each click it takes you to a different random post from my website, feel free to try it out after reading this article.

Snippet for creating random post 307 redirect

Lets start with this snippet that you will insert into your functions.php file.

This will basically serve the random post to anyone that clicks the button. Sounds simple doesn’t  it.

Here is the code:

add_action('init','fivera_explore_button');
function fivera_explore_button() {
       global $wp;
       $wp->add_query_var('random');
       add_rewrite_rule('random/?$', 'index.php?random=1', 'top');
}

add_action('template_redirect','random_template');
function random_template() {
       if (get_query_var('random') == 1) {
               $posts = get_posts('post_type=post&orderby=rand&numberposts=1');
               foreach($posts as $post) {
                       $link = get_permalink($post);
               }
               wp_redirect($link,307);
               exit;
       }
}

And that’s all for the WordPress part.

Css and html code for your “explore” button

Here we have cool CSS button to use in our posts. all you need to do is copy the css to your style.css

Check out this Pen!

Of course modify the HTML code  to match your own domain.

http://domain.com/index.php?random=1

according to some people there are two ways you can use the html, the one above and the other one below

yourdomain.com/random/

The good thing is that you can play with CSS directly on codepen  to first suit it to your needs and than copy it to your style sheet.

*notice for Create a Random Post Button – CSS and Function Live Example.

If you are using W3 Total Cache with database caching on, then add the following rules in the exclusion list.

/random/
/index.php?random=1

If you are using Yoast’s WordPress SEO plugin, make sure you don’t have  “Redirect Ugly URLs” on.

 

 Create a Random Post Button – Solved

If you like this post please share it on your favorite social networks below.

and don’t forget to try my button  🙂

 

Nikola fivera Petrovic
Get in Touch

Nikola fivera Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.

Web Design Skills

I have been into web design for the last 10+ years.
After working for various agencies and companies I have decided to take a lone wolf path as a Freelancer but I still actively collaborate with agencies across the globe.
I enjoy building websites on WordPress platform but i can work on any other platforms as well.

SEO Skills

I have spent a last couple of years as an SEO executive and SEO consultant working on 4 continents.
Specialized in on-page SEO I wear a pointy Google-Wizard White-Hat and help various small and medium-sized businesses rank well in the search engines.
I enjoy working with Google and Yahoo SE.
Feel free to request a free meeting bellow.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
Nikola fivera Petrovic
Get in Touch
2017-04-16T04:15:03+00:00

Leave a Reply

2 Comments on "Create a Random Post Button – CSS and Function Live Example."

Notify of
avatar
Sort by:   newest | oldest | most voted
Amy Febryan
Guest

thanks, is work, but how to make random post in custom Category ?

caseypatrickdriscoll
Guest

Thanks for this! Just implemented this at http://featuredcreature.com/random

Safari is broken though, just shows the same post repeatedly. Not sure of the exact reason yet. Will report back here if I find a solution.

wpDiscuz