If you go through the most of the internet websites you will see that after each post or in between they showing the related posts widget. The related post is a feature that built on the website to show the same interest articles on the post page. If you are a WP CMS user then you can also enable WordPress related posts features either manually by coding or using related post plugin. The related posts not only helps you in increasing the page views but also decrease the bounce rate.
Those don’t know about the bounce rate than the “bounce rate” is the percentage of initial visitors those stumble on your website but bounce away to some other website without looking any other posts or page of the same site. Increasing bounce rate also effect on Google Adsense earnings.
Almost every professional WordPress theme comes with pre-built related posts query feature but if not then in this article we will show you how to display or add related posts in WordPress with or without a plugin.
You can show the related post by implementing few codes manually or using a plugin which is a simple and easy way if you don’t know about coding. You can choose whichever method you are comfortable with.
Adding the related posts functionality to the theme using the coding method is a good practice because adding too many plugins to the site affect the site loading speed and make it slow.
Go to Apperance->theme editor and select the Single.php file and add the following code and add the following code where you want to display the related posts in your article.
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo 'Related Posts';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'posts_per_page'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php
endwhile;
}
wp_reset_query();
}
?>
If the above code doesn’t work for your theme then here is another long code to display the related posts in an article of WordPress.
Step 1: Go to Apperanace->theme editor and select the functions.php file and add this small bite of code.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 196, 110, true );
You can change the 196 and 110 which are the thumbnail dimensions to suit your theme. This code workaround tags, be sure your posts must contain at least one tag to show related posts.
Step 2: Now from the right sidebar of your theme editor select the file called Single.php. Open this file and add the following code in the where you want to show the related post section.
Please change the ‘showposts’=>4 to display related posts more than four.
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>4, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>
<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>
Step 3: If you want to give some customized feel to your related posts, add this code in your CSS file of the theme. You can modify it according to your theme to provide a different look and feel.
.relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
.relatedposts ul { list-style: none; }
.relatedposts ul li { float: left; margin-right: 15px; width: 206px; }
.relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }
.relatedposts a:hover { color: #51B1D3; }
If you are using the Genesis theme and want to add the related post section manually using code then here is the code for that too.
Step 1: Go to Apperance->theme editor and select the theme of Genesis in which you want to add the related posts functionality.
Step 2: Select the function.php file and add this small bite of code that decides the dimension of the related post thumbnail images. You can change the value to increase or decrease the size.
add_image_size( 'related', 90, 70, true );
Step 3: Now again in the same function.php file add some more code given below.
//for XHTML themes
add_action( 'genesis_after_post_content', 'child_related_posts' );
//for HTML5 themes
add_action( 'genesis_after_entry_content', 'child_related_posts' );
/**
* Outputs related posts with thumbnail
*
* @author Nick the Geek
* @url https://designsbynickthegeek.com/tutorials/related-posts-genesis
* @global object $post
*/
function child_related_posts() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$tags = wp_get_post_tags( $post->ID );
$cats = wp_get_post_categories( $post->ID );
if ( $tags ) {
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();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
$postIDs[] = $post->ID;
$count++;
}
}
}
if ( $count <= 4 ) {
$catIDs = array( );
foreach ( $cats as $cat ) {
if ( 3 == $cat )
continue;
$catIDs[] = $cat;
}
$showposts = 5 - $count;
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => $showposts,
'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();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
}
}
}
if ( $related ) {
printf( '<div class="related-posts"><h3 class="related-title">Related Posts</h3><ul class="related-list">%s</ul></div>', $related );
}
wp_reset_query();
}
}
Step 4: Now it’s time to make our related posts little bit fancy by using the CSS code. Open the style.css file of your theme from the right sidebar of theme editor and add the following code.
/************ Related Posts *************/
.related-posts {
overflow: hidden;
margin: 0 0 10px;
}
.related-list li {
float: left;
list-style-type: none;
margin: 0 10px 0 0;
text-align: center;
width: 105px;
}
.related-list img {
background: none repeat scroll 0 0 #6FA1B1;
border: 2px solid #2B5D6C;
display: block;
margin: 0 auto;
padding: 5px;
}
If you don’t know about the coding or not getting the appropriate code to enable the related posts functionality then you can use a popular plugin called Yuzo – Related Posts.
Step 1: Go to Plugins->Add new and search for the Yuzo-Related plugin.
Step 2: After installing and activating the plugin, on the right sidebar of WordPress select the Related Posts option as shown in the screenshot.
Step 3: This related post plugin has lot of option but we discuss the important ones only.
Under the basic setting, from the Top Text option, you can change the “Related Post” text font size or customize the text. A second option is a number of posts you want to display in a particular article.
Using this plugin give you full control on related posts query via Tags, category, Random or Taxonomies choose whatever you want.
You can choose the look and feel of related posts showing in your article. It has four different styles to show related posts – Grid, Lists, and two without thumbnail images. It can also help to change the thumbnail size and cover.
Result of this plugin
Please let us know if you experiencing any problem while implementing the related post’s code or plugin on your WordPress and we will help you. If you know any other best-related post plugin then please mention it in the comment section to help the others.
Thank you, this was really helpful!
I have set my posts to display recent posts from the post category. When I have a post with more than one category, I get 2 instances of recent posts. Is there a way to tell the plugin to limit to the first category instance? thanks!