Adding WordPress Related Posts Without Plugins

WordPress is highly extensible through the use of plugins. These plugins cover almost any feature you can imagine; some of them transform a WordPress installation into a CMS, while others add custom features or optimize your blog for increased search engine ranking. And there are many more possibilities out there.

When using too many plugins, they can slow down your website, and at the very worst, they could ‘break’ it. Plugins that are not compatible with one another can cause your website speed to suffer.

WordPress lacks a standard to display related posts on a blog, so some of the most popular categories among WordPress plug-ins are used to add related posts.

This article will show you how to add related posts with thumbnails to your blog, a step-by-step guide that keeps everything simple, light, and accessible. Let’s get started!

Getting Started: Related Posts

This feature, like most others, is placed on the main article page ( single.php ) within WordPress, but you can use it almost anywhere, as long as you keep it within the WordPress loop. To get the related posts, we’ll be using the post tags that are given to individual articles.

Thumbnails

WordPress now has a built-in system for posting thumbnails, which we’ll use here. To enable it, add this code to your functions.php file in your theme folder (it’s already there most of the time). You can also set the width and height of the thumbnails by adding another line to the code:

When adding images to posts, select “Use as featured image” in the image upload panel to create a thumbnail for the post.

CODE:

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

CSS

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

The CSS above will cause the thumbnails of your related posts to be displayed with a width of 150px. In order to fill the 640px width of your post, you will need 4 thumbnails (including the blank space between them). You can adjust this width as you wish; if you want 5 thumbnails, you’ll need a .relatedthumb width of approximately 125px.

Your feedback, suggestions, and thoughts are always welcome. write your response below.