Php Tutorials

The Beginning

First of all open your “single.php” file from your theme folder.

Creating Codings

Copy & Paste the below code where you want to show the Related Posts.

<div id="relatedpost">
<?php
$backup = $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, // get related post by related tags
'post__not_in' => array($post->ID),
'showposts'=>5, // Number of Related Posts
'caller_get_posts'=>1);
$my_query = new wp_query($args);

if( $my_query->have_posts() ) { echo "<h2>Related Posts</h2>"; //// Show the Related Post Heading
while ($my_query->have_posts()) {
$my_query->the_post();
$avatar = get_post_meta($post->ID, 'thumbnail', true); /// <-thumbnail is the name of a custom field ?>

<div class="relatedpost">
<div class="avatar"><img src="<?php echo $avatar; ?>" width="60" height="60" alt="Final Image"></div>
<div class="rtitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
<div class="desc"><?php the_excerpt();?></div>
</div>

<?php }}} $post = $backup;	wp_reset_query();?>
</div>

Understanding $avatar = get_post_meta($post->ID, ‘thumbnail’, true);

‘thumbnail’ is the name of a Custom Field, in which we save the url of the avatar look at the below example:

Creating Css Style

Now open your theme “stylesheet(style.css)” and Copy & Paste the below css code in the stylesheet.

#relatedpost {
	background-color:#FFF;
}
#relatedpost .relatedpost{
	margin:4px;
	padding-bottom: 5px;
	border-bottom:1px dotted #CCC;
	margin-bottom:8px;
	margin-top:5px;
}
#relatedpost .avatar{
	float: left;
	margin-right:6px;
    border: 2px solid #C9C9C9;
}
#relatedpost .rtitle{
	font-size:16px;
	color: #333;
	font-weight:bold;
	letter-spacing:0px;
	line-height:16px;
	padding-top:1px;
}
#relatedpost .desc{
	font-size:12px;
	line-height:19px;
	color: #666;
}

Thats it we are finished!