Navigation is a big issue with *alot* of people. People want to find your content or find a way to ‘get’ to your content. One of ways you can do that is to actually have something that makes it so that users can go to a post of yours that’s completely random.
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)
Discussion ¬