How to create widget to show latest posts?

Create WordPress widget for latest posts

WordPress providing sidebar widget for latest post which is just for post type posts not for any custom post types. So to create widget that fetches posts from custom post type, we just need to know the basics of Widgets API and PHP.

We will write a widget class in functions.php file that will extend with the build in class WP_Widget, this class have methods form(), update(),widget() which we will override in our widget class. We also write constructor in our class to register widget name and id.

form() function
form() function will create form that we will have in widgets section while enabling it.

widget() function
widget() function will output our widget.

update() function
We override update function which will ensure that we are passing the right values to $instance array

Following is the code.

class ThemeName_Widget extends WP_Widget{
function __construct() {
 parent::__construct(
  'themename_widget', // Base ID
  'ThemeName Widget', // Name
  array('description' => __( 'Displays your latest listings.’))
    );
}
function widget($args, $instance) {
 extract( $args );
 $title = apply_filters('widget_title', $instance['title']);
 $numberOfListings = $instance['numberOfListings'];
 echo $before_widget;
 if ( $title ) {
  echo $before_title . $title . $after_title;
 }
 global $post;
 $listings = new WP_Query();
 $listings->query('post_type=shows&posts_per_page=' . $numberOfListings );
 if($listings->found_posts > 0) {
  echo '<ul class="themename_widget">';
   while ($listings->have_posts()) {
    $listings->the_post();
    $listItem = '<li>';
    $listItem .= '<a href="' . get_permalink() . '">';
    $listItem .= get_the_title() . '</a>';
    $listItem .= '</li>';
    echo $listItem;
   }
  echo '</ul>';
  wp_reset_postdata();
 }else{
  echo '<p style="padding:25px;">No listing found</p>';
 }

 echo $after_widget;
}
function form($instance) {
 if( $instance) {
  $title = esc_attr($instance['title']);
  $numberOfListings = esc_attr($instance['numberOfListings']);
 } else {
  $title = '';
  $numberOfListings = '';
 }
 ?>
  <p>
  <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'themename_widget'); ?></label>
  <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
  </p>
  <p>
  <label for="<?php echo $this->get_field_id('numberOfListings'); ?>"><?php _e('Number of Listings:', themename_widget'); ?></label>
  <select id="<?php echo $this->get_field_id('numberOfListings'); ?>"  name="<?php echo $this->get_field_name('numberOfListings'); ?>">
   <?php for($x=1;$x<=10;$x++): ?>
   <option <?php echo $x == $numberOfListings ? 'selected="selected"' : '';?> value="<?php echo $x;?>"><?php echo $x; ?></option>
   <?php endfor;?>
  </select>
  </p>
 <?php
 }
function update($new_instance, $old_instance) {
 $instance = $old_instance;
 $instance['title'] = strip_tags($new_instance['title']);
 $instance['numberOfListings'] = strip_tags($new_instance['numberOfListings']);
 return $instance;
}

 
} //end class 
register_widget('ThemeName_Widget');

By above code a widget will be shown in WordPress Widgets.

Note: change “themename” to your theme name.