WordPress – Recent Posts Widget with Thumbnail – Without Plugins

Recent Posts Thumbnails – Swap Coding in Place of Plugins

Are you a lover of programming & don’t like to hunt for plugins on small things? You are not alone in WordPress world.

Yes, WordPress Codex documentation is too good & easy to understand. With just spending little time on it, we can tweak or add the code to suit our needs.

We have discussed about default (1) WordPress Widget, (2) Plugins & (3) PHP code to add your own Recent Posts widget with Thumbnails,

1. WordPress – Default Recent Posts

With just one month experience in wordpress, apart from blogging the next thing that I focused was to find out different ways to engage the user for more than single post reading. And it paved the way to find out the way to show “Recent Posts” in the sidebar provided by WordPress.

Steps to add default Recent Posts Widget

• Login to WordPress admin page to access the Dashboard. WordPress Admin URL is configurable during installation and it will be similar to this.

• http://<<YourWebsiteName.com>>/wp-admin ( if you’ve installed wordpress at the root itself)
• http://<<YourWebsiteName.com>>/<<wordpress-install-path>>/wp-admin (for wordpress installed at specific path

• Under Dashboard, access Appearance and choose Widgets. This is where all the default widgets provided by WordPress will be listed. Depending on the template that you’ve chosen, you can add the widgets to Left Sidebar, Right Sidebar, Footer area, etc.,
  • Add Recent Posts to Side bar widget area by dragging it and now recent posts gets added to sidebar

• Now open a page in your site whose Page’s template supports “Sidebar” ( If you go to edit mode of a page, you can find the chosen template format). Unless you’ve set a page’s template to “Full-Width template”, you will be able to see the Sidebar in your website pages.

• You can see ten recent posts getting displayed in the page’s sidebar.

After Thoughts:

For initial days, I was contempt with the default Recent posts provided by WordPress.

But then, it was just displaying the Title in header tags and I felt that it didn’t look that appealing for the user to explore them. These thoughts helped to work towards possible customization on it.

2. Short Term Solution – Use Available Plugins

After lot of googling, I got to know that there were good plugins to display recent posts with thumbnails and integrated one of the plugin in my website that also showed thumbnails. It was a better option than my previous fix and it was lying there for a month.

The major problem faced was the time took to load the recent posts by plugin and again made to do thought processing.

Plugins are really good for initial setup and really without them, it would have made my wordpress journey a very difficult ride. Now also, I’m using various plugins for handling SEO/ Code Display / Sharing pages on Social Media. As the time progressed, implemented Child theme in the website and was able to make small CSS Style changes.

It helped to boost my confidence in coding and the next thing was to play around with PHP to obtain the required customization.

3. Long Term Solution – Add Your Own PHP to Display Recent Posts Widget with Thumbnails without Plugins

Wherever possible, started looking out for code samples to read and implement it on my own and been in IT industry for nearly 10 years, was able to make good progress and spent more time playing with the code and it added lot of excitement to blogging.

I made a ‘To-Do List’ note to get replace few plugins.

1. Recent Posts in the side bar
2. Popular posts in the side bar to order by Comments popularity
3. Display related Category Post titles at the end of the current post
4. Plugin that was used to add Adsense code
5. Plugin to display our Social Network pages in the side bar

In this post, we will see about showing Recent Posts Widget with Thumbnails in Sidebar.

Copy-Paste the below code in sidebar.php after deciding the placement of your Recent Posts. I’ve added just before <?php dynamic_sidebar($sidebar_select); ?> so that this recent posts gets displayed first in the sidebar followed by all the widgets that is chosen by us under Appearance’s Sidebar widget area.

<?php $recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
&nbsp;&nbsp;&nbsp; if($recent['post_status']=="publish"){
	if ( has_post_thumbnail($recent["ID"])) {
		echo '<li style="padding:5px;border-bottom:1px solid goldenrod;">
		<a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .   get_the_post_thumbnail($recent["ID"], 'thumbnail'). $recent["post_title"].'</a></li> ';
	}else{
		echo '<li style="padding:5px;border-bottom:1px solid goldenrod;">
		<a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .   $recent["post_title"].'</a></li> ';
	}
     }
}
?>

Note:

• wp_get_recent_posts() method does not filter the post status. So, check is made to display only “Published” post.
• wp_get_recent_posts() by default returns 10 posts. We can do many customizations according to our need.
• Thumbnail sizes can be defined in the second argument of get_the_post_thumbnail().
• CSS Styling can be customized based on the requirement.

Try adding this PHP code to Display Recent Posts with Thumbnails in your wordpress blog.

Reference:

• https://codex.wordpress.org/Function_Reference/wp_get_recent_posts
• https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail