How to add WordPress Related Posts Without Plugins

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).

Using excessive plugins can clog your WordPress blog and, at worst, lead to potential ‘breaks.’ Incompatibility issues between plugins and blog slowdowns are common occurrences. Some of the most popular WordPress plugin categories are based around adding “related posts” to a blog. As WordPress lacks a standard feature for displaying related posts, users typically resort to plugins.This article guides you through the process of adding related posts with thumbnails to your blog without plugins, emphasizing simplicity, lightweight design, and accessibility. Let’s get started!

The no-plugin approach

Always prioritize using WordPress’ built-in code and services over plugins for several reasons. The key advantage is independence from third-party plugin developers, preventing reliance on them for your blog’s functionality. Abandoned plugins can lead to outdated and potentially vulnerable software. Avoiding bloated plugins from unofficial sources reduces the risk of site slowdowns or malicious code. This is rare when obtaining plugins from the official WordPress directory.

Getting startedails

The “related posts” feature, like others, is primarily for the main article page (single.php). However, you can use it anywhere within the WordPress loop due to its versatility.

To obtain the related posts, we’ll utilize the post tags assigned to individual articles.

Thumbnails

WordPress now features a built-in thumbnail system, which we’ll need here. To enable it, add this code to your theme’s functions.php file.

1	add_theme_support( 'post-thumbnails');

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

1	add_theme_support( 'post-thumbnails');

2	set_post_thumbnail_size( 100, 50, true );

Important: Create a post thumbnail by selecting “Use as featured image” in the image upload panel.

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($tagsas$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= newwp_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

Two crucial div classes play roles here: “.relatedposts” serves as the main container, while “.relatedthumb” represents each individual thumbnail along with its corresponding link within the “.relatedposts” container. We’ll assume that the width of the post is the standard 640px. The CSS:

.relatedposts {width: 640px; margin: 0020px0; float: left; font-size: 12px;}

.relatedposts h4{font-size: 20px; margin: 005px0; }

.relatedthumb {margin: 01px01px; float: left; }

.relatedthumb img {margin: 003px0; 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 sets post thumbnails to 150px width, requiring four thumbnails to fill the 640px post width, including margins. You can adjust this as you wish; if you want 5 thumbnails, you’ll need a .relatedthumb width of approximately 125px.

Important

How to add WordPress Related Posts Without Plugins

Ensure the WordPress media settings align with the CSS specifications by setting the thumbnail width accordingly. Additionally, it has to match the size specified in the php code: the_post_thumbnail(array(150,100).

Example of output

The related posts should emulate the format employed by the gaming blog DigitalBattle, following the technique outlined in this article.

Conclusion

WordPress offers built-in features that empower us to accomplish many tasks without resorting to third-party plugins in numerous cases. 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 by the extensive capabilities inherent in WordPress out of the box.