So you want to know how to show related posts with thumbnails in WordPress? Well, we have the answer for you.
The bloggers and writers among you offer plenty of content. And it can be quite hard for a new user to navigate through the great content you are offering to the reader. Maybe your readers are interested in something more from your site.
Related posts are a great way to offer them just that!
When you have related posts after each blog post, it ignites a sense of enthusiasm and curiosity among the user, leading them to go through some extra content on your site. This engagement puts you in a position where your work appears at the top position of search results.
Today’s discussion will be about showcasing related posts with thumbnails to your readers. As always, we will be showing you some versatile ways to showcase related posts with the PostX plugin.
Also, we will show you the manual methods for showing related content with thumbnails on your WordPress site. Also, we will be sharing answers to some important questions along the way.
Let’s get started!
How to Show Related Posts with Thumbnails in WordPress [Ways to do It!]
There are a couple of ways you can show related posts with thumbnails in WordPress. You can use the PostX Gutenberg blocks plugin to show related posts very easily. It takes all of the hard work out of the equation, allowing you to focus on your creativity.
The next option is the manual way (but we will show it to you in unison with PostX). And that’s where you use widgets to showcase your related posts with thumbnails.
The final option is to use code to showcase related posts to your WordPress content. This can be a bit hard considering the fact that some of you may not be coding wizards. And sometimes it can get complicated.
So, let’s explore each of the options to showcase related posts and their thumbnails with WordPress.
Show Related Posts Using the PostX Plugin
The PostX plugin, as we mentioned earlier, has a lot of unique features. And all of these features are geared toward helping the average user bring out the best of their creativity.
And the best thing is, you can easily create the best possible experience for the users using this one-of-a-kind plugin.
👉 Get PostX Pro to unlock all exciting features and make amazing Websites
Now if you are not using a block-level theme, then you can use widgets to showcase related posts with the associated thumbnails. We will show you how to do that in a later section.
Note: You can certainly show related posts with thumbnails in single WordPress posts. Unfortunately, the process is not intuitive. Also, there are very few options for customizations, which isn’t ideal considering the level of usability you are getting with PostX. We are not saying it’s impossible, but there are too many caveats to deal with here.
For now, let’s see how you can show related posts with PostX.
In order to show related posts to the bottom of a single blog post (with thumbnails of course), you need to:
- Navigate to the post content from your WordPress dashboard.
- Scroll to the bottom of the post.
- Click on the blocks library (at this point, we are assuming that you have PostX installed on your WordPress website. If not, you can take a look at this resource to install the plugin).
- Choose a block design you like.
- Click on import.
Once you click import, the design will be imported to your WordPress website. As the goal is to show thumbnails with related posts, PostX has all the options to showcase post thumbnails and edit them to your needs.
But before that, here’s a quick note on showing the ‘right’ related posts. Because you don’t just want all the posts on your website as ‘related’ to a particular post.
You need to use the PostX Quick Query Builder to show the most ‘related’ posts with thumbnails. The taxonomy section and the ordering capabilities of the Advanced Query Builder are crucial for helping you showcase the right ‘related’ posts for a specific piece of content.
Here’s what you need to do:
- Choose the block you imported to show the related posts.
- Go to the ‘Settings’ section of the block. Here you will find the ‘Query’ setting.
Under the quick query setting, you will find the taxonomy setting. That particular has 2-more associated options. One is the taxonomy value and the other is the taxonomy relation.
In order to show some specific posts as the related posts with thumbnails (that is the goal of course), you can do the following:
- Choose the post ‘category’ as the taxonomy.
- Choose the category taxonomy values (choose the post categories).
- Select the relation of the taxonomy.
If you’re not clear about these terms, then make sure to take a look at the relevant resources below.
Relevant Resources:
1. Effective Use of the WordPress Query Builder
2. How to Show Recent Posts with Thumbnails in WordPress
There are further options available in the Advanced Query Builder. For instance, you can use the slider to show the number of posts in the block you choose to show the related posts.
How do I show the image thumbnails?
Once you choose a ready-made block from the PostX blocks library, you can set the image thumbnail settings from the ‘Settings’ section of the blog. All you have to do is click on the block and navigate to the ‘Image’ setting of that particular blog. There, you can set the image to be a thumbnail, or change the size of the image from the ‘Large Image Size’ setting.
Also, there are other settings for you to explore as well.
Do I have to do this for all of my single posts?
This is where you use widgets to showcase related posts with thumbnails.
The answer is yes, you will need to showcase related posts for each particular post. However, there is a quick way to do this. Here’s how:
- Click on the block settings.
- Choose “Add to Reusable Blocks”.
- Give the block a name and save it.
Once you save it as a reusable block, you can use it in other posts as well. All you have to do is search for the block with the relevant name and add it to the post.
Great question. We may have given you a hint about this earlier!
If it’s not a block-level theme, just use widgets. It’s the easiest way to showcase related posts with thumbnails. All you have to do is:
- Go to ‘widgets’ from the theme settings on your WordPress dashboard.
- You will have specific widget settings for specific themes. For instance, if you use the ‘GeneratePress’ theme, you will have options for each sidebar section.
- Add a PostX ready-made block just like before.
- Finally, click on update.
Note: You may have to deal with different settings for different themes. For instance, with the GeneratePress theme (a great theme by the way for PostX, but you can check out other recommended themes for PostX as well), you have the option to show the widget sidebars from the theme customization settings. There’s also the option to show/hide sidebars in the content’s menu as well.
There’s one last thing we would like to mention before moving on to the next part. And that’s pagination. Yes, PostX does have this feature within its arsenal of features. You can easily activate it from the PostX blocks settings menu.
Note: By the way, we used the post grid and post list block style to show you the examples. You can explore the PostX blocks library to see which block is the right choice for you to show related posts with thumbnails.
How to Show Related Posts with Thumbnails in the Twenty Twenty-two Theme
As mentioned earlier, there are some issues with the twenty twenty-two block-level theme. There isn’t too much to do in terms of the design. But you can show related posts in single posts with thumbnails.
We will be using the twenty twenty-two WordPress theme for this purpose. All you have to do is:
- Go to a particular post from your WordPress dashboard.
- Go to the settings of the post.
- Under the ‘page template’ section, click on edit.
Once you click edit, you will be taken to the single post template. Here you can add a related posts block layout from the default WordPress library.
Note: The problem here is the fact that the built-in layouts don’t really allow for a proper view of your related posts. Not only is there a lack of proper layouts and blocks, sometimes the built-in blocks for related posts can look broken as well.
Here’s a quick resource to help you learn more about the latest twenty twenty-two WordPress themes:
WordPress Full-site Editing
We have a solution for that as well. And it’s a quick and easy solution that requires you to use the PostX plugin (it features excellent compatibility with the latest version of PostX and block-level themes like the twenty twenty-two).
But it will require you to add the related posts block individually. The plus side here is the fact that you don’t have to worry about changing the templates or anything. You can also make the block reusable as well.
Here’s a quick look:
How to Show Related Posts with Thumbnails in WordPress Using Code
Of course, you can use code to show related posts on your WordPress website. You have some caveats here as well.
First of all, if you don’t have any prior coding knowledge, then it is probably a good idea not to go on this path. It may cause potential issues for your WordPress website. Going with one of the earlier methods is probably the best way for you.
But, the one flip side is that you don’t have to use any plugins. Unfortunately, plugins like PostX have a lot of cool features. So, you can use code (especially if you are a seasoned professional). It will keep your site fast and smooth.
However, functionality will be limited!
Here is a code snippet you can use to show related posts with thumbnails:
<?php
$related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 5, 'post__not_in' => array($post->ID) ) );
if( $related ) foreach( $related as $post ) {
setup_postdata($post); ?>
<ul>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php the_content('Read the rest of this entry »'); ?>
</li>
</ul>
<?php }
wp_reset_postdata(); ?>Why Do You Need to Show Related Posts?
The reason behind it is simple.
You want more users to interact with your site’s content. And this interaction will help you rise higher on the search engine results page.
Users generally spend time on content that solves a particular issue. While doing so, they like to spend some time moving through other relevant content on your website.
That’s where the effectiveness of the related posts comes in. Maybe there are contents similar to the one a user finds useful. Maybe you share tips on solving the issue further. Users would very much appreciate it as they are getting additional value from your site.
This interaction will work in your favor to bring your website up in the SERPs. And that is the ultimate goal, right?
Final Thoughts
We hope today’s post will help you understand how to show related posts with thumbnails in WordPress.
We agree the discussion for today was kind of one-sided. Still, the main goal for today was to showcase the way you can show related posts with thumbnails.
Sound off in the comments below to share your thoughts on the matter.
See you later.
👉 Get PostX Pro to unlock all exciting features and make amazing Websites
