Display a Random Post (with AJAX Refresh)

Posted by Chris Coyier • Updated on September 22nd, 2013

I think you’ll be surprised at how ridiculously easy this is. We are going to leverage some serious smartness from both WordPress and from the JavaScript library jQuery.

1. Set up area for Random Post (HTML)

This could be anything really, just so long as it is a text page element with an ID you can target. I put this in our sidebar.php.

<h4>Random Post</h4>
<ul>
	<li id="randomPost">... loading ...</li>
</ul>
<a href="#" id="another">Get another!</a>

2. Create a new Page template

The sole purpose for this page template is to query the posts and display one random post. Look how easy:

<?php
/*
Template Name: Random Post
*/
?>

<?php 
    query_posts('showposts=1&orderby=rand'); 
    the_post();
?>

<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

3. Publish a Page using this template

Could be anywhere you want. On this blog it’s at /random/.

4. The jQuery

You’ll need jQuery loaded and a link to your own custom script going, then add this:

$("#randomPost").load("/random/");
$("#another").click(function(){
   $("#randomPost")
            .text("... loading ...")
            .load("/random/");
   return false;
});

5. Rejoice

I told you it would be easy! Check out our sidebar for a live example.

UPDATE

The above doesn’t work as written in Internet Explorer, which likes to cache AJAX requests. To fight this, just append a random URL parameter to the end of the load URL. Like so:

$("#another").click(function(){
   $("#randomPost")
            .text("... loading ...")
            .load("/random/?cachebuster=" + Math.floor(Math.random()*10001));
   return false;
});

Thanks to Andy for this fix, who is using it on this web app.

18 responses ↓

About the author

Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.

View all from Chris Coyier

← How to Remove the WordPress Version Number

Mastering WordPress Post-Revisioning and Auto-Save Features →

18 responses

Free wordpress themes

July 20, 2009 @ 11:09 am

very nice. thanks
Sumesh

July 20, 2009 @ 11:57 am

That’s cool – I’m sure I can find a few other practical uses for this method, mostly by poking at the code in the right direction :)

Since Jeff’s the code ninja here, I’d like to request something (please, please!): a plain JS version of this – assuming it doesn’t get overly complicated. I’m an optimization freak like Jeff himself, loading jQuery just for this doesn’t sound too economical….
Jessi Hance

July 20, 2009 @ 12:20 pm

Fun!

I just made a no-frills no-javascript random post link in my sidebar.

Of course the javascript version is much nicer because of the “Get another” link.
sebu

July 20, 2009 @ 1:00 pm

I dont understand #4 The jQuery how do i load it? is it a plugin?
- Bouke van der Bijl
  
  July 21, 2009 @ 1:37 am
  
  It is a Javascript Library, here is the post on how to include it.
Sapan

July 23, 2009 @ 10:39 am

That’s really awesome.. !!

Thanks for the tutorial…
Dev Words

July 24, 2009 @ 7:35 pm

Nice stuff. Is there a way to stop the page from displaying in the nav bar? Unfortunatly you can’t make it private as it will just give the user a 404 message.
- Chris Coyier Post Author
  
  July 25, 2009 @ 10:53 am
  
  Doh! Thanks for the catch, I just excluded it through a parameter of wp_list_pages like I have with several others wp_list_pages('exclude=49,51,5,337&title_li=' );
  - Dev Words
    
    July 26, 2009 @ 2:00 pm
    
    I just found that out and was about to post it. lol, ah well.
Jeff Gran

July 25, 2009 @ 3:16 pm

Awesome – that is a clever little technique.
Andy Kleeman

August 7, 2009 @ 3:42 pm

Chris this is awesome!- Is exactly what I needed for a project that’s been in the back of my mind for a while! – domain name now brought and I’ll start work in it tomorrow!

Thanks for sharing!
Andy Kleeman

August 14, 2009 @ 3:48 am

I’ve used this on a site I’m building…. I love it BUT… it doesn’t work in internet explorer!

Whilst I hate internet exploerer I think a lot of people visiting the site I’m building will be using it….

any one got any ideas?
- Dan Ubilla
  
  August 16, 2009 @ 8:34 pm
  
  Good catch, Andy. I’m working on getting it to work in FF first, but I’d be interested to hear about the IE fix in the meanwhile.
  
  Could it just be the matter of wrapping the code in $(document).ready?
  - Andy Kleeman
    
    August 17, 2009 @ 2:18 am
    
    Hi Dan,
    
    It works fine in firefox for me! I didn’t have it wrapped in a document ready function so i tried that but still the same problem. In ie it tries to reload a random comment but always updates as the same one… here’s a link to the site I’m working on sayitwrong.com the js is in the head if you view the source…
- Chris Coyier Post Author
  
  August 17, 2009 @ 10:52 am
  
  Indeed this doesn’t work in IE. Sorry about that, I didn’t really test it, I kind of just assumed it was such a simple thing it would work.
  
  I’m afraid I have no idea why, definitely let me know if you figure something out.
  
  I use this on my Quotes on Design site, and it doesn’t work there either (tested IE 7). Bummer.
Andy Kleeman

August 18, 2009 @ 2:27 am

Solved! wohoo! – I think Chris is going to update the article so I’ll leave it to him!

Thanks All
Juarez P. A. Filho

September 5, 2009 @ 11:53 am

Wow… This tutorial saved my head. =)
I implemented one truly ajax tabbed system using this technique.
Thanks guys.
Morgan Cheng

October 7, 2009 @ 5:37 pm

Nice post.

I knew below code can bust AJAX cache.
$.ajaxSetup({
cache: false
});

Your post inspires me to check how. It turns out that above setting will append a random query string to ajax request as well.