But first, Why avoid plugins?
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 started: related posts with thumbnails
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.
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).
You can also set the width and height of the thumbnails by adding another line to the code:
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 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.
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:
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 related posts should appear something like this, as used by gaming blog DigitalBattle (which uses the exact technique described in this article):
collected1 year ago