When you get a new visitor to your website, they usually leave your site without exploring much. That’s why web design experts recommend adding more value to each and every page that could be the gateway to your website, and make your site navigation easy enough for your visitors to follow and explore more content. Google usually factors in session time to determine the popularity of web page which plays a key role in higher rankings.
One of the best ways you could make your page relevant to new visitors and compel them to spend more time on your site is to offer them similar posts just below the main blog posts.
Although there are many readily available plugins to do the job for you, you can do it by simply adding some lines of code to your theme file.
In this post, I’ll show you how to add code to your Genesis site in order to display similar posts. Please, keep in mind, you must be familiar with FTP to add the code to your theme. Never edit your files directly within WordPress – one small mistake can throw error and you will site will go kaput until you fix it.
If you’re ready with your FTP client, please, proceed.
Essentially, there are two steps to displaying similar posts on your Genesis site.
#1: Populate similar posts based on Category, using argument. (For this post, we will choose category based popular posts)
#2: Display the populated posts at your desired location in your theme. (For this post, we will choose to show theme below entry content)
How to Populate Similar Posts
Add the following code to you functions.php file.
How to Display Similar Posts
Add the following code to your functions.php
Note:
If you want to display more than 5 posts, change the value associated with ‘showposts’ in the code.
If you want to change the display location from after entry to another location, choose the appropriate hook. Check out this resource.
Add the CSS
You want to add some line some code to your CSS file as per your theme’s requirement. Here’s some sample CSS code to go with.
.related-posts {
border-top: 1px solid #ccc;
padding-top: 40px;
}
.related-posts ul li {
border-bottom: 1px dashed #ccc;
padding: 3px 0;
display: inline-block;
}
That’s it. Let me know if you have any questions.
