How to Display Recent Posts with Thumbnails in WordPress

Working with WordPress is a breeze, mainly because the architecture of the content management system is rock-solid and easy to understand but most importantly because the community is so big and can offer you solutions for all your needs, through themes and plugins. Those who run websites built on WordPress are using a series of plugins which can make their life easier and more productive but generally speaking, plugins affect the loading speed performances of your website and there are some cases which don`t require using a plugin.

We all understand the importance of WordPress plugins, but because the WordPress development is moving at such a high speed, compatibility issues might be inevitable. This is happening when WordPress is being updated to a new version and some of the plugins become incompatible with the new code. You might get up one morning and notice that your website doesn`t work as it should and you’ll find out that WordPress being updated was the issue. But why updating WordPress is an issue? Shouldn’t it be a good thing? Ah, plugins are the ones which are messing things around.

So there should be a balance between the plugins you use and the ones which can be replaced with pieces of code because you can replicate plugins functionality. Of course, you can`t replace a plugin which is dealing with page cache, unless you`re a programming machine, but you can, for example, create some code which displays your latest posts. Speaking about that, this is exactly what I`m going to show you today:

How to display your recent posts, with thumbnails, without using a plugin

I`m sure you already know it, but the file which deals with custom code is called functions.php.

Okay, let`s get started. Open functions.php (or create it in case you don`t have one but I doubt it). To make use of the thumbnails, firstly we need to activate them using the next piece of code:

add_theme_support( 'post-thumbnails' ); } //Adds thumbnails compatibility to the theme 
set_post_thumbnail_size( 200, 170, true ); // Sets the Post Main Thumbnails 
add_image_size( 'delicious-recent-thumbnails', 55, 55, true ); // Sets Recent Posts Thumbnails 

What I`ve written here sounds like this: Enable the support for post thumbnails (add_theme_support). Create a thumbnail pattern called post-thumbnails with dimensions of 200x170px and the ability to be cropped(true). This set of thumbnails should be used for the post thumbnails only. For any purposes, create a new thumbnail pattern by using add_image_size. So in my example, I created another thumbnail pattern of 55x55px, called delicious-related-thumbnails, which will be used for generating the recent posts’ thumbnails. Make sure to always prefix your functions. I used the delicious prefix here.

For more information about WordPress thumbnails, check out the WordPress codex.

Now that we`ve enabled post thumbnails, let`s write the function, inside the same functions.php file.

?>
<ul>
<?php
function delicious_recent_posts() {
    $del_recent_posts = new WP_Query();
    $del_recent_posts->query('showposts=3');
        while ($del_recent_posts->have_posts()) : $del_recent_posts->the_post(); ?>
            <li>
                <a href="<?php esc_url(the_permalink()); ?>">
                    <?php the_post_thumbnail('delicious-recent-thumbnails'); ?>
                </a>
                <h4>
                    <a href="<?php esc_url(the_permalink()); ?>">
                        <?php esc_html(the_title()); ?>
                   </a>
                </h4>
            </li>
        <?php endwhile;
    wp_reset_postdata();
}
?>
</ul>
<?php

The code is easy to understand. We assigned a new wp query to the $del_recent_posts variable which acts exactly like a WordPress loop, but for the things we asked it to use (showposts=3). So, as long as the query finds posts, generates a list of items which displays the latest 3 posts with thumbnail() and title().

The piece of code is written in a minimal manner, but you can add HTML markup like divs with classes to style the widget in your own way.

In order to make it work, you have to call the function anywhere in your WordPress theme (single.php, footer.php, sidebar.php, etc), with the next line of code. Most people are using it inside the sidebar.

<?php echo delicious_recent_posts(); ?>

That should be all. This is how you could showcase your recent posts with thumbnails, without using a plugin.

Yeah, but you might say, Hey! I don`t have the skills nor the intention to dig into my WordPress theme, not to say that I don`t know what a child theme is? For those of you feeling this way, you could always use a plugin for this type of job. Here`s a list of plugins which could help you display your recent posts as a sidebar widget or as a shortcode or even more.

Plugins for displaying recent posts with thumbnails

This is my roundup for WordPress plugins, which could help you display your latest pieces of content faster and in a better fashionable way than what you`re used to. Forgot to mention that they’re all free to use, being available for download in the WordPress plugins directory.

Recent Posts Widget Extended

This one is a very popular choice, being downloaded for almost 500K times. With a rating of 4.8 out of 5 stars, it does its job quite well. You could use it for displaying regular blog posts but also posts from custom post types and taxonomies. It comes as a widget but also provides support for embedding it into posts or pages as a shortcode. Pretty feature-rich, I would say!

Flexible Posts Widget

I find this one the best plugin for displaying your recent posts with style. It`s easy to customize and is compatible with multi-language plugins like the WPML plugin. Another plus is that it could display posts from multiple post types and taxonomies at once.

Recent Posts Widget With Thumbnails

This plugin is built on the default Recent Posts widget and is another popular choice, based on the number of downloads and ratings. What is cool about it is that it provides a series of CSS classes and WordPress hooks which will help you customize the output in a more advanced way. The only downside of the plugin is that it doesn`t support custom post types and it doesn`t come up with a shortcode.

I thank you for your time and hope you`ve learned something today. If you have any questions or feedback, don`t hesitate to leave a comment below. Also, don`t forget to follow me on Twitter.