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 :)