How to Display Related Posts with Thumbnails in Your WordPress Sidebar

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:

I hope this trick helps!

Share via:

Written by Mila Joshua Yona

Pro South Sudanese Blogger,Digital Marketer,Web Designer And Youth Advocate. I help entrepreneurs scale up their businesses online. Follow me on Social Media.

Leave a Reply

Connect with:



We are glad you have chosen to leave a comment. Please note that our comments are moderated according to our comment policy. We require your email address but will not be published. Required fields are marked*. Thank You.

8 Factors That Will Contribute To the Success of Your Blog

13 Ways to Promote Your Blog