How to Show Related Posts With Thumbnails in WordPress

Disclosure: WPrBlogger content is reader-supported. This means we may receive financial compensation if you purchase products or services on the merchant website, but at no additional cost to you.

There are several ways to show related posts with thumbnails in WordPress. It depends on your theme features. And whether you prefer dedicated plugins, editing theme files, or you want a specific function.

There are many options. But if you have modern WordPress themes like Astra, GeneratePress, and KadenceWP, the process is much easier than you might think. You can show related posts without using a plugin or editing your theme files.

In fact, Kadence and Astra enable you to effortlessly show related posts with featured images or thumbnails. You only need to click a few buttons, and it’s done.

But what if you don’t have any of these themes? 

Here are several ways to enable related posts with thumbnails in WordPress you can try. The methods described here allow you to display similar posts with thumbnails in WordPress without using plugins or writing codes.

But first, let’s understand the why…

Why Do You Need to Show Related Posts?

Related posts are a fantastic way to keep visitors engaged on your WordPress website. 

You encourage readers to explore other exciting articles or pages on your site by showcasing content similar to their reading. 

This can increase page views, reduce bounce rates (people leaving your site after one page), increase time on site, and improve the overall user experience. 

If you have hundreds or thousands of published pages, showing relevant and essential content to your site’s users in prominent places becomes more critical. 

With related posts feature, you can strategically display content that helps users find more helpful information on your site. 

Benefits of Including Thumbnails

Thumbnails act as visual teasers, grabbing readers’ attention and enticing them to click on related posts. An eye-catching image can significantly increase the effectiveness of your related posts section.

However, ensure the post has featured images before displaying a thumbnail alongside the related posts. Without featured images attached to the post, the system won’t find any image to use or pull the wrong one. 

Showing Related Posts with Thumbnails in WordPress

There are many ways to show related posts with thumbnails or other image sizes in WordPress, catering to different comfort levels and needs.

The first option on this list lets you display related posts on a single post.

Let’s say you want to showcase a category/tag of posts on a particular page on your website; follow the steps in option 1.

Option 1 – Using the Block Editor 

The Gutenberg Block Editor is the new default editor in WordPress and offers a user-friendly interface for adding functionalities like related posts. 

With this method, you can add the related post block to individual pages or posts on our site. And within any section on the page. 

For example, you may want to add the related post block after a particular number of paragraphs or headlines; this option lets you add it exactly where you need it. 

Open the WordPress block editor and write your post as you usually do. You may insert the block for an existing article or a new one. It works equally. 

Now, point your mouse cursor to an area in the editor where you want the related post to appear. Click the + sign to open the blocks search panel. Search for the “related post” block and click it. 

Add the block to the page to customize its appearance and related post selection. 

Note that if you haven’t enabled the related post function in JetPack, you will get a notification to do so here. Click to activate it from the dialog box. Look at the image below.

The next thing is to customize the related post block appearance from the right side panel of the editor screen. The settings are here. 

Here, you can customize various aspects of your related posts, including:

• Number of Posts to Show – Choose how many related posts you want to display.
• Categories/Tags – Select the categories or tags from which you want to display related content. This ensures the related posts are relevant to the current article or page.
• Display Post Thumbnails – Enable this option to ensure the post thumbnails are displayed.
• Display Date – If you want to include the publication date in the metadata, enable this option, too.
• Author – This option should be enabled to display the author’s name in the related post. 

One thing to note is that activating the related post function here also enables it across the entire post type on the site. You’ll automatically turn on the JetPack function when you click activate here. 

So, from now on, eligible related posts will start displaying after each content on your site. 

Option 2 – Jetpack Related Post With Thumbnails 

Jetpack is a WordPress multipurpose plugin developed by Automattic. Its functions include security, backup, performance, content promotion, social media sharing, server monitoring, site management, etc.

Here, I will focus on its related post with a thumbnail function. Using Jetpack-related post thumbnail features is the easiest and most beginner-friendly method. 

Log in to your WordPress admin area and hover over Jetpack from the sidebar menu. Click settings from the menu list. Next, click the “Traffic” tab on the settings page and scroll to the “Related Post” section.

There are three settings here; the first enables the related post features. The other two let you highlight related post content with a heading and allow the display of thumbnails. 

If you want to include the post title or headline in the display, turn on the first switch. The third switch activates thumbnails in the related post display. 

Let’s proceed…

Click the “Configure Related Post in the Customizer” link to open additional settings in the theme customizer.

The settings let you show or disable the post-publication date and categories/tags from the related post metadata. You can also change the related post headline/title and layout (grid or list) from the customizer.

This level of control allows you to customize the related post block to fit perfectly with your site theme and overall design.

Option 3 – Using a WordPress Theme Built-in Function. 

As I said, many modern WordPress themes come pre-built with related post features. This extra function could possibly save you from installing another WordPress plugin. 

Before you try other options on this list, check your theme to see if it has a built-in related post feature.

Let me show you how to enable it using the Astra free theme.

If you prefer using the Astra theme, go to the Astra theme customizer and click “Blog” next click “Single Post.” 

Scroll down to the “Related Posts” section and toggle the gearbox to on. Click the small arrow icon in front to reveal other settings.

On the General Tab, you can define whether to use a thumbnail’s image size or the featured image, image aspect ratio (original, predefined, or custom), set title alignment, number of posts to show, layout, and disable/enabled post metadata. 

Below this setting is the option to enable excerpts for the related post. I wouldn’t recommend enabling this option, though. 

The related post section on your blog might become too cluttered and disorganized. 

Next, switch to the “Design Tab” if you need to customize the related post appearance by changing the elements’ color and setting padding and margin.

On this tab, you can customize elements like title color, background color, font family, and size for title, and metadata. You can use padding and margins to define space between elements. 

Remember to click publish after customizing the related post in your theme. After that, check the live preview to see if everything looks and displays as expected.

Technology has made it easy to achieve success that would have otherwise taken far more effort and processes. 

For example, a few years ago, one would need to add several lines of code to the theme files to enable related posts if you don’t want to use a plugin. 

But today, unless you have a reason to, you don’t need to go through the stress of modifying your WordPress theme file for something like displaying related content on your blog.

How to Optimize Related Posts for More Clicks. 

Taking it further, you can increase the possibility of someone clicking related posts to read more content on your blog.

Following the tips below, readers might find more reasons to check more content related to the one they’ve just read.

• Limit the Number of Posts – Don’t overwhelm your readers with too many related posts. Aim for 3-5 relevant articles maximum. 
• Consider Related Post Titles – Choose a clear and concise title for your related posts section. It should help attract readers (e.g., “You Might Also Like”).
• Match Thumbnails to Content – Make sure the thumbnails accurately represent the content of the related posts. For best results, use the post-featured image.
• Exclude Unnecessary Information – Don’t add too much information or metadata to the post display. The post title and the featured image are enough to draw readers’ attention and make them click. 
• Placements – Where you display related posts on your blog matters a lot. The industry consensus has always been after content. But you can try other places, like within the content and near the conclusion.

FAQs

Conclusion

Which option is right for you? 

The right method to display related posts and content on your blog depends on your comfort level, desired features, and customization. The Block Editor is a beginner-friendly option, while plugins and themes offer more customization and advanced functionality.

Jetpack offers a simple and beginner-friendly option, but everyone may not want it. It doesn’t provide much customization and design capabilities compared to other options like the Astra theme. 

Astra offers built-in related post features, advanced customization options, and control. This allows you to design the related post display to match your theme look and brand identity.

Check out our other article on how to add the latest post using different methods. From beginner-friendly ways to more advanced options, like using shortcodes and PHP scripts.