Recent blog posts widget are useful to beautify the website. Most of the free WordPress theme doesn’t provide blog posts plugin with thumbnails. Create WordPress’s new post thumbnails is very easy. Within 7 minutes and a few steps below, you can use your recent post widget thumbnails in your WordPress site.
Table of Contents
Why do you need to customize the WordPress plugin?
- The more features offered, the heavier the plugin works. We need to show the lightweight WordPress recent post widget to improve your page speed.
- We hold full control of the plugin activities.
- Customize recent posts widget will suitable for your taste.
80% of sites display the WordPress widgets. If you have an e-commerce site, Of course, you want to show recently products with images on the sidebar. Besides that, The widget used to display the latest post/product. Displaying recent posts widget help the visitor to find the latest updates too.
There are two ways to create recent posts plugin with a thumbnail in WordPress.
- Paste the code directly in the file “function.php” at your root theme.
- Create a WordPress plugin to show your customize recent blog post widget.
I recommended method number 2. Because, if we add the code in the “function.php“, it Will be a problem when your theme is updated. The updater theme will remove your custom code.
Let’s begin the tutorial.
Create WordPress Recent Posts Thumbnail Plugin.
1. Initiate a new plugin
To create a WordPress plugin, we need 3 steps:
- Create plugin folder
We need to create unique plugin folder name using lowercase texts and dashes, in this tutorial I created custom-recent-post-widget-thumbnail folder. - Create main PHP file plugin
The main PHP file’s name must same with your plugin folder name such as custom-recent-post-widget-thumbnail.php
- Create plugin header
Write the header plugin in the first line in the main’s plugin file (requirements). The plugin header must contain :- name : the plugin name / title
- description : the description of your plugin
- version : plugin versioning
- author : your name
Copy the following code :
12345678/*** 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*/
After filling all the header needs, the WordPress core recognizes it (Read more https://codex.wordpress.org/File_Header).
2. Create the primary code for making recent thumbnail post thumbnails
Copy the following code to your main PHP file after the headers code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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. Beautify your widgets
Create a new CSS file to make over your plugin style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | .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 plugin
To install WordPress plugin, we need to compress the plugin folder using “zip” format or upload the plugin folder dan file 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.

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 4 steps. If you understand a little about programming, make it a habit to make it yourself.
- Unique plugin will increasing your website traffic
So my article about how to create WordPress recent posts widget with thumbnails, hope useful
Leave a Reply