Having a related post plugin and feature at the end of any blog post is a great way to reduce bounce rate and increase readership. Yet Another Related Post (YARP) and nRelate are two of the very popular plugins for displaying related post but they have one serious downside; These related post plugins takes up quite database intensive.
Almost all ‘Related Posts’ plugins suffer from the same fundamental problems regarding MySQL, indexing and search. All of these problems make the plugins themselves extremely database intensive ~ WP Engine
This whole idea of displaying related posts without a plugin comes from the quote above and I was determine to ditch nRelate plugin and enable related posts manually. Yes, you are going to hard code some scripts into your WordPress installation.
In order for us to start, here are a few things you need to get your hands on from your child theme:
- functions.php
- style.css
Yup, you got it right! All you need is to place some code on functions.php and them the related posts look prettier using style.css.
Important notes!
Even before doing this WordPress customization, you need to decide if you want the codes to work according to categories, post tags or both.
The below are some simple explanations:
Related posts based on categories – Posts shown are only from the same category. This is a great option if you have many categories and looking to share highly related posts only.
Related posts based on tags – Posts shown are only from the same related tags. This is highly recommended if you are a blogger who focus on very specific tags (great for niche bloggers).
Related posts based on both categories and tags – I had to temporary remove it due to there are some unforeseen issue using it. Will continue to update this once the code is fully baked.
If done correctly, your related theme will look something like this:
Display related posts based on category using Genesis Framework
Before doing any changes to your WordPress files, it is highly recommended to keep a backup copy on your computer in case of any unwanted issue.
Open your cPanel and head over to File Manager to open up your wp-content folder. Alternatively, you may use tools like FileZilla or CyberDuck to perform the changes.
functions.php is located in wp-content folder.
If you are using Genesis Framework, do not perform changes in your core Genesis Framework file. Instead, perform changes in the child theme itself.
The path is roughly as below:
cPanel > File Manager > wp-content > themes > child theme > functions.php
Download or edit functions.php file and place this code at the bottom:
/** Display related posts in Genesis based on Category */
function related_posts_categories() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$cats = wp_get_post_categories( $post->ID );
$catIDs = array( );{
foreach ( $cats as $cat ) {
$catIDs[] = $cat;
}
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => 5,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote' ),
'operator' => 'NOT IN'
)
)
);
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . get_the_title() . '</a></li>';
}
}
}
if ( $related ) {
printf( '<div><h3>Related Posts</h3><ul>%s</ul></div>', $related );
}
wp_reset_query();
}
}
add_action( 'genesis_after_post_content', 'related_posts_categories' );
If you are using Genesis 2.0 or HTML5 ready themes, you have to replace ‘genesis_after_post_content‘ with ‘genesis_after_entry_content‘ on the last line of the code.
Save the file and upload back to your WordPress database. If you are using any cache plugin, purge any cache and clear your browser too.
You should be able to see related posts visible after the blog post now!
Enable related posts without plugin and based on tags
Just like the above, it is highly recommended that you perform a backup for your functions.php file before doing any changes.
The below is the common path to find your functions.php file:
cPanel > File Manager > wp-content > themes > child theme > functions.php
Place this code at the bottom of your functions.php file:
/** Display related posts in Genesis based on Tags */
function related_posts_tags () {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$tags = wp_get_post_tags( $post->ID );
foreach ( $tags as $tag ) {
$tagID[] = $tag->term_id;
}
$args = array(
'tag__in' => $tagID,
'post__not_in' => $postIDs,
'showposts' => 5,
'ignore_sticky_posts' => 1,
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote'
),
'operator' => 'NOT IN'
)
)
);
$tag_query = new WP_Query( $args );
if ( $tag_query->have_posts() ) {
while ( $tag_query->have_posts() ) {
$tag_query->the_post();
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . get_the_title() . '</a></li>';
$postIDs[] = $post->ID;
$count++;
}
}
if ( $related ) {
printf( '<div><h3>Related Posts</h3><ul>%s</ul></div>', $related );
}
wp_reset_query();
}
}
add_action( 'genesis_after_post_content', 'related_posts_tags' );
If you are using Genesis 2.0 or HTML5 ready themes, you have to replace ‘genesis_after_post_content‘ with ‘genesis_after_entry_content‘ on the last line of the code.
Save the file, upload it to your WordPress database and the last step is to clear all your cache.
Additional tweaks and customization to your related post query
1. Adjusting the number of visibly posts
By default, the code will show up to 5 related posts. If you want to change it, search for the below:
‘showposts’ => 5
Change the digit to any number of your choice.
2. Customizing the fonts and style
Thinking of customizing the related post column? Fire up your style.css and paste the code below:
.related-posts {
margin: 10px 0;
}
.related-posts h3 {
font-size: 18px;
}
.related-posts ul {
list-style:none;
}
.related-posts ul li {
padding: 3px 0;
border-bottom: 1px dashed #ccc;
}
.related-posts ul li a{
font-size:14px;
text-decoration:none;
}
The above is just a sample styling code that you can use. Feel free to change the code to fit your style.
3. Changing the ‘Related Posts’ to better better call-to-actions (CTA)
Changing the wording is simple and all you need to do is to search for this line of code in the functions.php:
printf( '<div><h3>Related Posts</h3><ul>%s</ul></div>', $related );
Now, change the ‘Related Posts’ to any words or CTA of your choice.
Pretty easy right?
Will you stop using related post plugins and hard code it yourself instead?
Now, tell me … will you will hard code related post for your blog or reduce the trouble and use a plugin instead? For me, I would go for hard coding as it will not only reduce the number of plugins used and at the same time, reduce the the server load.
Like this article? Please share it with your friends!