Show Related Posts with Thumbnails in Genesis without Plugin

There are many plugins are available to display Related Posts in Genesis theme, but it is not good to depend on plugins all the time (plugins make website very slowly). Hence, follow this simple tutorial to display related posts in Genesis theme without a plugin.

We used both tags and categories in this tutorial to display related posts. The way our script works is pretty simple. First, it finds the tags a post is assigned to then tries to find other posts using that same tag. If it gets enough posts, it stops. Otherwise it checks the category for more posts to finish out the total number of related posts we are going to show. It does a very good job of building the related posts. Here we go…

Step 1: Open function.php (in wordpress genesis child theme folder) and add below code to:

/* Add Image Size */
add_image_size( 'related', 90, 70, true );
/* Notes: You can change size of related picture. 90 is width and 70 is height.*/

Step 2: In after add_image_size you add below code to your function.php. This is The Related Posts Code for genesis child theme:

//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
*/
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><h3>Related Posts</h3><ul>%s</ul></div>', $related );
}
wp_reset_query();
}
}

Step 3: Create a Default Image with size: 90×70 named related.png and upload it to images folder in wordpress genesis child theme folder. Change this image size on Step 1.

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

/************ 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: 135px;
}
.related-list img {
background: none repeat scroll 0 0 #F0F0F0 ;
border: 1px solid #ccc ;
display: block;
margin: 0 auto;
padding: 5px;
}

All done ! After finish 4 step above, you can see your related posts will display like demo:

Show Related Posts with Thumbnails in Genesis without Plugin

Show Related Posts with Thumbnails in Genesis without Plugin

Notes:

1. Change default image size in Step 1

2. Define the number of posts to display by changing value in Step 2 (‘showposts’ => 5,).

3. Showing related posts with thumbnails is not consistent with the long titles so i recommend you to read: Display Related Posts in Genesis Theme without Plugin for display related posts like our site.

6
Leave a Reply

avatar
4 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Aichuk DebbarmaRicky1990JamalBasMelanie Recent comment authors
  Subscribe  
Notify of
Melanie
Guest

Hi Ricky, thank you so much for this genesis tutorial guide to adding related posts with thumbnails.
I have followed your instructions but for the life of me I just can not get my thumbnails to show in a horizontal line as your preview shows, I was wondering could you help me at all please with how to get this working as your preview shows?

you can see a post with related posts on my site here
http://www.beehavendesignz.com/royal-wedding-blog-train-freebie/

Melanie
Guest

Never mind i finally figured it out 🙂

I made changes to the CSS related-post as follows:
.related-posts {
width: 700px;
overflow: hidden;
margin: 0 0 10px;
float: left;
}

Bas
Guest
Bas

Hello Ricky,

Thanks for sharing this code with us.
I got a question, is it possible on some way to style it like this:

– Different boxes like in a “Grid”
– The title below the thumbnail.
– All in 1 row, even with longer titles, as the titles will only be shown under the correct thumbnail.

(At the moment I see every single related post in a different row.)

Hope to hear from you,

Bas

Jamal
Guest

Thanks for the code. But, how to make it to random post? Not use category or tags as related post?

Aichuk Debbarma
Guest

Hello Sir, Thank you for sharing codes with us. I have done little modification of code snippet and CSS in two ways. I hope you gotta like this to see; you can visit to:

https://www.codyan.com/genesis-framework/show-related-posts-thumbnails-genesis-without-plugin.html