Timeless
Published in

Timeless

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.

--

--

--

An inside look into how we approach design, development and user experience at timeless.co

Recommended from Medium

CXL Growth Marketing Review (Week 8)

How To Use Video Marketing For Increased Sales

Zigging, Not Zagging

Why Do We Trust Santa Claus?

Last Minute Holiday Ads Strategy

Personalized Outreach at Scale. Part 1: Personalized Landing Pages

Personalized Outreach at Scale. Personalized Landing Pages

How to Use Free Shipping to Increase your Average Order Value

Email Marketing for Food Tours

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Prasana

Prasana

More from Medium

FAQ´s — Embed Linklist for Blogger, Drupal, Wordpress and Joomla users.

10 Ways to Speed Up WordPress Performance

WordPress custom Dashboard Login Page.

Do you know Must Have WordPress Plugins for 2022?