One of the great benefits of utilizing WordPress are plugins. WordPress Plugins cover approximately anything you can visualize, from expanding your blog in CMS, with the addition of nifty aspects & optimize your blog for search engines – the chances are endless (and let’s not forget all the different maters there).
However using too lots of plugins, you run the danger that your WordPress blog is obstructed, and in the worst cases, you may ‘break’ it. There are lots of examples of plugins that are not well-matched with each other as well as plugins that slow down your blog. A few of the most well-liked WordPress Plug-in categories are based around adding “related posts” to a blog. Since WordPress has no standard for this, everybody is forced to employ a few sort of plug-in to see the related messages on your website.
This article will teach you how to add thumbnails to your related blog without any plugins, keeping everything easy, clear & accessible. Let’s start!
However first, Why avoid plugins?
There are a number of causes why you should always try to utilize WordPress’ made in code & services, instead of a plug-in. The main advantage is that you do not have to rely on a 3rd party (the developer of plug-in) for your blog to purpose. There are lots of instances of well-liked plugins being abandoned by their developers, leaving innumerable owners stuck with outdated software & potentially vulnerable websites.
Another cause is that you are not running the danger of using a bloated plug-in that can slow your website to a routine, or even worse, containing a part of malicious code, although this is rare that you receive in your plugins official WordPress directory.
Getting started: related posts with thumbnails
This “related posts” characteristic, like most others, is made to be placed on your major article page (single.php), however you can utilize it approximately anyplace, as long as you keep it within the WordPress loop. In order to obtain the related posts, we will be utilizing the post tags that are provided to individual articles.
We have 2 divs classes here, “.relatedposts”, which is the generally div container & “.relatedthumb” which is the human being thumbnail & link within the .relatedposts. We’ll suppose 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 will require 4 thumbnails to fill the 640px width of the post (countaining the margin between them). You can alter this as you wish; if you desire 5 thumbnails, you will require a .relatedthumb width of around 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. As well, it has to match the size particular in the php code: the_post_thumbnail(array(150,100).