Widgets are just like blocks that added to the site to display different type of content in an nice and manageable manner. If you are familiar with wordpress, then you probably understand what widgets are and how to use them. The default installation of wordpress incorporate Recent Posts Widget that display Recent Posts entries from your Blog. This pericular widget has some settings as Title, no of posts to display etc. But this perticluar widget only display the Title and date not the thumbnail.

In this Tutorial, I will be providing you the Code that you can add into your function.php file and What you get is a Custom recent Post Widget. Just Replace the default with this custom and you will have thumbnails along with title and Date.

Here is Your Code:

//<-------------------- Recent Post Widget with Thumbnails -------------------------->

class thirst_WP_Widget_Recent_Posts extends WP_Widget {

function __construct() {
 $widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "The most recent posts on your site with thumbnails") );
 parent::__construct('thirst-recent-posts', __('Thirst 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 = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
 if ( empty( $instance['number'] ) || ! $number = absint( $instance['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, 'category__not_in' => array(23,24,25,26,27) ) ) );
 if ($r->have_posts()) :
?>
 <?php echo $before_widget; ?>
 <?php if ( $title ) echo $before_title . $title . $after_title; ?>

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

<li>
 <div>

 <a href="<?php the_permalink() ?>" title="<?php echo esc_attr( get_the_title() ? get_the_title() : get_the_ID() ); ?>"><?php the_post_thumbnail('recent-post-thumb');?></a>
 </div>

 <div>
 <a href="<?php the_permalink() ?>" title="<?php echo esc_attr( get_the_title() ? get_the_title() : get_the_ID() ); ?>">

 <?php if ( get_the_title() ) {
 $title = get_the_title();
 echo substr($title, 0,40);
 }
 else the_ID(); ?></a>
 </div>

 <?php if ( $show_date ) : ?>
 <div><?php echo get_the_date(); ?></div>

 <?php endif;

 thirst_number_comments();

 ?>
</li>
 <?php endwhile; ?>
 </ul>
 <?php echo $after_widget; ?>
<?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 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 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
 }
}

function thirst_WP_Widget_Recent_Posts() {
 // define widget title and description
 $widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "The most recent posts on your site with thumbnails") );
 // register the widget
 $this->WP_Widget('thirst-recent-posts', __('Thirst Recent Posts'), $widget_ops);
 }
function thirst_WP_Widget_Recent_Posts_init()
{
 register_widget('thirst_WP_Widget_Recent_Posts');
}
add_action('widgets_init','thirst_WP_Widget_Recent_Posts_init');

In order to have good aesthetics, include the following css in your style.css file.

.widget img {
 background-color: #FFFFFF;
 border: 1px solid rgba(0, 0, 0, 0.2);
 box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
 margin: 0 0.714286rem 0 0;
 max-height: 70px;
 max-width: 5rem;
 min-height: 70px;
 min-width: 5rem;
 padding: 4px;
 position: relative;
 z-index: 100001;
}

.widget-area .widget a, .widget-area .widget a:visited {
color: #815970;
display: block;
font-size: 15px;
height: auto;
width: auto;
}

.recent-post-thumbnail {
float: left;
position: relative;
}

.thirst-recent-post-li {
list-style: none outside none;
margin: 10px 0 0;
min-height: 80px;
position: relative;
}