Create Awesome Recent Posts Widget With Thumbnails WordPress

Widgets thumbnails are useful to beautify the website. Most of the free WordPress theme doesn’t provide posts widget with thumbnails. Create WordPress recent post thumbnail widget is very easy. Within 7 minutes, and a few steps you can use your awesome post widget thumbnails in your WordPress site.

Table of Contents

1 Why do we need to create our custom widget?
2 Create recent post thumbnail widget plugin.
3 Download Source Code
4 Conclusion

Why do we need to create our custom widget?

If you master programming, you should create a custom widget instead of using a free plugin. Because you can fully control the plugin activity that you build.

Besides, custom thumbnails widget should be compatible with your WordPress theme. Making your custom post thumbnail widget will suitable with your taste.

80% of sites display the WordPress widgets. If you have an e-commerce site, Of course, you want to show a list of products with images on the sidebar. Recent posts widget used to display a list of the latest post/product. Besides to beautify your WordPress site, display recent posts widget help the visitor to find the latest updates. Recent posts widget is usually put on the sidebar.

There are 2 ways to create custom post widget thumbnails in WordPress.

First, you can add new function on the function.php file in your theme. The second, you create a new WordPress plugin to show your custom recent post widget.

I recommended the second choice. Because, if we change/add the code in the function.php, it will be a problem when there is an update to your theme. Your custom code will be removed by updater theme.

Let’s begin the tutorial.

Create recent post thumbnail widget plugin.

1. Create new WordPress Plugin in 3 steps

To create a new WordPress plugin, we just need 3 steps, let I show you…

A. Create new plugin folder

You need to create unique plugin folder name using lowercase texts and dashes, in this tutorial I created custom-recent-post-widget-thumbnail folder

B. Create main PHP file plugin

The main PHP file name must same with your plugin folder name such as custom-recent-post-widget-thumbnail.php

C. Create plugin file headers

We must write the header plugin containing widget plugin name, description, version, author so that the WordPress core recognizes it (Read more here). Copy the following code to your main PHP file.

/**
 * Plugin Name: Custom recent post widget thumbail seegatesite	
 * Plugin URI: https://seegatesite.com/how-to-create-recent-posts-widget-with-thumbnails-on-wordpress
 * Description: Tutorial create recent post widget thumbnails WordPress.
 * Version: 1.0
 * Author: Sigit Prasetya Nugroho
 * Author URI: https://seegatesite.com
 */

/**

* Plugin Name: Custom recent post widget thumbail seegatesite

* Plugin URI: https://seegatesite.com/how-to-create-recent-posts-widget-with-thumbnails-on-wordpress

* Description: Tutorial create recent post widget thumbnails WordPress.

* Version: 1.0

* Author: Sigit Prasetya Nugroho

* Author URI: https://seegatesite.com

2. Add the recent post thumbnails widget code after file headers

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' );
		$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()) :
			echo $args['before_widget'];
			if ( $title ){ 
				echo $args['before_title'] . $title . $args['after_title']; 
			} 

			echo "<ul>";
			while ( $r->have_posts() ) : 
				$r->the_post();
				echo '<li class="thumbnail-post-w">';
				echo '<div class="widget-image">';
				if (has_post_thumbnail() ) {
					echo '<a href="';the_permalink(); echo '">';
					the_post_thumbnail('the-post-thumb');
					echo '</a>';
				}	
				echo '</div>';

				echo '<div class="widget-data">';
				echo '<h4>';
				echo '<a href="';the_permalink(); echo '">';
				echo substr(get_the_title(),0,100).'...'; 
				echo '</a>';
				echo '</h4>	';
				echo '<span class="thumbnail-post-w-author">'.get_author_name().'</span>';
				echo '<span class="thumbnail-post-w-date">'.get_the_date().'</span>';
				echo '</div>';
				echo '</li>';
			endwhile; 
			echo '</ul>';
			echo $args['after_widget'];
			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" />
		<br>
		<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label>
		<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' ); ?>" />
		<?php
	}
}
if ( function_exists( 'add_theme_support' ) ) {
	add_image_size( 'the-post-thumb', 60, 9999 ); 
}
function register_Custom_Recent_Posts_Thumbnail() {
	register_widget( 'Custom_Recent_Posts_Thumbnail' );
}
add_action( 'widgets_init', 'register_Custom_Recent_Posts_Thumbnail' );

add_action('wp_enqueue_scripts', 'callback_for_style');
function callback_for_style() {
    wp_register_style( 'custom-recent-post-widget-thumbnail',  plugins_url('custom-recent-post-widget-thumbnail.css',__FILE__ )); 
    wp_enqueue_style( 'custom-recent-post-widget-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

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

$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()) :

echo $args['before_widget'];

if ( $title ){

echo $args['before_title'] . $title . $args['after_title'];

}

echo "<ul>";

while ( $r->have_posts() ) :

$r->the_post();

echo '<li class="thumbnail-post-w">';

echo '<div class="widget-image">';

if (has_post_thumbnail() ) {

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

the_post_thumbnail('the-post-thumb');

echo '</a>';

}

echo '</div>';

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

echo '<h4>';

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

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

echo '</a>';

echo '</h4> ';

echo '<span class="thumbnail-post-w-author">'.get_author_name().'</span>';

echo '<span class="thumbnail-post-w-date">'.get_the_date().'</span>';

echo '</div>';

echo '</li>';

endwhile;

echo '</ul>';

echo $args['after_widget'];

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

<br>

<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label>

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

<?php

}

if ( function_exists( 'add_theme_support' ) ) {

add_image_size( 'the-post-thumb', 60, 9999 );

}

function register_Custom_Recent_Posts_Thumbnail() {

register_widget( 'Custom_Recent_Posts_Thumbnail' );

}

add_action( 'widgets_init', 'register_Custom_Recent_Posts_Thumbnail' );

add_action('wp_enqueue_scripts', 'callback_for_style');

function callback_for_style() {

wp_register_style( 'custom-recent-post-widget-thumbnail', plugins_url('custom-recent-post-widget-thumbnail.css',__FILE__ ));

wp_enqueue_style( 'custom-recent-post-widget-thumbnail' );

}

Explanation:

We create PHP class named Custom_Recent_Posts_Thumbnail extend from WP_Widget class.
Declaration new post thumbnail size ( the-post-thumb ).
We registered new CSS style to the WordPress Core

3. Create a new CSS file to make over your plugin style

.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: 14px;
}
.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{
	float: left;
	display: block;
	max-height: 75px;
	min-height: 75px;
	padding: 5px;
	text-align: center;
}
.widget-image img{
	max-height: 60px;
	width: auto;
}
li.thumbnail-post-w{
	min-height: 75px;
}
span.thumbnail-post-w-author,span.thumbnail-post-w-date{
	font-size: 12px;
	display: block;
}

.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: 14px;

}

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

float: left;

display: block;

max-height: 75px;

min-height: 75px;

padding: 5px;

text-align: center;

}

.widget-image img{

max-height: 60px;

width: auto;

}

li.thumbnail-post-w{

min-height: 75px;

}

span.thumbnail-post-w-author,span.thumbnail-post-w-date{

font-size: 12px;

display: block;

}

4. Compress your new plugin

To install WordPress plugin, you can compress the plugin folder using zip compression or upload the plugin folder to your WordPress Plugin folder (wp-content/plugins)

5. Activate your plugin

make sure the new WordPress recent post thumbnails widget available in your widget dashbord.

Voila! your new recent post widget with thumbnail already to install.

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

Other article : Create WordPress Theme with Bootstrap And Underscores Step by Step

Download Source Code

As a bonus, you can download the full source code here

Conclusion

Create a WordPress Plugin just need 3 steps.
Create recent post widget with thumbnail isn’t hard. Instead installing a free plugin, you can create your own plugin with your style.

So my article about how to create recent posts widget with thumbnails WordPress, hope useful

Create Awesome Recent Posts Widget With Thumbnails WordPress (Update)

Why do we need to create our custom widget?

Create recent post thumbnail widget plugin.

1. Create new WordPress Plugin in 3 steps

A. Create new plugin folder

B. Create main PHP file plugin

C. Create plugin file headers

2. Add the recent post thumbnails widget code after file headers

3. Create a new CSS file to make over your plugin style

4. Compress your new plugin

5. Activate your plugin

Download Source Code

Conclusion

About Sigit Prasetya Nugroho

Leave a Reply Cancel reply

Why do we need to create our custom widget?

Create recent post thumbnail widget plugin.

1. Create new WordPress Plugin in 3 steps

A. Create new plugin folder

B. Create main PHP file plugin

C. Create plugin file headers

2. Add the recent post thumbnails widget code after file headers

3. Create a new CSS file to make over your plugin style

4. Compress your new plugin

5. Activate your plugin

Download Source Code

Conclusion

About Sigit Prasetya Nugroho

Reader Interactions

Leave a Reply Cancel reply