LoginSign Up

How to add WordPress Related Posts Without Plugins

প্রোগ্রামিং 11 months ago 4 Aug, 2019 at 5:08 am 168
Linkedin Pint
How to add WordPress Related Posts Without Plugins

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.

 

Thumbnails

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

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
2
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

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 code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="relatedposts">
<h3>Related posts</h3>
<?php
  $orig_post = $post;
  global $post;
  $tags = wp_get_post_tags($post->ID);
  
  if ($tags) {
  $tag_ids = array();
  foreach($tags as $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 = new wp_query( $args );
  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>
  
  <div class="relatedthumb">
    <a rel="external" 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

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:

1
2
3
4
5
6
.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; 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 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_post_thumbnail(array(150,100).

Example

The related posts should appear something like this, as used by gaming blog DigitalBattle (which uses the exact technique described in this article):

collected

11 months ago

Abdullah sk
I,m article writer, part time job in kokilbd
Like - Dislike Votes 0 - Rating 0 of 10

Be the first to comment

Leave a Reply

Your email address will not be published.


*