Show Related Post Without Using Any Plugin in WordPress

In our previous post we have shared two best WordPress plugin to show related posts. Using excessive amount of plugin may slow down your site performance. Good news is you can easily add this feature manually if you understand a little bit of coding. Don’t worry if you have no coding knowledge because we are going to share the code to show related post without using any plugin in WordPress and you just need to do the copy paste job.

Show Related Post Without Using Any Plugin in WordPress

Here is the code you need to add in single.php file. This query will list out related post by WordPress tags or taxonomies:

[html]

<div id="home-fpost" class="grid col-940">
<h1 class="rposts" align="center">Check Some Related Posts</h1>
<?php
$first_tag = $tags[0]->term_id;
$args=array(
‘tag__in’ => array($first_tag),
‘post__not_in’ => array($post->ID),
‘posts_per_page’=>4, // showing 4 related posts
‘caller_get_posts’=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="<?php if( ++$last_class_counter1 %4 == 0) echo ‘grid col-220 fit’; else echo ‘grid col-220’; ?>">

<?php if( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(240,180); ?>
</a>
<?php endif; ?>
<a href="<?php the_permalink(); ?>"><h6><?php the_title(); ?></h6></a>

</div>

<?php
endwhile;
}
wp_reset_query();
}
?>
</div>

[/html]

We have used our CSS to design the looking. Here is the CSS code. You need to add this in your style.css file:

[html]

.grid {
float: left;
margin-bottom: 2.127659574468%;
padding-top: 0;
}
.col-940 {
width: 100%;
}
.col-220 {
width: 23.404255319149%;
}
.fit {
margin-left: 0 !important;
margin-right: 0 !important;
}
.rposts{
font-size: 2em;
color: #fafafa;
background: #363b3f;
padding: 7px;
border-radius: 7px;
font-family: ‘Georgia’, ‘Times New Roman’, Times, serif;
border-bottom: 3px solid #e14d43;
}
#home-fpost{
padding: 0px 15px 5px 15px;
}
#home-fpost h1{
color:#ffffff;
}
#home-fpost img{
border: 5px solid #ddd;
width: 200px;
height: 150px;
}
#home-fpost h6{
color: #998F8F;
text-align: center;
}

[/html]

If you have CSS knowledge then change color or position according to your requirements. Or if you are facing any CSS problem then please comment below. We will try our level best to help you.

 

 

Author: mytutorialguru

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *