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

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

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

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

Widget Recent Post Thumbnail Option

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

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: