Do you want to show related post with thumbnail on your articles? By showing related post on articles it helps to keep your readers engage with your website. It can also reduce your bounce rate. In this article, we study how to display related post with thumbnail in WordPress.
When a user comes to our blog, we should show them related content in the sidebar, at the end of the post or wherever it is possible. This technique helps both users and site owner. For users, they can find more relevant content which may be helpful for them. For the site owner, a user spends a lot of time on a website which can result in more conversions, more money, etc.
Related Posts by Bibblio
There are several plugins available on the plugin repository which provides a solution for showing related post.
But, we recommend to use Related Posts by Bibblio. Recently, we tried this plugin on our client website and our client quite happy with the result.
The plugin uses advanced artificial intelligence technique to find out relevant articles matching with your current content.
This plugin is developed by the Bibblio. Their primary goal is to provide content recommendations that will keep users on your pages.
Is It Free Plugin?
Bibblio provides 50.000 recommendation calls/mo free. A recommendation call is a set of recommendations that are served to your web page. This is achieved via a request to the discovery endpoint of the Bibblio API. For more than 50,000 recommendation calls you need to pay for service. Plase check the pricing page for the price and range of content items.
How To Use Plugin?
At first, you need to install and activate the plugin. To use this plugin, you need to register on their website.
Below is the step by step guide to configuring this plugin.
Step 1: Once you activated the plugin, it will add menu Bibblio on the dashboard. When you first time clicks on this menu you will see the page as shown in the below screenshot.
Step 2: Click on the ‘Create an account’ button, it will redirect to the sign-up page of a Bibblio. After sign up, log in to your account on Bibblio and go to My Account->Credentials. Copy the client id and client secret and paste it into setting page of Bibblio. Click the button ‘Let’s go’.
Step 3: Next, configure the plugin step by step as they instructed. From the Modules tab, the plugin allows selecting different layout, ratio and toggle effects. For instance, we have selected 3 box row layout, 4:3 ratio and display title only effect.
Our output will be the combination of this layout on the front-end of a website.
We have configured and added our module. Next step is to display our module on a website. This plugin gives options of widget and shortcode to insert the module in the sidebar or in content.
Inserting shortcode in each article is easy but can take a time if you have a number of posts. As we need to insert shortcode one by one on each post.
There is a workaround for it. Use the filter the_content and append the shortcode provided by the plugin.
For example, if you click on insert shortcode icon on post edit screen you will get shortcode like [[bibblio style=” bib–row-3 bib–default bib–title-only”]].
Open your functions.php file and place the below code at the end of the file.
add_filter( 'the_content', 'related_articles_after_content' );
function related_articles_after_content($content) {
$related_articles = '<h4>'. __("Related Articles", 'your-theme-textdomain') .'</h4>'. do_shortcode('[bibblio style=" bib--row-3 bib--default bib--title-only"]');
return $content. $related_articles;
}Above code will add the shortcode to the end of each post. You don’t need to manually enter the shortcode on each post.
Your final output will like as below screenshot.
Related Articles
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
