In ComicPress, Tyler Martin created a Random Comic widget which is very useful to have people go to any number of comics in the archive. I’ve adapted the widget to be random posts, a pick of all of them and converted it to a WordPress 2.8 + widget.

Let’s start off by writing the line of code that looks for a word in the URI line:

if ( isset( $_GET['randompost'] ) )
	add_action( 'template_redirect', 'random_post' );

What this line does it looks for /?randompost at the end of a URI line and adds an action to the template_redirect function that executes the function random_post. Because of the questionmark before randompost the uri line will think that it’s a uri variable container and wants a variable for it, but we dont need one, just setting it is enough.

Now let’s write the function random_post that gets run when it finds randompost in the uri line.

//Generate a random post page - to use simply create a URL link to "/?randompost"
function random_post() {
	$randomPostQuery = new WP_Query(); $randomPostQuery->query('showposts=1&orderby=rand');
	while ($randomPostQuery->have_posts()) : $randomPostQuery->the_post();
		$random_post_id = get_the_ID();
	endwhile;
	wp_redirect( get_permalink( $random_post_id ) );
	exit;
}

This function random_post creates a new query since $wp_query and $post are not being read as a global will totally avoid it. In the query line it asks for 1 post and orders it by rand which means randomize the entire posts archive but only show one post. Then what it does it does a while loop of all the posts it finds and sets $random_post_id to the ID of the post. Then redirect by getting the permalink that $random_post_id points to.

Okay so far we’ve got this, we’ve got the ability to read randompost from the URI line with a $_GET and then we have it execute the function to actually redirect users to a random post on your system.

But how do we embed it on your site? Well you could just make a static link that goes Random Post that would work just fine, because all your doing is wanting to set the URI line. You can do that with a text widget very easily. … I wrote a WordPress 2.8/2.8.4+ widget that will do it for you however so you can just adjust it’s position in your sidebars how you see fit.

class widget_random_post extends WP_Widget {

	function widget_random_post() {
		$widget_ops = array('classname' => 'widget_comicpress_random_post', 'description' => 'Displays a link to click to trigger a random blog post.' );
		$this->WP_Widget('random_post', 'Random Post', $widget_ops);
	}

	function widget($args, $instance) {
		global $post;
		extract($args, EXTR_SKIP);

		echo $before_widget;
		$title = empty($instance['title']) ? '' : apply_filters('widget_title', $instance['title']);
		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; }; ?>
			<h2><a href="?randompost"><span class="random-post-icon">?</span> Random Post</a></h2>
		<?php
		echo $after_widget;
	}

	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		return $instance;
	}

	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
		$title = strip_tags($instance['title']);
		?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
		<?php
	}
}
register_widget('widget_random_post');

function widget_random_post_init() {
	new widget_random_post();
}

add_action('widgets_init', 'widget_random_post_init');

This is a standard 2.8 widget. You can then go to Appearance -> Widgets and add it to any of your sidebars.

Just like Tyler did with ComicPress’s Random Comic I set a class inside the widget so you can place an icon image inside there if you wanted to, or in this case just make the ? mark look nicer.

<span class="random-post-icon">?</span>

.random-post-icon {
	padding: 0 5px;
	color: #fff;
	background: #000;
}

You of course can change the CSS to look how you want to for an icon.

Have fun!

- Phil (Frumph)