Show category wise related item/post without using any type of Plugins, Just paste simple code in your theme, Then SAVE and take advantage.
Code
<?php
$catArgs = array(
'category__in' => wp_get_post_categories($post->ID),
'showposts' => 3,//display number of posts
'orderby' =>'rand',//display random posts
'post__not_in' => array($post->ID)
);
$cat_post_query = new WP_Query($catArgs);
if( $cat_post_query->have_posts() ) {
echo '<div id="related_posts" class="clear" ><h3>You May Also Like</h3><ul>';
while ($cat_post_query->have_posts()) : $cat_post_query->the_post(); ?>
<div class="related_itemspl">
<div class="related_thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_post_thumbnail( 'small-thumbnail'); ?> <?php the_title(); ?></a>
</div>
</div>
<?php endwhile;
echo '</ul></div>';
wp_reset_query(); } ?>
How to Do
Guys! i have share with you this code. I found this code on wphats.com‘s website. So follow simple steps then show related items –
- Open your active theme folder.
- Open single.php or open where you want to show related item.
- Paste code Then SAVE now.
Hope this code work perfectly. Have another type of tool so go there.
CSS Code
I am share CSS code of my website, If you do not like so change this CSS code according to your choice.
#related_posts ul {
width: 100%;
margin-top: 1.4em;
margin-bottom: 1.8em;
overflow: hidden
}
.related_itemspl:first-child {
margin-left: 0
}
.related_itemspl {
height: auto;
background: #e9e9e9;
width: 32.3%;
overflow: hidden;
margin-left: 1.5%;
padding: 1%;
float: left
}
#related_posts img,
.related_thumb {
width: 100%;
clear: both;
overflow: hidden
}
.related_thumb {
height: auto;
text-align: center
}
.postdbreadcrumb,
.postview {
text-align: left;
height: auto;
overflow: hidden
}
.related_thumb a {
clear: both;
line-height: 22px;
text-decoration: none;
color: #000;
display: block
}
#related_posts img {
border-radius: 4px;
height: 120px;
margin-left: auto;
margin-right: auto
}
.clear {
height: auto;
font-weight: 400
}
.clear ul {
margin: 0;
padding: 0
}
