• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » Create Awesome WordPress Recent Posts Widget With Thumbnails

Create Awesome WordPress Recent Posts Widget With Thumbnails

By Sigit Prasetya Nugroho ∙ June 8, 2016 ∙ Wordpress ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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

  • 1 Why do you need to customize the WordPress plugin?
  • 2 Create WordPress Recent Posts Thumbnail Plugin.
  • 3 Download Source Code
  • 4 Conclusion

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.

  1. Paste the code directly in the file “function.php” at your root theme.
  2. 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.

Related Articles :

  • How To Load JSON Data From Rest API To Select2 JQuery Plugin
  • Create WordPress Slider Without Javascript
  • Typed.js The Javascript Library For Automatic Text Writing Effects

Let’s begin the tutorial.

Create Recent Posts Widget With Thumbnails WordPress Min

Create WordPress Recent Posts Thumbnail Plugin.

1. Initiate a new plugin

To create a WordPress plugin, we need 3 steps:

  1. 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.
  2. 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
    How To Create WordPress Plugin In 3 Steps Min
  3. 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 :

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * 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 ).
    Register New Post Thumbnail Size WordPress
  • We registered new CSS style to the WordPress Core
    Register Css Style WordPress

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.

Widget Recent Post Thumbnail WordPress
Recent posts thumbnail in widget menu

Widget Recent Post Thumbnail Option

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

Another WordPress Related Post :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com