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 Petrovic
Get in Touch

Nikola 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.
As a freelancer, I charge only a small portion of the money you would pay to agencies to create your website. Affordable web design doesn’t mean that it will lack any of the advanced features of today’s web technology. We just cut out the cost of the middle man.
Feel free to request a free quote using the form on the right or the one bellow.
Nikola Petrovic
Get in Touch