DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Display a Random Post (with AJAX Refresh)

Posted by on

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

  1. Free wordpress themes July 20, 2009

    very nice. thanks

  2. Sumesh July 20, 2009

    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….

  3. 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.

  4. I dont understand #4 The jQuery how do i load it? is it a plugin?

  5. That’s really awesome.. !!

    Thanks for the tutorial…

  6. 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.

  7. Awesome – that is a clever little technique.

  8. 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!

  9. 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

      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?

      • 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 http://sayitwrong.com/app/ the js is in the head if you view the source…

    • 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.

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

    Thanks All

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

  12. Morgan Cheng October 7, 2009

    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.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry