Mila Joshua Yona
If you want to show related posts with thumbnails in your WordPress sidebar, I bet you already discovered that there are lots of plugins that can help you do that. Plugins that show related content to users attribute to increasing the number of pages and posts people visit on your website/blog and also reduces your site’s bounce rate.
In this post, I want to share with you how to display related posts with thumbnails on your WordPress Sidebar and a sample code to tweak the widget.
In order to get started, you need to first install and activate the “Related Posts by Taxonomy” WordPress Plugin.
This plugin helps you increase your audience engagement by adding related posts in the sidebar or after-post content with a shortcode or widget. It can be configured to display thumbnails or just links in a list format and you can also set it to display related posts by tag, category, etc.
Once you install and activate the plugin on your WordPress site, Navigate to Appearance then Widgets, and drag the “Related Posts by Taxonomy” widget to the Sidebar.
Then,
- Set the number of related posts to show
- Select the taxonomy(tags/categories)
- Choose “Post thumbnails” as the display format
- Choose display image size ( medium image size option is recommended)
- Set the “number of image columns” – 1 is recommended
- Select “Link images captions to posts” so that the post titles can be automatically linked.
- Select “Display this widget on Single post pages on” to hide it from the homepage and archives.
- Thereafter, Click SAVE
And that’s all you need to do to add related posts with thumbnails to WordPress Sidebar.
How to Tweak the Widget with CSS Codes
The CSS codes below increase the font size of the post title, removes the default underline, and also changes the default font color:
.widget.related_posts_by_taxonomy a {
font-weight: 600;
font-size: 18px;
font-family: “Roboto”, “Arial”, sans-serif;
text-decoration : none;
color: #000;
}
The next code hides the related posts widget when you cross over to smartphone devices and tablets.
@media (max-width: 800px) {
.widget.related_posts_by_taxonomy {display:none;}
}
Note:
- You can display a list of related posts below your posts on WordPress
I hope this trick helps!
