Display Related Posts in Genesis Theme without Plugin

This is a good tip for all fans of Genesis. Why do you should to show related posts in the each single posts ? If you know anything about bounce rate, you are probably already showing related posts in WordPress. Bounce rate essentially represents the percentage of initial visitors to a site who “bounce” away to a different site, rather than continue on to other pages within the same site. By adding Related posts in WordPress you are killing three birds with one stone. You are decreasing your bounce rate and lastly you are increasing your pageviews. In this article we will show you how you can display related posts in Genesis Theme. Related posts can be displayed based on tags or categories.

Display Related Posts in Genesis based on Category

If you want to display related posts based on the category, then add this code to functions.php file in Genesis Child Theme folder:

/** 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' );

Functionality of this code:

  • Displays related posts randomly based on category in single post page.
  • Define the number of posts to display by changing value in ‘showposts’ => 5

Display Related Posts in Genesis based on Tags:

If you want to display related posts based on the tag, then add this code to functions.php file in Genesis Child Theme folder:

/** 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' );

Functionality of this code :

  • Displays related posts randomly based on tag in single post page.
  • Define the number of posts to display by changing value in ‘showposts’ => 5

Styling the related posts in Genesis Theme

Add css code to Style.css (in wordpress genesis child theme folder):

.related-list li {
  list-style-type: circle;
  margin: 0 auto;
}
.related-posts {
margin: 15px 0;
}
.related-posts h3 {
color: #1900FF;
}
.related-posts ul {
padding-left: 15px;    
}
.related-posts ul li {
padding: 2px 0;
border-bottom: 1px dashed #ccc;
}
.related-posts ul li a{
font-size:14px;
}
.related-posts ul li a:hover{
color: #FF0000;
}

Now, you are done with everything and its time check the related posts in your blog.

Demo:

How to display related posts in Genesis Theme without Plugin

How to display related posts in Genesis Theme without Plugin

Notes: If you have HTML 5 theme, you must change in the last code-line from:
genesis_after_post_content
to
genesis_after_entry_content
else it will not show att all.

If you want to show related posts with thumbnails, please read this post: Show Related Posts with Thumbnails in Genesis without Plugin

If you got any query regarding this article, please drop a comment and we will get back to you soon.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
wali khanHitesh BhasinJackson Nwachukwu Recent comment authors
  Subscribe  
Notify of
Jackson Nwachukwu
Guest

Awesome! Worked like fire…

Simple copy and paste and related post links showed up on my blog without plugins!

Thanks for sharing this.

Hitesh Bhasin
Guest

Hello. I am using efficient related posts plugin. For some reason, Google is showing the plugin outputted related posts as my meta description in several pages. Can i use this method and then add a nofollow to the related posts? Would you recommend the same?

Thanks in advance. Help much appreciated 🙂

wali khan
Guest

Thanks for the nice blog. It was very useful for me. I’m happy I found this blog. Thank you for sharing with us,I too always learn something new from your post.