Creating a WordPress Widget to Show a Random Post

Making a widget to show a random post uses two underlying concepts you need to get familiar with to be good at WordPress development: making use of WP_Query objects, and making widgets. If you’ve not checked them before, check out our Quick Guides which more thoroughly introduce both:

If you have, check out this video where I explain the pretty simple process I use to making a Random Post Widget:

How to Make a Random Post WordPress Widget Step-by-Step

  1. Follow the steps listed in the first Quick Guide about widgets.
  2. At the start of the widget method, add the line $query = new WP_Query. This will create for you a new object, $query, an instantiation of the WP_Query class (see the WP_Query link in further reading if that confuses you).
  3. Add argument to the WP_Query line. That means to add to the line above so it now reads: $query = new WP_Query( $q_args );. Then you’ll also need to create the $q_args variable. That’ll look like:
    $q_args = array(
    			'orderby'        => 'rand',
    			'posts_per_page' => '1',
    
    		);

    What that does is create some arguments. posts_per_page makes our WP_Query only return one item. orderby => 'rand' makes the function get a random one (by putting all of them into a random order).

  4. Then we need to make a loop. What this means is that we need to use while ($query->have_posts()) to contain a series of instructions. The first of those instructions will be $query->the_post() which “primes” the post for us to access with functions like the_title(). Then we’re going to replace the display directions from the last post, so the title and excerpt of the post is shown. That leads to a block like this:
    echo $args['before_widget'];
    echo $args['before_title'];
    the_title();
    echo $args['after_title'];
    echo get_the_excerpt();
    echo $args['after_widget'];
  5. We make sure that after the end of the loop we call wp_reset_postdata(). This undoes our “pollution” in $query->the_post() so that the rest of the site doesn’t act funky because of our widget. It’s just good hygiene.

Full Code for Making our Widget

class QG_Widget extends WP_Widget {

	/**
	 * Sets up the widgets name etc
	 */
	public function __construct() {
		$widget_ops = array( 
			'classname' => 'qg_widget',
			'description' => 'This is a widget for a quick guide',
		);
		parent::__construct( 'qg_widget', 'Quick Guide Widget', $widget_ops );
	}

	/**
	 * Outputs the content of the widget
	 *
	 * @param array $args
	 * @param array $instance
	 */
	public function widget( $args, $instance ) {
		$q_args = array(
			'orderby'        => 'rand',
			'posts_per_page' => '1',

		);
		$query = new WP_Query( $q_args );
		while ($query->have_posts()) {
			$query->the_post();
			echo $args['before_widget'];
			echo $args['before_title'];
			the_title();
			echo $args['after_title'];
			echo get_the_excerpt();
			echo $args['after_widget'];
		}
		wp_reset_postdata();
	}
}

add_action( 'widgets_init', function(){
	register_widget( 'QG_Widget' );
});

Further Reading on Widgets and WP_Query

The Complete Guide to Creating WordPress Widgets and Widget Areas

Working with WP_Query

 


Add a Comment

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