How to Create a Custom Recent Posts Widget in WordPress

The following steps will create a custom recent posts widget in WordPress. The widget will display titles right next to their corresponding thumbnail images.

1. Add the following lines of code to the functions.php file:

// Unregister the default WP Recent Posts widget
function custom_init_unregister_meta_widget(){
unregister_widget('WP_Widget_Recent_Posts');
}
add_action('widgets_init', 'custom_init_unregister_meta_widget');

// Set image sizes
add_theme_support('post-thumbnails');
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, array( 'center', 'center') );
add_image_size( 'excerpt-image', 60, 40 ); // 60px is the width, 40px is the height
}

// Start Codes for Custom Recent Posts Widget

function register_custom_recent_posts_widget() {
register_widget( 'custom_WP_Widget_Recent_Posts' );
}
add_action( 'widgets_init', 'register_custom_recent_posts_widget' );

class custom_WP_Widget_Recent_Posts extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "The most recent posts on your site") );
parent::__construct('recent-posts', __('Recent Posts'), $widget_ops);
$this->alt_option_name = 'widget_recent_entries';

add_action( 'save_post', array($this, 'flush_widget_cache') );
add_action( 'deleted_post', array($this, 'flush_widget_cache') );
add_action( 'switch_theme', array($this, 'flush_widget_cache') );
}

function widget($args, $instance) {
$cache = wp_cache_get('widget_recent_posts', 'widget');

if ( !is_array($cache) )
$cache = array();

if ( ! isset( $args['widget_id'] ) )
$args['widget_id'] = $this->id;

if ( isset( $cache[ $args['widget_id'] ] ) ) {
echo $cache[ $args['widget_id'] ];
return;
}

ob_start();
extract($args);

$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 10;
if ( ! $number )
$number = 10;
$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;

$r = new WP_Query( apply_filters( 'widget_posts_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true ) ) );
if ($r->have_posts()) :
?>
<?php echo '<div class="widget">'; ?>
<?php if ( $title ) echo '<h2 class="widget-title">' . $title . '</h2>'; ?>

<?php while ( $r->have_posts() ) : $r->the_post(); ?>

<ul>
<li>
<a href="<?php esc_url(the_permalink()); ?>"><?php the_post_thumbnail('excerpt-image'); ?></a>
<a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a>
</li>
</ul>

<?php endwhile; ?>

<?php echo '</div>'; ?>
<?php
// Reset the global $the_post as this query will have stomped on it
wp_reset_postdata();

endif;

$cache[$args['widget_id']] = ob_get_flush();
wp_cache_set('widget_recent_posts', $cache, 'widget');
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = (int) $new_instance['number'];
$instance['show_date'] = (bool) $new_instance['show_date'];
$this->flush_widget_cache();

$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['widget_recent_entries']) )
delete_option('widget_recent_entries');

return $instance;
}

function flush_widget_cache() {
wp_cache_delete('widget_recent_posts', 'widget');
}

function form( $instance ) {
$title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>

<p><input class="checkbox" type="checkbox" <?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
<?php
}
}

// End Codes for Custom Recent Posts Widget

2. Add the following codes to the style.css file:

.widget-title {
font-size: 30px;
font-weight: bold;
padding-bottom: 5px;
}

.widget ul {
list-style-type: none;
text-align: left;
padding-left: 0;
margin-left: 0;
display: block;
}

.widget li {
margin-bottom: 40px;
height: 10px;
display: inline-block;
}

.widget li img {
display: inline-block;
margin-left: 0;
margin-right: 10px;
width: 60px;
height: 40px;
float: left;
}

.widget li a {
vertical-align: top;
}

3. Go to Appearance > Widgets in the WordPress dashboard and start dragging the custom recent posts widget into one of the widget areas.