Seegatesite.com

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

🏠 » Wordpress » Create Awesome WordPress Recent Posts Widget With Thumbnails

Create Awesome WordPress Recent Posts Widget With Thumbnails

By ∙ ∙ 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.

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 :

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 :

Reader Interactions

Leave a 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.