How To Create Recent Posts Widget With Thumbnails On WordPress

Seegatesite – Widgets with thumbnails are useful to beautify the look of the website. Most of free WordPress theme doesn’t support recent posts widget with thumbnails. Creating a post thumbnail widget is very easy, with a few steps you can already use the recent post with thumbnail on your own.

Recent posts widget used to display a list of the latest post / article. In addition to beautifying the look of WordPress, Widget recent posts used to help the visitor to find the latest article updates. Recent posts widget is usually put on the sidebar.

I think, I don’t need to explain in detail the code how to create a widget in WordPress. It’s been a lot of sources that discuss the basics of creating WordPress widget, you can find here. In outline code to create a WordPress widget like the following :

<?php class Foo_Widget extends WP_Widget { function __construct() { parent::__construct( 'foo_widget', // Base ID __( 'Widget Title', 'text_domain' ), // Name array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
		);
	}
	public function widget( $args, $instance ) {
		echo $args['before_widget'];
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
		}
		echo __( esc_attr( 'Hello, World!' ), 'text_domain' );
		echo $args['after_widget'];
	}
	public function form( $instance ) {
		$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
		?>


		<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title:' ) ); ?></label> 
		<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
		

		<?php } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } ?>

<?php class Foo_Widget extends WP_Widget { function __construct() { parent::__construct( 'foo_widget', // Base ID __( 'Widget Title', 'text_domain' ), // Name array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args

);

}

public function widget( $args, $instance ) {

echo $args['before_widget'];

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];

}

echo __( esc_attr( 'Hello, World!' ), 'text_domain' );

echo $args['after_widget'];

}

public function form( $instance ) {

$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );

<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title:' ) ); ?></label>

<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">

<?php } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } ?>

Source : WordPress.Org

Here how to create simple recent posts widget with thumbnails WordPress for beginner

1. Add the following code in the function.php in your theme

<?php class Custom_Recent_Posts_Thumbnail extends WP_Widget { public function __construct() { $widget_ops = array('classname' => 'widget_recent_entries_thumbnail', 'description' => __( "Your site&#8217;s most recent Posts with thumbnail.") );
		parent::__construct('recent-posts-thumbnail', __('Recent Posts Thumbnail'), $widget_ops);
		$this->alt_option_name = 'widget_recent_entries_thumbnail';

		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') );
	}

	public function widget( $args, $instance ) {
		$cache = array();
		if ( ! $this->is_preview() ) {
			$cache = wp_cache_get( 'widget_recent_posts_thumbnail', '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();

		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );

		/** This filter is documented in wp-includes/default-widgets.php */
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
		if ( ! $number )
			$number = 5;
		$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 $args['before_widget']; ?>
		<?php if ( $title ) { echo $args['before_title'] . $title . $args['after_title']; } ?>



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


<li>


<div class="row">';
		echo '


<div class="widget-image col-xs-4">';
			if (has_post_thumbnail() ) {
				echo '<a href="';the_permalink(); echo '">';
					the_post_thumbnail();
				echo '</a>';
			}	
		echo '</div>



';
		echo '


<div class="widget-data col-xs-8">';
		echo '


<h4><a href="'; the_permalink(); echo'">';
			echo substr(get_the_title(),0,100).'...'; 
		echo '</a></h4>



';
		echo '<span class=""><i class="fa fa-calendar-check-o"></i> '.get_the_date().'</span>';
		echo '</div>


</div>


</li>



';
		?>
		<?php endwhile; ?>
		</ul>



		<?php echo $args['after_widget']; ?>
<?php // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); endif; if ( ! $this->is_preview() ) {
			$cache[ $args['widget_id'] ] = ob_get_flush();
			wp_cache_set( 'widget_recent_posts_thumbnail', $cache, 'widget' );
		} else {
			ob_end_flush();
		}
	}

	public 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'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
		$this->flush_widget_cache();

		$alloptions = wp_cache_get( 'alloptions', 'options' );
		if ( isset($alloptions['widget_recent_entries_thumbnail']) )
			delete_option('widget_recent_entries_thumbnail');
		return $instance;
	}

	public function flush_widget_cache() {
		wp_cache_delete('widget_recent_posts_thumbnail', 'widget');
	}

	public 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;
?>


<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; ?>" />




<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" />




<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>

<?php
	}
}
function register_Custom_Recent_Posts_Thumbnail() {
	register_widget( 'Custom_Recent_Posts_Thumbnail' );
}
add_action( 'widgets_init', 'register_Custom_Recent_Posts_Thumbnail' );

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<?php class Custom_Recent_Posts_Thumbnail extends WP_Widget { public function __construct() { $widget_ops = array('classname' => 'widget_recent_entries_thumbnail', 'description' => __( "Your site’s most recent Posts with thumbnail.") );

parent::__construct('recent-posts-thumbnail', __('Recent Posts Thumbnail'), $widget_ops);

$this->alt_option_name = 'widget_recent_entries_thumbnail';

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') );

}

public function widget( $args, $instance ) {

$cache = array();

if ( ! $this->is_preview() ) {

$cache = wp_cache_get( 'widget_recent_posts_thumbnail', '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();

$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );

/** This filter is documented in wp-includes/default-widgets.php */

$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;

if ( ! $number )

$number = 5;

$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 $args['before_widget']; ?>

<?php if ( $title ) { echo $args['before_title'] . $title . $args['after_title']; } ?>

<ul>

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

<?php

echo '

<li>

<div class="row">';

echo '

<div class="widget-image col-xs-4">';

if (has_post_thumbnail() ) {

echo '<a href="';the_permalink(); echo '">';

the_post_thumbnail();

echo '</a>';

}

echo '</div>

echo '

<div class="widget-data col-xs-8">';

echo '

<h4><a href="'; the_permalink(); echo'">';

echo substr(get_the_title(),0,100).'...';

echo '</a></h4>

echo '<span class=""><i class="fa fa-calendar-check-o"></i> '.get_the_date().'</span>';

echo '</div>

</div>

</li>

<?php endwhile; ?>

</ul>

<?php echo $args['after_widget']; ?>

<?php // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); endif; if ( ! $this->is_preview() ) {

$cache[ $args['widget_id'] ] = ob_get_flush();

wp_cache_set( 'widget_recent_posts_thumbnail', $cache, 'widget' );

} else {

ob_end_flush();

}

public 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'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;

$this->flush_widget_cache();

$alloptions = wp_cache_get( 'alloptions', 'options' );

if ( isset($alloptions['widget_recent_entries_thumbnail']) )

delete_option('widget_recent_entries_thumbnail');

return $instance;

}

public function flush_widget_cache() {

wp_cache_delete('widget_recent_posts_thumbnail', 'widget');

}

public 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;

<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; ?>" />

<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" />

<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>

<?php

}

function register_Custom_Recent_Posts_Thumbnail() {

register_widget( 'Custom_Recent_Posts_Thumbnail' );

}

add_action( 'widgets_init', 'register_Custom_Recent_Posts_Thumbnail' );

2. Then add the following CSS on style.css in the theme

.widget{
	padding:20px;
	margin: 0px;
}
.widget h3{
        margin: 0 0 10px 0;
        border-bottom: 5px solid #dfdfdf;
        padding-bottom: 5px;
        font-size: 24px;
}
.widget h4{
	margin:0;
	padding: padding:0 0 5px;
	font-size: 13px;
}
.widget ul, .widget-footer ul {
	list-style: none;
	margin : 0;
	padding: 0;
}
.widget ul li, .widget-footer ul li  {
	margin: 0 0 5px;
	border-bottom: 1px dotted #ddd;
}
.widget ul li:hover {
	position: relative;
}
.widget-image{
	display: block;
	max-height: 100px;
	padding: 5px;
	text-align: center;
}
.widget-image	img{
	max-height: 60px;
}

.widget{

padding:20px;

margin: 0px;

}

.widget h3{

margin: 0 0 10px 0;

border-bottom: 5px solid #dfdfdf;

padding-bottom: 5px;

font-size: 24px;

}

.widget h4{

margin:0;

padding: padding:0 0 5px;

font-size: 13px;

}

.widget ul, .widget-footer ul {

list-style: none;

margin : 0;

padding: 0;

}

.widget ul li, .widget-footer ul li {

margin: 0 0 5px;

border-bottom: 1px dotted #ddd;

}

.widget ul li:hover {

position: relative;

}

.widget-image{

display: block;

max-height: 100px;

padding: 5px;

text-align: center;

}

.widget-image img{

max-height: 60px;

}

Save and you have successfully created a recent post thumbnail widget. Go to the menu and make sure that your widget has been installed in the new widget theme as shown below :

Widget Recent Post Thumbnail WordPress — Recent posts thumbnail in widget menu

How To Create Widget Recent Post Thumbnail WordPress — Display recent post thumbnail WordPress

Another alternative for creating recent posts widget with thumbnails, you can create as a plugin that you can find in the article here. So my article about how to create recent posts widget with thumbnails WordPress, hope useful