WordPress How To: Add Related Posts Section Without Plugin

While reading famous blogs like Nettuts, Tuttoaster… you will be very impressive about the related posts section which appeared immediately after the blog post content. In this article, I will show you how to add it to your WordPress theme without any additional plugin and very easy to do.

What are we going to do?

First, lets look about what we will do, this is a screenshot taken in my localhost website:

I want to build a related posts section that can automatically get related posts based on the current post tag, furthermore, it can automatically displays the thumbnail for each related post item by looking for the first image in each related post.

… and how you can archive it

To archive it, I need using additional Php image-resize script to resize the post thumbnail to a fixed size, and it’s TimThumb, so in the first step, you need to download TimThumb script and then upload it to your WordPress theme folder.

The second step, add this code to your functions.php file (in your theme folder, if your theme doesn’t has it, let’s create one):

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

The third step, you add this code to your single.php file (It must be pasted within the loop):

		<!-- Display related posts without a plugin -->
			<?php
			$tags = wp_get_post_tags($post->ID);
			if ($tags) {
			  echo '<aside id="related-post"><h3>Related Posts</h3><ul>';
			  $first_tag = $tags[0]->term_id;
			  $args=array(
				'tag__in' => array($first_tag),
				'post__not_in' => array($post->ID),
				'showposts'=>5,
				'caller_get_posts'=>1
			   );
			  $my_query = new WP_Query($args);
			  if( $my_query->have_posts() ) {
				while ($my_query->have_posts()) : $my_query->the_post(); ?>
				  <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
					<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&w=100&h=100&zc=1" />
					<?php the_title(); ?>	
				  </a></li>
			<?php endwhile; }
				echo '</ul></aside><br class="clear" />';
				wp_reset_query();
			}?>
		<!-- End of display related posts without a plugin -->

Notes:

  • In the code above, I added “<aside id="related-post">” because my theme was built on Html5 syntax, if your theme doesn’t use Html5, please replace it with the “<div>” syntax.
  • If you like another size of post thumbnail, please edit this line “&w=100&h=100“, replace “100” with the size you need.
  • TimThumb script can only process the local image, so be sure that the first image in your related posts must be hosted in your domain host.

And the final step, CSS!
Here is my Css styling, you can change it to whatever you want:

#related-post h3 {font-size:1.6em;margin:5px 0}
#related-post ul {list-style:none;}
#related-post ul li{float:left;margin-right:15px;width:110px}
#related-post img {border:1px solid #ddd;background:#F9F9F9;padding:5px}
#related-post a:hover {color:#c00}

Conclusion

Of course, there’re many ways to add related posts section to your theme available on the Internet, you can follow any of them but I like the way I show you because it’s very simple, easy to do and can automatically process the post thumbnail images for you, if you have another better idea, please let’s me know :)

44 thoughts on “WordPress How To: Add Related Posts Section Without Plugin”

  1. Pingback: wp-popular.com » Blog Archive » Wordpress How To: Add Related Posts Section Without Plugin

  2. Pingback: 75+ Fresh Useful Articles for Designers and Developers | tripwire magazine

  3. Gunnar Lindberg Årneby

    I’m sorry but code line 6 for functions.php makes my whole site crash. Running WP 3.0RC1.

    1. I’m sorry to heard about that, this code has not tested in WordPress 3.0, but WP 3.0 is NOT official released :), it works well in WP version up to 2.9.2

  4. Gunnar Lindberg Årneby

    But it’s a really good idea and WP 3.0 is just around the corner. Can you please make it compatible with 3.0? I’d rather not use a plugin for this functionality.

    1. Hi, I’ve upgraded my localhost WordPress website to newest WP version “WordPress 3.0-RC3-15241” and my functions.php works fine as in WP 2.9.2 version, could you show your error reporting to me?

    2. @Gunnar lindberg
      Did you found the solution ?!!!!
      I’ve got the same message error from funtions.php line6
      Thanks

  5. Pingback: Servefault.com

  6. Gunnar Lindberg Årneby

    I just trashed my WP 3.0 RC1 installation by trying to upgrade it to RC3. At this point I think we can safely say that the error is on my side :)

  7. Gunnar Lindberg Årneby

    Nope, it still crashes out:
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/web26168/domains/domain.se/public_html/wp-content/themes/starmagazine/functions.php on line 227

  8. I do not know if you are a foreign English speaker but you are making lots of spelling mistakes and you seem unaware. I should say that a person that writes many articles (more than that, you are a chief editor!) must revise her spelling and write things as correctly as possible for fully understanding. One of the words that I suppose you are writing it wrong all the time is “archive” (a noun), which is not the same as “achieve” (a verb). Also, beware with 3rd person, e.g. “if your theme doesn’t HAVE one”, “I’m a banker who LOVES to work…”. Hope this helps.

    1. Thanks for your advice, I’m not a foreign English speaker, I’ve just moved to U.S from Japan, and I still in leaning English process but I think a language couldn’t block my love for blog :) .I’m very happy if you could help me to fix these errors.
      Once again, thanks you so much.

    2. Carkod, Chill out! Just figure it out what she is trying to say. There is no need to correct her in open like this. It is very nonprofessional.

    3. Okay, since you’re such a grammar Nazi, let’s fix your grammar while we’re at it, shall we, as you “seem unaware.”

      Lack of comma: “you are a foreign English speaker but you are making lots of spelling mistakes” > ‘you are a foreign English speaker, but you are making lots of spelling mistakes’

      Incorrect grammar: “I should say that a person that writes” > ‘In my opinion, a person that writes’

      Incorrect grammar: “correctly as possible for fully understanding” > ‘as correct as possible for full understanding’

      Incorrect grammar: “of the words that I suppose you are writing it wrong all the time” > ‘of the words I notice you often spell incorrectly’

      People in glass houses shouldn’t throw stones, buddy.

      @Jennifer, thanks for the post. Good stuff.

  9. Hi

    Am I right in guessing that this method will be a lot less of a drain on server resources than most of the plugins? One of my sites is a pretty big site and I have tried adding related articles plugins but they have killed my cpu time allowance.
    If the trick is just pulling sites from tags then it should be a lot more efficient – but I’m just guessing at that.

    Kevin

    1. Hi Kevin, I think you’re right, because other WP plugins calculate related articles aren’t only based on post tags but also post’s category, keyword and/or title.

  10. Pingback: Related posts without plugin | codeblog

  11. Love you so much.. I’ve been looking on how to automatically use the post’s first image as thumbnail and here it is in a few lines of your codes. I’m designing my first WP theme and WP >= 2.9 have the featured image function but they are not automatic. I might also add this Related Posts to my theme. Thank you very much. Haven’t test it yet but sure it will work nicely. Update you later.

  12. Problem with your line 6 but I replaced it with this:

    $output = preg_match_all(‘//i’, $post->post_content, $matches);

    and now it works fine. And in line 9 you typed “empty” twice.

  13. Problem with your line 6 but I replaced it with this:
    $output = preg_match_all(‘/<img.+src=[\’"]([^\’"]+)[\’"].*>/i’, $post->post_content, $matches);
    and now it works fine. And in line 9 you typed “empty” twice.

  14. Thanks very much for posting this!

    I wanted to share my modification of your code. I removed the ‘catch_that_image’ function and replaced it with the ‘Featured Image’ feature that’s used in WordPress 3.0+.

    https://gist.github.com/1113929

    Cheers!

  15. Sharing Digital Way

    It is good to show related post in wordpress blog without plugiN. iIt will consume less bandwidth and time to load. Thanks for your suggestion.

  16. thanks for that article i want related post in our blog without using plugin….can u please tell me what plugin are using for popular post?

  17. football galleries

    Hi, Your code works like a charm.. I have implemented this method on my Football Galleries blog. I prefer using timthub script instead of using featured image method (which is suggested by jami) because by using timthumb image automatically appear as thumbnail without clicking in featured wp 2.9 panel post.
    Million thanks for ya..!!

  18. Thanks for the code. I installed a related post plugin a couple of days again and it did not work the way I wanted. Reading this post made me realize the importance of having correct tags for each post for making related posts relavent.

  19. parajumpers online shop

    Before the ear abercrombie thquake, the versatile 17-year-old beautiful girl, after the abercrombie outlet earthquake,abercrombie, the high Qing Jingwen not only the right leg amputated, his left leg muscle injur parajumpers damen y,abercrombie outlet, but also hurt the soul: Qing Jingwen just started to come to help the people are excluded, her

  20. Some of the bazaar merchants and drivers aft abercrombie outlet er acqu hollister jacken ainted, get up early to take an ambulance to the city to purchase, it is convenient.

    On repeated demands that emergency vehicles can not be used t hollister online shop o pick this car in critically ill patients. you can go to the hospital by any other doctor abou

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top