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 Most Commented Posts.

<div id="relatedpost">
<?php
// showposts = show how much recently added post? default is 10.
$recent = new WP_Query('showposts=10'); ?>
<h2>Recently Added Post</h2>
<?php while ($recent->have_posts()) : $recent->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"></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 class="clear"></div>
</div>
<?php endwhile; ?>
</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!