How to add thumbnails to “Recent Posts” in WordPress

recent posts with thumbnail

Many people who operate websites with WordPress often want to add thumbnails to their “Recent Posts” section.

Unfortunately, as of February 2024, there isn’t an option to display thumbnail images in the “Recent Posts” widget.
But don’t worry, in this article, we will share how you can add thumbnails to recent posts by simply adding a few lines of code to the functions.php file.

Add thumbnails to “Recent Posts”

Here is the PHP code to add thumbnail images to recent posts in WordPress.
Please put this in functions.php.
※If you’re uncomfortable with editing PHP files, we recommend using the “method with plugins” that will be introduced later.

// Add thumbnails to "Recent Posts"
function custom_recent_posts_title($title, $id){
    if( preg_grep('/class-wp-widget-recent-posts.php/', array_column(debug_backtrace(), 'file')) ){
        $thumb = get_the_post_thumbnail($id) ? : '<img src="'.get_template_directory_uri().'/lib/images/noimage.png">';
        $title = "<figure>$thumb</figure><p>$title</p>";
    return $title;
add_filter('the_title', 'custom_recent_posts_title', 10, 2);

In the fourth line, if there is no thumbnail, a “No Image” image is used instead, but you need to prepare this image yourself.

Code outputting recent posts

The above code is a simple one that represents “When the_title (or get_the_title) function is called in class-wp-widget-recent-posts.php, append an img tag to the original title and return it.”
The class-wp-widget-recent-posts.php is located under /wp-includes/widgets/.

The files under wp-includes directory should not be directly rewritten, so using the add_filter function from the functions.php file is the appropriate method for making changes.


Styling with CSS for appearance adjustments

The final step is to adjust the appearance using CSS.
In this style example, we align the title and thumbnail side by side and add a border to the thumbnail.

.widget_recent_entries a{
  gap: 0 4%;
.widget_recent_entries figure{
  width: 38%;
  height: 65px;
  border: 2px solid #e3ddd7;
  border-radius: 5px;
  overflow: hidden;
.widget_recent_entries img{
  width: 100%;
  height: 100%;
  object-fit: cover;
.widget_recent_entries p{

Method using a plugin

If you’re uncomfortable with editing PHP files, using a plugin might be a better option.
In WordPress, there seems to be a useful plugin that provides a ‘widget that outputs recent posts with thumbnails’ as shown below.

Recent Posts Widget With Thumbnails
See How to use
Recent Posts Widget Extended
See How to use

That is all, it was about how to add thumbnails to “Recent Posts” in WordPress!

Sponsored Link

You can subscribe by SNS

Sponcerd Link

Leave a Reply