HowTo Add Related Posts with Thumbnails in Thesis Theme Without a Plugin

Published On :

You can see that DailyBlogging is now Powered by Thesis Theme and despite of so much coding involved behind the entire site, the loading is quite faster than the previous theme. The main reason behind this is the least usage of plugins.

Plugins are important for a blog, but only when they are light weight. So whenever you need something in your blog, try to implement that using Custom codes rather than using plugins. In case you are a newbie, then checkout the Top 10 WordPress Plugins I use on DailyBlogging.

Make sure that you take proper backups before editing any file. A single mistake in the copy-pasting process would give out an error.

Related Posts With Thumbnails

Related Posts with Thumbnails Without a Plugin

Related Posts below your post area not only help in reducing your bounce rate but also pass on some SEO juice to those related post links. Moreover a thumbnail associated with it would attract more and more clicks thereby making your visitors stay a little longer on your site. So here is how you add Related Posts with Thumbnails in your Thesis Theme. Open your

custom_functions.php file located in Thesis theme’s Custom folder and add the below code,

add_theme_support( 'post-thumbnails' );
add_image_size( 'related-posts', 100, 100, true );

function related_posts() {
if ( is_single() ) {
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts" class="clear"><h3>Read them too</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
	<a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
		<?php the_post_thumbnail( 'related-posts' ); ?>
	<div class="related_content">
		<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<? }
echo '</ul></div>';
} }
$post = $orig_post;
wp_reset_query(); ?>

<?php } else { } }


Then navigate to your custom.css file which is also located in the custom folder and add the following code,

.custom #related_posts ul {
    margin: 0;
    overflow: hidden;
    padding: 5px 0;

.custom #related_posts li {
    float: left;
    list-style: none;
    margin: 0 0 0 20px;

.custom #related_posts li:first-child {
    margin-left: 3px;
    padding-left: 8px;

.custom #related_posts li a {
    border-bottom: medium none;
    display: block;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    text-decoration: none;
    width: 111px;

.custom #related_posts li a:hover {

.custom #related_posts li a img {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #E1E1E0;
    height: 100px;
    padding: 4px;

.custom #related_posts li a img:hover {
    background: #DDD;
    border: 1px solid #CCC;

.custom #related_posts {
    height: 270px;

Get Thesis Theme for your WordPress Blog

Due credits to Thesis-Blogs for the php Code. I’ve just styled (CSS) his code in a better way.

If you liked the Tutorial then you can always Subscribe to Our RSS Feeds / Daily Updates.

Are you also of the view that one should use less no. of plugins on his/her WordPress Blog ?

Share :
Tagged as : 52 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.


49 Comments Comments RSS

  1. #

    I still haven’t got a good hold on the Thesis theme functions =/

  2. #

    Great post, thank you so much for such a nice tut. 😀

  3. #

    Awesome..! By using plugins page gets heavy, but by using code page won’t get heavy.. :)

  4. #

    From here, you given a wonderful info about thesis theme without plug ins and it would be helpful for the blogger without any error. And, thanks a lot for given a superior data on here, Mani.

  5. #

    Thanks a lot ..for the great post..but on my blog the thumbnails did not show up,instead of thumbnails there is blank space ..How will I fix this problem ??

    • #

      Make sure that you added add_theme_support( 'post-thumbnails' );
      add_image_size( 'related-posts', 100, 100, true );
      this code in the custom_functions.php file. Thats a very important code, without that you won’t be getting the thumbnails.

      • Dave

        I tried this too and just like the OP, all I see is text… no thumbnails. I followed the instructions exactly as you provided. Help?

        • #

          Well I got your problem. Are you sure, you are using Featured Images for your post ? Because the code I’ve provided uses Featured Images to show thumbnails and not your post images.

          • #

            How can we change code so it use first image of post….? Thanks

  6. #

    using source code is far better than adding plugins to our sites

  7. #

    I have tried the WordPress directory but they dont have anything that I like. I would like to purchase a premium theme but I want to make sure that I will not have any problems trying to edit it or it will be a waste of money and I’ll still be in the same boat… Thanks…

  8. #

    Hi Mani,Very useful article for the thesis users. Honestly, I have never seen a better thesis site than yours. You designed it too well.

  9. This is a great post, I am new to thesis and was searching for the code to add related post in my site. Though there are a lost of plugins are available to do the same job but they also increase the page loading time. Thus this information is valuable

    • #

      Custom Codes does help in reducing your Blog’s loading time. Glad you liked the post Rakesh.

  10. #

    Hi Dude… I Wanna Add Related Posts Below My Adsense Ads in Thesis , It Should be In This Order

    Adsense Ads
    Related Posts
    Pls Help me Out,Take A Look @ My Site, And U Can Get Me

    • #

      you can add a separate function for the AdSense ads and then place the Related Posts with Thumbnails.

  11. Glenn

    I’m having the same problem as @RKJHA. I did everything the same, and no thumbnails. Only text is showing. Any ideas what is going on?

    • #

      In RKJHA’s case, blank space is shown. Is that the case with you or you see only the title text and not the thumbnail ?

      • Glenn

        I just see the text and no thumbnail

        • #

          Recheck, whether you are using a post thumbnail. (Featured Image for Posts)

  12. #

    great. i done installed it. Take a look in my place.


  13. Shintu

    Can i do the above post for Freshlife theme???

  14. #

    I seem to be having the same issue. I have a featured image and thumbnail in every post, but its only showing the text. Here is an example post: ideas are appreciated!

    • #

      See in Thesis there are two inbuilt image displaying options.

      1) Post Image
      2) Post Thumbnails.

      I think you’ve used either of them or both of them. To go with this tutorial you need to enable Featured Images (which is a default function of WordPress) using the given code (in the post) and then assign a featured image to your posts.

      The reason I’m saying this is, because I inspected your post page’s code & didn’t find the “post_thumbnails” function working. So recheck whether you’ve followed all the steps. Also if you are adding via Thesis Openhook plugin, then remember to check the “execute PHP in this code” checkbox. Hope that helps.!

      • #

        I have same problem……i got the 3 links only at bottom of my post….no thumbnail….i tried as you provided the solution but can’t get it…can you please tell me where im wrong… in post image/post thumbnails-how i enable that in can check it

        Also tell me whats the solution if i need to add 5 thumbnails in place of 3.

        • #

          Well some of them got this working. Seems like you guys aren’t either using Featured Images (for posts) or defining the theme support for post-thumbnails correctly or maybe you’ve defined it two times.

          Try adding this line as well and tell me if this works,

          set_post_thumbnail_size( 610, 9999, true );

  15. #

    Aweseome tip dear thanks for this :)

  16. #


    This was an outstanding post! Thanks for doing it. I got it to work fine on my blog.



  17. #

    Hi, thanks for the code :)

    One question though? how do I just show the related posts lists without the images?



    • #

      Just remove this part of the code : <a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'related-posts' ); ?></a> and you’ll get only related posts. Also, remove add_theme_support( 'post-thumbnails' );
      add_image_size( 'related-posts', 100, 100, true );

  18. #

    Darn, I can’t seem to get mine working at all. All the code is there and in the right place, but it has had no effect, no text or thumbnail. Any idea what I am doing wrong?
    Here is my site,


    • Florian

      Same for me! Nothing appears. Not even the headline.

      How did you get it to work Leif?

  19. #

    Yesssss! Thanks so much for this excellent tutorial. I’ve had such fun tweaking the CSS, and it’s great not to have to rely on a plugin. Kudos and karma to you!

  20. #

    how to get the same functionality using timthumb..?

  21. #

    Not working for me . I tried the same thing ,, but it is not working for me ..

  22. #

    Very good post that help me very much for my site.

  23. #

    This is the easiest of the code snippets I’ve seen to make this work and that line of code you provided in July did the trick for me…but is there any way to define the size of these thumbnails. I like my excerpts to be larger and if these are the same size I can only list three of them, additionally it looks as if the thumbnails are different sizes!

    Thanks…it’s very close to what I want!

    My site is at

    • #

      You can alter the thumbnail size (for related posts) using this command add_image_size( 'related-posts', 100, 100, true ); Just change the 100x100px size with the size you need.

  24. Nice post to display related posts without plugins.

  25. #

    Nice tutorial helped me very much !

  26. Joey

    Hi Mani,

    Is there any code that you can add that will display a default image if you do not have a featured image picked?


  27. #

    Hey thanks for this, I was looking for a pre-made script to work with, but I would suggest one thing, to change the fixed height

    .custom #related_posts {
    height: 270px;

    to auto

    .custom #related_posts {
    height: auto;

    That way if you dont have images, then you wouldnt be left with an empty space.


  28. Brett Lee

    I get this error

    Parse error: syntax error, unexpected T_ELSE in C:\Program Files\VertrigoServ\www\wp-content\themes\thesis_185\custom\custom_functions.php on line 59

    Line 59 has this code:

    <?php } else { } }

  29. #

    nice tutorial,uyou can create a plugin with this code

  30. #

    I couldn’t get this to work using Thesis 1.8.5 – Any update on this? I’ll have to try and setup a “clean” version of Thesis/WP and see if works on that later. I would definitely like to get this to work!

    • #

      I got it to work, thesis 1.8.5 I will write a tutorial and the code soon on my site.

      • #

        It isn’t your code that is the issue. I found that I was already using that hook for my authorbox/mail subs and I couldn’t figure out how to integrate it. This is a great tutorial. I could show you the code but it would be a monster to work with I’m sure!

  31. #

    Thanks i just put it in my site ..!! :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.