How to display related posts in Genesis Theme without a Plugin

Many plugins are available to display Related Posts in Genesis theme, but it is not good to depend on plugins all the time. Hence, follow this simple tutorial to display related posts in Genesis theme without a plugin.

You need to edit these files in your Genesis Child theme folder

functions.php
style.css

As you are going to edit some files, is advised to backup your child theme.

Also Read : How to Remove or Change Post Meta in Genesis Theme Framework

Related posts can be displayed based on tags or categories. Nick used both tags and categories in his code to display related posts, but we tried to split them and here is the result of it.

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 and save it.

/** 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

Also Check : 5 Reasons why we choose Genesis over Thesis

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 and save it.

/** 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

Check This : How to add 3 column footer to WordPress theme

Styling the related posts in Genesis Theme

You need to add this code to style.css file.

.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;
}

Now, you are done with everything and its time check the related posts in your blog. If you got any query regarding this article, please drop a comment and we will get back to you soon.