How to add WordPress Related Posts Without Plugins

By . in WordPress. Updated on .

Note: This post was first published on the 7th June, 2012.

One of the big advantages of using WordPress are the plugins. WordPress plugins cover almost anything you can imagine, from expanding your blog into a CMS, to adding nifty features and optimizing your blog for search engines – the possibilities are endless (and let’s not forget all the different themes out there).

But by using too many plugins, you run the risk of clogging up your WordPress blog, and at the very worst, you might ‘break’ it. There are many instances of plugins that are not compatible with one another, as well as plugins that slow down your blog.

Some of the most popular WordPress plugin categories are based around adding “related posts” to a blog. Since WordPress doesn’t have anything standard for this, everyone is required to use some sort of plugin to display related posts on their site.

This article will teach you how to add related posts with thumbnails to your blog without any plugins, keeping everything simple, light and accessible. Let’s get started!

The no-plugin approach

There are a number of reasons why you should always try and use WordPress’ built in code and services, rather than a plugin. The main benefit is that you don’t have to rely on a third party (the plugin developer) for your blog to function.

There are many cases of popular plugins being abandoned by their developers, leaving countless site owners stuck with outdated and potentially vulnerable software.

Another reason is that you’re not running the risk of using a bloated plugin that can slow your site to a grind, or even worse, contain a malicious piece of code, although this is rare provided you get your plugins from the official WordPress directory.

Getting startedails

This "related posts" feature, like most others, is designed to be placed on your main article page (single.php), but you can use it almost anywhere, as long as you keep it within the WordPress loop.

In order to get the related posts, we’ll be using the post tags that are given to individual articles.

Thumbnails

WordPress now features a built-in thumbnail system, which we’ll need here. In order to enable it, add this code to your functions.php file in your theme folder (in most cases, it’s already there).

add_theme_support( 'post-thumbnails' );

You can also set the width and height of the thumbnails by adding another line to the code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

Important: When adding images to posts, in order to create a thumbnail, you have to, in the image upload panel, select “Use as featured image”. This will create the thumbnail for the post.

The codes

<div class="relatedposts">
<h4>Related posts</h4>
<?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'=>4, // Number of related posts to display.
	'caller_get_posts'=>1
	);
	
	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>
	
	<div class="relatedthumb">
		<a rel="nofollow" target="_blank" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
		<?php the_title(); ?>
		</a>
	</div>
	
	<? }
	}
	$post = $orig_post;
	wp_reset_query();
	?>
</div>

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

The CSS

We have two divs classes here, “.relatedposts”, which is the overall div container, and “.relatedthumb” which is the individual thumbnail and link within the .relatedposts. We’ll assume that the width of the post is the standard 640px. The CSS:

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h4 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

The CSS above will render the post thumbnails with 150px in width, which means we’ll need 4 thumbnails to fill the 640px width of the post (including the margin between them). You can adjust this as you wish; if you want 5 thumbnails, you’ll need a .relatedthumb width of approximately 125px.

Important: Be sure to set the width of the thumbnails generated in your WordPress media settings to match the ones you set in CSS. Additionally, it has to match the size specified in the php code: the_post_thumbnail(array(150,100).

Example of ouptut

The related posts should appear something like this, as used by gaming blog DigitalBattle (which uses the exact technique described in this article):

Conclusion

We can do a lot with the built-in features that WordPress offers, and in many cases, we don’t need to resort to third-party plugins to get the job done.

Next time you need a plugin for your WordPress blog, see if you can achieve the same feature without the plugin. Dig around, search the Web for an alternative. You’ll be surprised how much is possible with WordPress out of the box.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail