Adding thumbnails to WordPress Recent Posts Widgets

Recent Post with Thumbnail

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

recent post with thumb vs simple

3 thoughts on “ Adding thumbnails to WordPress Recent Posts Widgets

  1. Bhagwant

    Well written post. You have a great looking blog. Bahut vadia keep it up. I think you have just started all the best for your future. Happy to see a blogger from Patiala.

    Reply
  2. Xtreme NO

    I’m impressed, I must say. Seldom do I encounter a blog that’s equally educative and entertaining, and let me tell you, you
    have hit the nail on the head. The problem is something too few folks are speaking intelligently
    about. I am very happy I found this in my
    hunt for something relating to this.

    Reply
  3. Colon Health Diet

    I think this is one of the most important information for me.
    And i am glad reading your article. But wanna remark on some general things, The
    web site style is perfect, the articles is really nice : D.
    Good job, cheers

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>