≡ Menu
SearchTechWord

How To Show Related Posts With Thumbnails In Thesis Theme Without Plugin

Some days back I wrote a Plugin for Related post by category with thumbnail option for WordPress users. Then I bought this brilliant Thesis Theme which has so many out of the box hooks to work with. Thesis has always recommended not to use plugins as they tend to slow down the site loading time. This being one of the important factor especially after the Google Panda update. So here is the ultimate code to show related posts by category with thumbnail option for Thesis Theme smart users. I am using the same code on my site to display related posts and it works wonder for me.

Some of the major features of this Related Posts code

  • Both horizontal and vertical display of related post.
  • Option to display thumbnails in case of horizontal display.
  • Option to show full title or part of the title or completely ignore the title while displaying.
  • SEO friendly with care taken to populate the alt tag for thumbnails.
  • Number of posts to display can be configured.
  • Advanced Image scanning algorithm used which first checks any featured image attached, else checks if Thesis Post Image is specified. If not then it scans through the post contents and picks up the first image displayed in the post content. So you don’t have to worry about which thumbnail image it will pick. If no image is found, then a default image is displayed.

 

How to show related posts with thumbnail thesis theme without plugin

Related posts with thumbnail for Thesis smart users

Why Related Post by category?

Whenever a user visit your site, he wont be always visiting the home page first. He will be landing on some internal page and you will want him to browse through some other interesting articles who have written on your blog. Related post is the most effective way to keep your user busy on your site also it is a great medium for internal linking on your site.

Other developers have come up with different algorithms to show related posts. Some uses tags in the post, some uses keywords in title and content, while some combines the both. I like to keep it simple and use category instead to find the related posts. Don’t you think it makes sense to display post from same category, knowing that the user have reached your site searching for the same category related topics? So he is definitely interested in the same category which he is reading. Also the algorithm is very fast and waste no time in going through the entire set of posts you have written till date. Remember, faster loading time?

So how to implement this Related Posts code in Thesis?

Copy paste the below code in your custom_functions.php

/**************************************************************************************************** * *    Below Section is dedicated for Related posts by category code * *****************************************************************************************************/ /**    Using the default post thumbnail for each posts if avaiable. **/ function get_image_from_post_thumbnail($args = array()) { if (function_exists('has_post_thumbnail')) { if (has_post_thumbnail( $args['post_id'])) $image = wp_get_attachment_image_src( get_post_thumbnail_id( $args['post_id'] ), 'single-post-thumbnail' ); return $image[0]; } else { /* Thesis uses custom field to store links to post image. We can try and find image in there */ $image = get_post_meta($args['post_id'], 'thesis_post_image', true); return $image; } } /** Get the image from attachments to each post being displayed  **/ function get_image_from_attachments($args = array()) { if (function_exists('wp_get_attachment_image')) { $children = get_children( array( 'post_parent'=> $args['post_id'], 'post_type'=> 'attachment', 'numberposts'=> 1, 'post_status'=> 'inherit', 'post_mime_type' => 'image', 'order'=> 'ASC', 'orderby'=> 'menu_order ASC' ) ); if ( empty( $children )) return false; $image = wp_get_attachment_image_src( $children[0], 'thumbnail'); return $image; } } /**    Function to search through post contents and return the first available image in the content. **/ function get_image_in_post_content($args = array() ) { $display_img = ''; $url = get_bloginfo('url'); ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', get_post_field( 'post_content', $args['post_id'] ), $matches); $display_img = $matches [1] [0]; // $not_broken = @fopen("$display_img","r"); // checks if the image exists if(empty($display_img)){ //Defines a default image unset($display_img); } else { $display_img = str_replace($url, '', $display_img); } return $display_img; } /** This script will go through different possible options to retrive the *** display image associated with each post.  **/ function kc_get_image($args = array() ) { global $post; $defaults = array('post_id' => $post->ID); $args = wp_parse_args( $args, $defaults ); $final_img = get_image_from_post_thumbnail($args); if(!$final_img) $final_img = get_image_from_attachments($args); if(!$final_img) $final_img = get_image_in_post_content($args); if(!$final_img){ //Defines a default image $final_img = WP_THEME_URL . '/custom/images/noimage.gif'; } else { $final_img = str_replace($url, '', $final_img); } return $final_img; } /******************************************************************************************** * *    Below is the main logic to display the related post by category * *********************************************************************************************/ function kc_related_posts(){ $NumPosts   = '5';    /* Number of posts to display. Use anything from 1 to 5 max */ $disp_style = '1';  /* Specify option 1 for horizontal and 2 for vertical display */ $disp_image = '1';   /* Value 1 will display thumbnail for the related post. Any other value wont display image. Also note that thumbnail image are only displayed for horizontal style. */ $disp_title = '1';   /* Specify 1 if your want to display title for related post */ $max_chars  =  '';     /* Specify the number of chars to display for the title in related posts. If set to null (blank) it will display the full title. */ $header_txt = 'Related Posts';  /* Heading for Related Post */ $def_text = 'No Related Post';  /*Default text when no related posts */ /* Dont edit below this if you are not familiar with PHP coding */ if(!defined('WP_THEME_URL')) { define( 'WP_THEME_URL', get_bloginfo('stylesheet_directory')); } $current_post = get_the_ID(); $category = get_the_category(); $catID = get_cat_ID($category[0]->cat_name); $args = array( 'numberposts' => $NumPosts, 'post__not_in' => array($current_post), 'orderby' => 'rand', 'order' => 'DESC','post_type' => 'post','category' => $catID, 'post_status' => 'publish' ); $recent_posts = wp_get_recent_posts($args); if (empty($recent_posts)) { $output = '<div><br /><h4>' . $def_text . '</h4><br /></div>'; return $output; } $output = '<div><br /><h4><strong>' . $header_txt . '</strong></h4><br /></div>'; if ($disp_style == "1"){ foreach( $recent_posts as $post ){ $kgi = kc_get_image(array( 'post_id' => $post["ID"] )); $title = trim(stripslashes($post['post_title'])); if ($disp_image == "1"){ $output .= '<div><a href="' . esc_url(get_permalink($post["ID"])) . '"> <img src="' . WP_THEME_URL . '/custom/timthumb.php?src=' . $kgi . '&w=110&h=120&zc=1" alt="Link to' . $title . '" /></a>'; } if ($disp_title == "1"){ if (empty($max_chars)){ $output .= '<div> <a href="' . esc_url(get_permalink($post["ID"])) . '">' . $title  . '</a></div>'; if ($disp_image == "1"){ $output .= '</div>'; } } else{ if (strlen($title) > $max_chars){ $title = substr($title, 0, $max_chars) . '...'; } $output .= '<div> <a href="' . esc_url(get_permalink($post["ID"])) . '">' . $title  . '</a></div>'; if ($disp_image == "1"){ $output .= '</div>'; } } } } } if ($disp_style == "2"){ $output .= '<ul>'; foreach( $recent_posts as $post ){ $kgi = kc_get_image(array( 'post_id' => $post["ID"] )); $title = trim(stripslashes($post['post_title'])); $output .= '<li><a href="' . esc_url(get_permalink($post["ID"])) . '">' . $title  . '</a></li>'; } $output .= '</ul>'; } return $output; } function kc_related_posts_contents($content) { global $single; $output = kc_related_posts(); if (is_single()) { echo $output; } else { } } /** Finally add the thesis hook to display related posts after single post contents **/ add_action('thesis_hook_after_post','kc_related_posts_contents');

In the above code, if you search for the main function kc_related_posts(), you will find all the configuration parameters which you can control and specify your own value. I have put comments for each parameter which will lessen your work. Any doubts, don’t hesitate to ask.

Copy paste the below code in your custom.css

/*******************************************************************************************
*
*	Customs CSS for related posts
*
********************************************************************************************/
div.img
{

  height: auto;
  width: 20%;
  float: left;
  text-align: center;
}	

div.img img
{
  display: inline;
  margin: 2px;
  height:auto;
  width: auto;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: auto;
  margin: 2px;
}

Now 99% of your Related Post code is ready. Only bit left is to copy noimage.gif in thesis_18/custom/images folder and timthumb.php in thesis_18/custom folder.

You can right click and save this image in the specified folder.

Related Posts by category with thumbnail for Thesis Theme without Plugin

noimage.gif

 

Click here to download timthumb.php

Copy paste the code shown in a file name timthumb.php and place it in thesis_18/custom/ folder. timthumb is a widely used script to resize, crop images and is owned by Google Codes and is an open source. I am using it to resize the thumbnail images for related posts.

You are done!!! Let me know if you come across any difficulties while implementing this. Also don’t forget to leave a link to your site, so that I can have a look and give you some fedback.

In my next article, I will share how to add Google +1 to Thesis without any plugin.

Comments on this entry are closed.

  • Cam

    This is an AWESOME post. Exactly what I was looking for.

    Can you help me fix one problem? I have copy and pasted the code exactly how you have posted it, and everything is working except this one thing:

    Screenshot:

    http://screencast.com/t/73wEYh3nz

    I have it set to be horizontal, but they aren’t lining up properly. 🙁

    Any help would be hugely appreciated man! Really really happy to find this post.

  • Hey Cam,

    I had a look at your site and it seems that your “facebook Comments” are interfering with the related posts. Related Posts code should start before the “Facebook comments” start.

    Are you using the same add_action
    “add_action(‘thesis_hook_after_post’,’kc_related_posts_contents’);”

    Also how are you displaying the facebook comments. Is it manual display or are you using any Thesis hook to display it?

    Cheers,
    Kunal

  • Hey Cam,

    That plugin for facebook comments can be displayed manually as well. So all you need to do is disable the automatic display of fbcomments. (untick “Show comment box in posts “). Then add the below code to your customs_functions.php


    function fbcomments_add() {
    if (is_single()) { ?>
    <div>
    <br />
    <?php echo do_shortcode('[fbcomments]'); ?>
    </div>
    <?php }
    }

    add_action('thesis_hook_after_post','fbcomments_add');

    Also make sure that this is the last thing in custom_functions.php

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close