“Related posts” is a feature deployed by CMS’s (Content Management Systems) to display related posts below contents in websites/blogs. The related posts feature normally uses posts contents, categories and tags to automatically show contents related to the current post the user is viewing.
In this post, you will learn how to optimize Jetpack related posts to display perfectly well across all devices.
Jetpack Related Posts is one of the great features that comes with Jetpack WordPress plugin which can be used to display related posts on WordPress website.
Jetpack is a powerful toolkit made by WordPress experts which can help WordPress site to get a safer and stronger, Load pages faster and Increase traffic through some tools like social sharing, related posts/content and site search.
How to Enable Jetpack Related Posts
If you don’t have Jetpack installed on your WordPress site, check out our post on how to properly install Jetpack.
Follow these steps to properly activate and setup related posts by Jetpack on your WordPress site.
- Click “Jetpack” at the left menu on WordPress admin dashboard.
- Click on “Settings”.
- Click on “Traffic” on the tabs.
- On the “Related posts” section, toggle on “show related content after posts”
- You can optionally toggle on “Highlight related content with a heading” (Which by default is set to “Related”) and “Show thumbnail image where available”.
- Click on “Save settings”.
- Once you have saved the settings, click on “Configure related posts in the Customizer”.
- At the customizer, set the layout to grid.
Related posts will now be displayed at the end of each post on your website.
Note: At the customizer, the most important thing to set is the “Layout”, because it will be later customized to be friendly on all screen sizes in this post. You can as set other options to your taste.
That’s all about enabling related posts, it is now time to time to customize jetpack posts for responsiveness on all device screen sizes.
General Information About jetpack related posts
- Related posts will only appear below post content if 3 good results can be shown. So, don’t be surprised if some posts do not show related contents.
- Related content is automatically generated based on the content of the post and any tags or categories if they exist.
- The minimum number of related posts to show is 3 and the maximum is 6.
Also read 👇
Simple Trick to Fix “Your IP Address Has Changed” Error Message On cPanel
How to Optimize Jetpack Related Posts for Mobile and Desktop View
If you have successfully activated related posts by Jetpack, look out for the configurations below to increase the number of related posts shown below contents and also make the related responsive on all screen sizes.
Note: We strongly recommend not making customizations on your parent theme, because when your theme updates you may lose every customization you have made.
Create a child theme from your parent theme and add your code to it.
1. Increase the number of related posts shown below contents
You might not be okay with the number of posts shown as related contents by default (3 posts) and want to change it.
Add this code below to your child theme’s “functions.php” file.
//Change number of jetpack related posts
function jetpackinc_more_related_posts( $options) {
$options['size'] = 4;
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackinc_more_related_posts' );
Note: change 4 in the code above to the number of posts you desire to display (remember that max is 6 while minimum is 3).
2. Style jetpack related posts with CSS (cascading Style Sheets)
When you must have increased your related posts to say 4 or 6, you will notice that the display on mobile is not all that good. While it may look or may not look perfect to you on desktop view. This is because jetpack related posts are kind of designed to display contents in three contents per group. Once a row or group is up to 3 contents, the next content(s) seems to jump to a new row.
Paste this CSS as code in your child theme’s “style.css” to fix the issue above.
/*
Jetpack related posts formatting
*/
@media only screen and (max-width:1920px)
{#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+3), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+3) {
clear: both !important;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
clear: none !important;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(5n+6) {
clear: none !important;
}
}
When you successfully add the above code, your Jetpack related posts will display just as in the screenshots below across all device, undoubtedly that looks way nicer and at the same responsive. You may need to clear your browser cache before the changes you made stare at you.
Wrapping Up
There are lots of benefits to gain from adding related contents to your website. Hope the posts helped you to effectively add extra customizations to jetpack related. If you have any difficulties achieving this, relate it to us via the comment box. Thanks for having you here.
