Create Featured Section with Thumbnail In WordPress Blog

Well! If you want to create a featured section in your blog home page to show the post url with thumbnail then numbers of plugins are available that allows you to create a featured section in WordPress blog. There are many features are available in those plugins. But those plugins increase the page load time which is not good for your blog performance.

Here I’ve described an easy, simple and  automated procedure  to create a customize featured section with the post thumbnail for your WordPress blog. Currently, the featured section of this site also has been created by the following way.

The code for the featured section:

At first find the following line in index template (index.php) of your theme.

<?php if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>

Add the following codes before that line:

<div id="featured"> <ul id="geekcell"> <?php $featured_posts = get_posts('numberposts=3&category=34'); foreach( $featured_posts as $post ) { $custom_image = get_post_custom_values('featured_image', $post->ID); $image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg"; printf('<li><a href="%s"><img src="%s" alt="%s" /><div>%s &raquo;</div></a></li>', get_permalink($post->ID), $image, $post->post_title, $post->post_title); } ?> </ul> <div class="clear"></div> </div>

Understanding the code

In the  fourth line of the above code replace category ID by that of your preferred category . You can see the category ID placing the mouse on the category name from your WordPress admin panel.

We have assigned a custom key ( featured_image) to fetch the image from the post. So you’ve to manually add the image source in the custom key for the post from your post editing panel, though we have discussed about an automatic procedure later in this article.

Now add some CSS rules for that featured section in the style.css template. I’ve customized the design adding the following codes in style-sheet. However, you can customize the design as you like.

#featured {
border:2px solid #3D81BB;
height:260px;
padding:4px 2px 2px;
width:627px;
background:none repeat scroll 0 0 #EEFFEE;

}
#geekcell {
list-style:none;
margin:0;
padding:0;
}
#geekcell li {
float:left;
padding:2px;
margin-left:2.5px;
border:1px solid #3D81BB;
min-height:250px;
}
.feat-title {
color:#333333;
font-weight:600;
overflow:hidden;
padding:1px 2px 0;
width:195px;
}
.feat-title:hover {
color:#CC0000;
}

Now the featured section is ready and it will show the latest 3 post from the specified category.

Retrieving the thumbnail images automatically from the post

We discussed earlier that you’ll have to assign the thumbnail image source by a custom key for each featured post. But that is not handy. After searching for some plugin I nothing found such one that really can meet our requirements. So I’ve written a plugin to assign the firs post image to the custom key automatically. Download the plugin TTG Automatic Image Custom Key . After installing the plugin open the options by clicking on “TTG Automatic Image Custom Key” under “Settings” at the left side of your WordPress dashboard. Check in the option “Enable Auto Thumbnail Custom Key” and put the custom key name (here “featured_image”) in the box. Click on “Save”.

Now the first image of the post will be retrieved through the custom key, defined in the plugin option. In both of the cases the first image of your post should 200×200 according the design, I’ve used in this site. If you find any bug then let me know through the comment section.