Blog-WordPress Tips, Tricks & Other Tutorial

Add Related post in single.php With Thumbnails

posted by Solaiman in Tips And Tricks, Wordpress

In this tutorial, I will show you how to Add Related Post With Thumbnails and You can easily change any style.

You can paste the below code once in your functions.php file

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'related', 175, 125, true ); //related

}

function excerpt($limit) {
$excerpt = explode(' ', get_the_excerpt(), $limit);
if (count($excerpt)>=$limit) {
array_pop($excerpt);
$excerpt = implode(" ",$excerpt);
} else {
$excerpt = implode(" ",$excerpt);
}
$excerpt = preg_replace('[[^]]*]','',$excerpt);
return $excerpt;
}

Paste the following code in single.php where you require to display related posts:

<?php
$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),
'orderby'=> rand,
'showposts'=>3, // 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><div><h3>'.__('Related Posts','mythemeshop').'</h3></div><ul>';
while( $my_query->have_posts() ) {
++$counter;
if($counter == 3) {
$postclass = 'last';
$counter = 0;
} else { $postclass = ''; }
$my_query->the_post();?>

<li>
<a rel="nofollow" href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<span>
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('related', 'title='); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/relthumb.png" alt="<?php the_title(); ?>"  width='175' height='125' />
<?php endif; ?>
</span>
<div>
<?php the_title(); ?>
</div>
</a>
<div>
<?php echo excerpt(10);?>
</div>
</li>
<?php
}
echo '</ul></div>';
}
}
wp_reset_query();
?>

Usage: Place this code anywhere you like in your single.php and it will work. But most of the time it is placed right above the comments in the main loop.

 

Paste the following code in style.css for styling:

.related-posts {
background-color:#FFF;
clear:both;
float:left;
padding: 20px 0;
}
.postauthor p{padding-top:0px;}
.related-posts ul {
margin-left:0;
padding:0;
margin:0;
overflow: hidden;
margin-top:0;
}
.related-posts h5{line-height:20px; padding-left:80px; color:#919191; text-transform:uppercase; font-size:13px;}
.related-posts h3 {
font-size: 18px;
margin:0;
color: #393d46;
border-bottom: 5px solid #00A8FF;
padding:5px;
background:#00A8FF;
}
.relatedthumb img {
width: 175px;
height: 125px;
margin-top: 5px;
margin-bottom:0;
border-radius: 5px 5px 5px 5px;
box-shadow: 1px 1px 4px 2px #999999;
padding: 3px;
margin-left:4px;
}
.postauthor-top {
margin-bottom:10px;
}

.related-posts ul li p {
color: #393d46;
font-size: 12px;
}
.related-posts li {
width: 28%;
float: left;
list-style:none;
margin-right: 5%;
min-height: 100px;
}
.rthumb {
float: left;
margin-bottom: 5px;
}

.related-posts .last {
margin-right:0;
}
.tags {
margin: 10px 0 10px 0;
width: 100%;
float: left;
}
.tags a {
margin-left: 5px;
}

.related_post_title {
font-size: 17px;
color: #205A84;
width:180px;

}

.related_post_title:hover{
font-size: 17px;
color: #000;
text-decoration:underline;
}

.related_post_excerpt{
font-size:16px;
}

The following two tabs change content below.
Solaiman

Solaiman

CEO & Co-Founder at WebDGallery
I am very sincere and an expert programmer with great communication skills and great web development skills. After 3 years of experience, I am expert in Wordpress themes Development,PSD to HTML, HTML to WordPress, Responsive Web Design, etc.

Leave a Comment

Menu

Click to close sidebar.