How to Add Image Thumbnails to Related Posts in WordPress

Q: Your site is very helpful to me. Could you please tell me how to embed that related posts like in your site in mine? I have tried a lot of alternatives, can you please tell me how you add that related posts with thumbnails?

If you are frequently browsing the Web, you will notice that many blogs are showing image thumbnails for the Related Posts section, just like what we did in Make Tech Easier. In WordPress, there are several ways that this can be done. Let’s check it out.

Using a plugin

The easiest way to implement the image thumbnail (without any coding) is via a plugin. LinkWithin is one such tool that you can use. Advantage of LinkWithin is that it doesn’t take up any of your server space and bandwidth (to store the thumbnails) and there are little (or zero) configurations need to be done.

Go to LinkWithin. Fill in the detail on the front page.

wpthumb-linkwithin

Click Get Widget. You will then be directed to a page where you can download the plugin.

Install and activate the plugin. Your thumbnail related post will immediately appear in your blog.

wpthumb-linkwithin-on-post

As good as it can get, there are some disadvantages and limitation of using LinkWithin.

  1. there is limited control for the end-user: you are not able to configure which image thumbnail to show for each post.
  2. you cannot adjust the size and styling of the widget.
  3. you cannot set the position for the widget to appear. The default is for it to appear immediately after the post content ends, but there are times where you want to insert author information or advertisements first before the related post. in this case, this doesn’t come handy.

Hacking the WP theme file

The best way to fully customize the user experience is to go into the theme file and do some hacking. This will require some coding experience.

First, using the instruction here, activate the post thumbnail feature (only applicable in WP 2.9 and above).

Next, install and activate the Yet Another Related Posts plugin. What I love about this is the ability to use a template system to style up the related post content.

In the YARPP plugin folder, go to the yarpp-templates folder and copy the file “yarpp-template-thumbnail.php” to your theme folder.

Next in the WordPress YARPP options page:

  • uncheck the “Automatically displayed related posts?
  • select the number of related posts that you want to display
  • choose the yarpp-template-thumbnail.php from the template file dropdown list.

wpthumb-yarpp-options

Open the “yarpp-template-thumbnail.php” in a text editor. Replace the code with the following.

What this code does is to check if there is a thumbnail set for each related post. If yes, it will display the thumbnail and the permalink.

Next, in your theme folder, open your “single.php” file and add the following line to the part where you want to display the related post:

Lastly, we need to do some styling. Copy and paste the following styling code to your style.css file.

.related_posts ul{ width:100%; list-style:none; margin:0; padding:0; } .related_posts li { display:inline; float:left; margin:0; padding-left:0; padding-right:10px; width:140px; /* change this value accordingly to your template */ } .related_permalink{ width:140px;/*change this value accordingly to your template */ text-align:left; font-size:0.85em; padding-top:5px; } .related_thumbnail{ width:140px; /*change this value accordingly to your thumbnail size */ height:80px; overflow:hidden; text-align:center; }

That’s it.

Image credit: wuzhao.album

28 comments

  1. I've been thinking about adding the recent posts section to my site. It didn't dawn on me to show thumbnails…partly because I don't currently add pictures to my posts. With this info I think I have a reason. The thumbnails are very attractive. I think my visitors will like it too.

    Thanks for posting, with hacking tips

  2. Thumbnail images have the ability to grab reader attention more than just pure text, so it is really worthwhile to implement it in your site. I am glad that you like the tutorial and I hope it is useful to you.

  3. Another great image plugin is the WP-Flickr plugin. You need to have the picture in your Flickr library, and you can add any picture from your library to a post.

  4. Yes, that is a great plugin too. Thanks for recommending

  5. Hello damien,

    I want to congratulate you for this tutorial very informative. Sorry if my English is imperfect, but I wish to obtain a result similar to what you did on your site for related articles. I see you used a table to display your thumbnails but I do not know where I should place the tags
    <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
    <?php if (function_exists('has_post_thumbnail')): if (has_post_thumbnail()):?>
    with your code structure.
    Can you help me please ?
    Thank you in advance

  6. The most common place to insert the tag is after the <?php the_content('Continue Reading…'); ?> tag in single.php

  7. Thank you for your response ! It's a great blog ;)

  8. It works great. Except for one thing. It doesn’t grab the thumbnails, it grabs full-resolution images and only shows whatever portion of them you define in the CSS. I have thumbnails for each post, but the_post_thumbnail seems to be pulling the first image in the post, not the thumbnail.

    I’m hoping you have a solution because I really, really like the results with YARP instead of the non-related posts shown by LinkWithin.

    Thank you!

  9. I was thrilled to find someone who'd outlined how to do LinkWithin style related posts since WordPress introduced the Post Thumbnails. However, this doesn't seem to call the post thumbnail (I have one set for every post with an image), but just a full-resolution image from the post. So it only shows one corner of the image and crops the rest. It's fine if you always use very small images in your post, but I sometimes use images as big as 500px wide.

    Any suggestions on how to actually use the WordPress Post Thumbnails? Thank you!

  10. Oops. I discovered my thumbnail size was the problem, not the code. Sorry!

  11. I hope it is working for you now.

  12. Adding a second <div style=”clear:both;”></div> right before <?php else: ?><?php endif; ?> in the template really helps the styling–everything below the thumbnails was wrapping around them until I added that.

    The only problem I'm continuing to have is that my “related posts” heading shows whether there are related posts or not! (See http://littlepinkhouse.bloggingmyworld.com/2010… — it still shows “More Post Cards” even though there aren't any.)

    I'd also like to style the permalinks and thumbnails differently. (As you can see, I have an image as a background to the thumbnails: http://littlepinkhouse.bloggingmyworld.com/2010…) I thought I could make “.related_posts li {” into “.related_thumbnail li {” and “.related_permalink li {” in the CSS, but that didn't work. Any suggestions there? (I do have a lot of posts without thumbnails.)

    Thank you so much! Your post has been invaluable. I was so glad to find it!!

  13. An alternative method is to use custom field “post_thumbnail” to store the URL of the thumbnail image.

    Try this

    <?php if(!($post_image = get_post_meta($post_ID, 'post_thumbnail', true))): ?>
    <?php $post_image = “http://your-url.com/no-image-thumb.png”; ?>
    <?php endif;?>

    Then display the image with

    <div class=”related_thumbnail”>
    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”><img src=”<?php echo $post_image; ?>” alt=”<?php the_title_attribute(); ?>”>
    </div>

  14. I tried everything that was mentioned here but no related post were displayed.

    1. Can you check:

      1. Did you install and activate the YARPP plugin?
      2. Did you place the yarpp-template-thumbnail.php file in the theme folder?
      3. Did you check if the code is correct?

  15. I am able to get thumbnails to appear for my related post area under my articles. However, now the titles of the articles don’t appear next to my thumbnails. Any idea how I can fix this – I have looked everywhere and cannot get this resolved. My site is http://www.stockgravity.comPlease help, Thanks!

    1. You need to insert in the following code for the post title to appear.

      <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a>

  16. How to instruct the plugin to format the thumbnail img with 150×150 size?
    And how to create a hover color as similar to your site when mouse move over?

  17. I LOVE the way you’ve styled related posts on your blog. What code should I put in to have them look exactly the same? I know enough to be able to tweak it from there to make it best-suited to my design, but I don’t know enough to take it from bare-bones to something that looks like your site.

    Thanks a lot for your help!

    1. There are some complex coding over there. First, you need to set a post thumbnail for every post (using custom field). Second, I am using Efficient Related posts to grab the related post. Lastly, I grab the related posts array from the plugin and match it with the post thumbnail, and then display them out.   

  18. Is there a way you can set yarpp to get the thumbnail version of the image. I have yarpp images working properly on my sit but it using the full image instead of the thumbnail version image. I have my thumbnails set to 150X150 which would greatly reduce the load time for each of my post since they are on every post. If anyone could help me out I would greatly appreciate it. 

    1. Yes you can, just replace the line the_post_thumbnail() with the_post_thumbnail(array(150,150))

      1. Hi Damien! Thanks for sharing this good tutorial! Can you help with code or function to show first image from post if there not have “has_post_thumbnail”. I want YARPP show thumbnails but if in some posts not have, then take first image from post and show like thumbnail. Now i use  the_post_thumbnail(array(150,150)) and i know that i have more related posts but now show only these related posts who have thumbnail. Thanks in advanced

        1. Here’s the modification:

          Related Photos
          have_posts()):?>

              have_posts()) : $related_query->the_post(); ?>
                 
             
                 
                      <a href="” rel=”bookmark” title=””>
                 
                 
                 
                      <a href="” rel=”bookmark” title=””>       
                 
             
             
          $files = get_children(‘post_parent=’.get_the_ID().’&post_type=attachment&post_mime_type=image’);
          if($files) :
          $keys = array_reverse(array_keys($files));
          $j=0;
          $num = $keys[$j];
          $image=wp_get_attachment_image($num, ‘large’, false);
          $imagepieces = explode(‘”‘, $image);
          $imagepath = $imagepieces[1];
          $thumb=wp_get_attachment_thumb_url($num); ?>

                              <a href="” rel=”bookmark”
          title=””><img src="”>
                 
                 
                 
                      <a href="” rel=”bookmark”
          title=””>      
                 
             

             
             

           

              No related photos.

        2. @aristidov:disqus I have difficulty entering the code in Disqus. Contact me and I will pass you the code.

  19. I saw that you have solved the issue. Good for you. :)

Comments are closed.

Sponsored Stories