How to: Add a Random Post Button in WordPress?

No votes yet.
Please wait...

Random post functionality usually applied when you give your readers something new and maybe more advanced way to browse your site. The random post button will redirect your readers to a post throughout the entire website randomly. Whenever your readers will click that button they will be redirected to a random post from your entire website.

There are two possibilities of adding a random post button in your blog, either you can use a WordPress plugin or simply follow this post.

Random Post button in WordPress

Adding Random Post Button

One of the most convenient way of adding the random post button in your blog is to follow the steps below:

1. Open up functions.php and add the following code at the bottom of it:

add_action('init','random_add_rewrite');
function random_add_rewrite() {
 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;
 }
}

#Snippet Credits: wpbeginner.com

2. Now, we need to create some HTML documents for the button and some CSS codes to give a pretty good look to it. Here we’ve created a button with complete CSS and HTML codes for our readers.

HTML:

Looking at the following html code use the permalink as http://www.yourdomain/index.php?random=1 and by going to Appearance > Widgets simply drag a text widget either in sidebar or in footer then add this code in that text widget.

<a href="https://softstribe.com/index.php?random=1">my button</a>

CSS:

Add the following CSS code in your style.css file:

.randbutton {
-moz-box-shadow:inset 0px 16px 16px -11px #fce2c1;
-webkit-box-shadow:inset 0px 16px 16px -11px #fce2c1;
box-shadow:inset 0px 16px 16px -11px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
-moz-border-radius:13px;
-webkit-border-radius:13px;
border-radius:13px;
border:2px solid #eeb44f;
display:inline-block;
color:#fff;
font-family:arial;
font-size:19px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 0px 0px #cc9f52;
}.randbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:#fb9e25;
}.randbutton:active {
position:relative;
top:1px;
}

That’s it! You have successfully created a new service for your readers. Hope they will be happy…

Similar Posts

11 Comments

  1. Hey Muhammad, great article. But can you please also point out some wordpress plugins that do this function please? I really need to make a menu button that will show a random post when clicked. Thanks.

    No votes yet.
    Please wait...
    1. Your welcome @Lymos, that you like my article. I’d also research for those plugins soon, and post about it if I found anything helpful.

      No votes yet.
      Please wait...
  2. I’ve been looking for EXACTLY this to put up on my website. Aside from tweaking the CSS to fit my design, this will work perfectly. Thanks a ton!

    No votes yet.
    Please wait...
    1. Hi @Evan, I’m glad that my article helped you. Your welcome brother.

      No votes yet.
      Please wait...
  3. Great blog right here! Also your website rather a lot up fast!
    What host are you the usage of? Can I am getting your associate link on your host?
    I desire my web site loaded up as fast as yours lol

    No votes yet.
    Please wait...
    1. Yes @Klara why not, I can give you the link to my webhost. Here is the link:
      Hostmantis

      No votes yet.
      Please wait...
  4. Thanks for this post, now i have a semi-“I’m Feeling Lucky” button on my website.

    Keep it up!

    No votes yet.
    Please wait...
  5. Does this still work? Mine was running fine when all of sudden it refreshes the same posts 10 or so times before finding a new one. THANKS!

    No votes yet.
    Please wait...
    1. Doesn’t matter, but the matters what “It Worked”. 😀

      No votes yet.
      Please wait...
  6. Hello, is it possible to set the random post being generated just from ONE specific category? Thanks

    No votes yet.
    Please wait...
    1. Yeah it is possible. 🙂

      No votes yet.
      Please wait...

Leave a Reply

Your email address will not be published. Required fields are marked *