Adding Related Posts Without WordPress Plugins – A Definitive Guide

by Mike Swan in Tutorials / wordpress on 04 Feb 2015


Plugins have played a major role in increasing WordPress popularity. WordPress plugins can be used to add almost any feature or functionality to your site or blogs – be it optimizing your blog posts for search engines, or adding comments functionality to your posts and much more. But just like everything has some advantages and downsides to it, plugins are no different.

Often site owners, in general, amateurs willing to expand functional ability of their WordPress blog posts installs plugins in excess, which makes your posts to load slowly and can even “break” your site. A lot of popular WP plugins helps add “related posts” to a blog. Since, WordPress doesn’t provide any option to add related posts, it becomes essential to search for a plugin that can help you fulfill such need.

Through this post I’ll provide insight on how you can add related posts to your blog with thumbnails without using any plugins. Before getting started let’s first have a look at some of the main reasons as to why you should try to avoid using plugins.

Why you should avoid plugins?

There are several reasons owing to which you should use WP built-in code and services, instead of using a plugin. First of all, you don’t need to depend upon a thirdparty plugins developer to make your blog to function. Many cases have been reported wherein a number of third-party plugins are not updated by their developers, and as a result website owner gets stuck with outdated plugins that can threaten the vulnerability of your WP site.

Secondly, a plugin might contain bugs in code (though it’s something hard to find, provided that you’re downloading your plugins from the official WordPress site). Furthermore, as discussed above installation of plugins can even slow down your site.

Let’s Get Started: Creating Related Posts with Thumbnails

The “related posts” feature is placed in single.php file, however you can use it at some other place as well, provided that you don’t place it outside the WordPress loop. WordPress comes with a built-in thumbnail system. In order to activate the thumbnail system, add the following code to your functions.php file saved in your WordPress site theme folder.

add_theme_support( 'post-thumbnails' );

If you want to change the width and height of the thumbnails, use the following lines of code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 110, 60, true );

NOTE: When you’re adding images to your WP blog, and creating a thumbnail, you’re required to choose the “Use as featured image” option given in the image upload panel. And thumbnail for your post will be created.

Code for adding related posts with thumbnails

<div class="relatedposts">
	<h3>Related posts</h3>
	<?php
		$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;
			$args=array(
				'tag__in' => $tag_ids,
				'post__not_in' => array($post->ID),
				'posts_per_page'=>5, // Number of related posts to display.
				'caller_get_posts'=>2
			); 

			$my_query = new wp_query( $args );
			while( $my_query->have_posts() ) {
				$my_query->the_post();
				?>
				<div class="relatedthumb">
					<a rel="external" href="<? the_permalink()?>">
						<?php the_post_thumbnail(array(160,110)); ?><br />
						<?php the_title(); ?>
					</a>
				</div>
			<? }
		}
		$post = $orig_post;
		wp_reset_query();
	?>
</div>

The piece of code the_post_thumbnail(array(160,110) sets the size of the thumbnail which will be displayed, in this case, 160px width, 110px height.

Making Changes to The CSS

Now open your styles.css file to make changes in the CSS.

.relatedposts {width: 540px; margin: 0 0 10px 0; float: left; font-size: 13px;}
.relatedposts h3 {font-size: 10px; margin: 0 0 3px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 4px 0; padding: 0;}
.relatedthumb a {color :#666; text-decoration: none; display:block; padding: 4px; width: 145px;}
.relatedthumb a:hover {background-color: #888888; color: #000;}

The above CSS will yield the post thumbnails with 145px in width, which means we’ll need over 3 thumbnails to fill the 540px width of the post. You can adjust the code as per your requirement. A word of caution, make sure to set your thumbnails width generated in your WP media settings similar to the ones specified in CSS. In addition, it should also match the size specified in the above written php code:

the_post_thumbnail(array(160,110)

The Bottom Line

Rather than relying upon third-party WordPress plugins, you can enhance functionality of our WP powered site using built-in features and by writing codes. Adding functionality without using a WP plugin avoids a lot of risks like slow page load time, malicious code etc. So, if you’re planning on adding related posts to your WordPress blog, without plugins then reading then I’ll recommend you to read this post carefully. And you’ll be surprised to see how you can add some new functionality to your posts even without a plugin.

Written by Mike Swan

Mike Swan is an experienced PSD to wordpress service provider, and a web designer. With this article, he is making people aware about adding posts without wordpress plugins.

Mike Swan has written 1 posts.

  • This is great useful information.. awesome Thanks

    http://evincetech.com