Related posts are a great way to improve your page views and reduce bounce rate. If you want to display a related posts section without a plugin that outputs the latest posts in the same category as in the parent post that it is being displayed, you could use the following code. So, you no longer have to depend on a resource-hungry plugin that contains too many functions not necessary for displaying a simple block of related posts. So here we go to create your own related posts section.
What is a related post?
When it comes to websites, a related post refers to a post that is related to the content of the active post. For example, if we are writing an article about WordPress, a related post would be something related to WordPress as well. Displaying such posts in the current post will increase the chance of users clicking on them, reducing the bounce rate of the website and increasing your page views.
Because these are very good indicators for search engines that the content of your website is of high quality, your chances of getting better rankings in the search results would increase as well. So it is ultimately very necessary for every single website to implement this functionality in one way or another.
Uses of related posts
Related posts have a lot of benefits for a WordPress website. Some of them are given below –
- Related posts allow WordPress to display posts that are related to the current post, increasing the chance of users clicking on it.
- This will result in lower bounds rates and higher page views, on-page time, etc. helping your SEO.
- They also add to the overall design and functionality of your website, improving your website’s user experience.
- It provides the users with a great way to find topics related to their actual search inquiry, without using the website search functionality.
Methods to show related posts on WordPress by Category
Showing related posts by category is a bit different from showing them based on the content of the post. If your website is too specific to a certain subject, and you post related content in the same category, it would be more resource-friendly to display them based on the category rather than having to match it by content.
Method 1. Your theme’s Related Posts feature
Most of the modern themes come with a feature that allows its users to show related posts using a widget. Many of them even show the related posts at the bottom of every article by default. TagDiv Newspaper theme, for example, has this feature.
You can just go to any theme repository and search if your theme has such as feature. If you are planning on changing your WordPress theme anyways, choose a theme that has these functionalities. Most of them will show the related posts by category by default. If not, you might be able to configure it from the Theme Options.
Method 2. Using custom code
You can also implement related posts by category using code –
The PHP
Just copy-paste this code anywhere you want to display the related posts, probably the single.php file in your theme. This displays the related posts on every single page in your WordPress theme. If you are using the Genesis Framework theme with the Genesis Simple Hooks plugin installed, you can add the code to any hook that you wish to show this code in.
<?php if ( is_single() ) { ?>
<h3>Related Posts</h3>
<div id="grid-container">
<?php
$cats = get_the_category($post->ID);
if ($cats) {
$first_cat = $cats[0]->term_id;
$args=array(
'category_in' => array($first_cat),
'post_not_in' => array($post->ID),
'posts_per_page'=>4,
'ignore_sticky_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="grid-item">
<div class="post-image"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<div class="post-author"><?php the_author(); ?></div>
<div class="post-date"><?php the_modified_date(); ?></div>
</div>
<?php
endwhile;
}
wp_reset_query();
}
?>
</div>
<?php } ?>
The CSS
You might want to style the related posts further. Here is an example of CSS that makes basic adjustments like responsiveness. Copy-paste the following CSS code into your style.css file or any custom CSS plugins. If you are unsure, check how to edit the CSS of your WordPress site.
#grid-container {
max-width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 20px 0;
width: 100%;
}
#grid-container h3 {
font-size: 16px;
margin-bottom: 5px;
margin-top: 5px;
}
#grid-container .grid-item {
margin-bottom: 30px;
width: 100%;
}
#grid-container .post-image img {
width: 100%;
}
.post-author {
font-size: 12px;
float:left;
margin-right: 10px;
color: #777;
}
.post-date {
font-size: 12px;
color: #777;
}
@media screen and (min-width: 801px) {
#grid-container .grid-item {
display: inline-block;
margin: 0 3% 3% 0;
width: 22.7%;
}
#grid-container :nth-child(4n) {
margin: 0 !important;
}
}
After making the changes, be sure to clear the cache if you are not seeing the changes in the front end of the website.
