Method to add WordPress Related Posts Without Plugins

WordPress is a CMS plateform which we use to create our own beautiful website for blogging purpose  or we can also create our online shopping store etc. WordPress provides you so many useful plugins to make your work easy. Now in this article we learn how to add wordpress related post without plugins.

 


You May Also Like:


But first, Why avoid plugins?

Now a days this is a common thing a new wordpress user to install so many plugins in your website infect use few of plugins . Extra use of plugins effect your website and slow down your website. You only try to use important plugins otherwise you code to perform any task.

Here we learn how to add wordpress related post without plugins. It is very easy to display related post without using any plugin. Here we learn two methods to display related post.

  • Related posts based on tags
  • Related posts based on category

Thumbnails

Now WordPress have built in thumbnail system, In order to enable it add this simple code in your function.php in your theme.

add_theme_support( 'post-thumbnails' );

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

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

Related Posts based on Tags

The below code is used to fetches post based on tags. First you add tag each post/pages then this code fetch related post according to your tags.

It checks the tags assigned to current post and then fetches the post linked to those tags.

<?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'=>2, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Advantage:

Most codes on the web cannot be used within the main post loop. Because the related posts are placed right after the main post and above the comments, this code is very helpful. We are saving the current post ID of the main loop and then recalling it at the end of our related posts code.

Usage:

This code is placed anywhere on your single.php it works. But in many websites this is placed right above the comment in the main loop.

Related Posts based on Category

This code is used to fetches post according to category. This code fetch the same category posts. This will improve the on page SEO.

<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

How to change the number of related posts to be shown?

The above code would generate 2 related posts per post, if you want to change the number then you have to modify the code a bit

'posts_per_page'=> 5

The number 5 is here is the number of posts to be displayed.

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.

Here is the CSS of these divs classes

.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;}  

Above CSS show the post thumbnails with 150px width. You can show 4 thumbnails. You can change this width according to your number of thumbnails show in your related post.

Example

Wordpress related post

About The Author

Related Posts

Leave a Reply

Your email address will not be published.