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) そして 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. はい, 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.

正しく行われた場合, your related theme will look something like this:

How do you enable related posts without plugin on Genesis theme?

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. 或いは, 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. その代わり, 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 コール・ツー・アクション (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 );

今, 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?

今, tell me ... will you will hard code related post for your blog or reduce the trouble and use a plugin instead? 私のために, 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!