Creating a featured post section w/thumbnails

For my first tutorial I will create a featured post section using the new the_post_thumbnail(); function.
This can be implemented on your home page or sidebar file easily.

1) Activating your the_post_thumbnail(); function

Follow our own post here: the_post_thumbnail();

2) Creating a php file for your featured section.

Now that you activated you thumbnail function we can go ahead and create a php file that will be used to call our featured section where we want it on our site.

Why create a php file instead of coding it directly in the theme files?
Well the answer is pretty simple. By doing so, if any changes are necessary in the featured post and you are calling the section at more then one place, you will be able to update them all in one single place.

Create a file called featured.php in your theme.

3) Implementing the right code

For our featured section we will want to create a specific category for it. For the lesson, let’s call it Featured.

<div id="featured_container"</div>
<?php query_posts('category_name=featured&showposts=3'); ?>
 
<?php while (have_posts()) : the_post(); ?>
 
<div class="featured_single"</div>
        <div class="featured_image">
                 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(60, 60)); ?></a>
        </div>       
         <h2 class="featured-title">
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </h2>
</div>
 
<?php endwhile;?>
</div>

Let me breakdown this code for you.
First is the query. This is where we are fetching our posts from our featured category and the showpost function is to only fetch the latest 3.

<?php query_posts('category_name=featured&showposts=3'); ?>

The rest of the code between the query is regular post code. The first one is to fetch the post thumbnail which has a size of 60px by 60px. The second one will return the title of the post. Both of them will be links to the actual post.

4) Calling our file

Final step is fetching the featured.php file in your wordpress theme. This will be done by using an include tag:

<?php include( TEMPLATEPATH . '/featured.php' ); ?>

Save your theme file where you included the featured.php tag.

Note that you will need to implement some new css to make your featured section pretty.
here’s an option you can use:

#featured_container {width: 300px; background: #ddd; border: 2px solid #a1a1a1;}
.featured_single {width:300px; display: block; background: #fff; padding: 10px 15px;}
.featured_image {margin-right: 15px;}
.featured_image a {border: 2px solid #ddd; float:left; display: block; width: 60px; height: 60px }
.featured_title h2 {float: left; display: block;}

Optional

Some people will bring up the fact that these post will be duplicated on the site. To counter this we will have to add variables in our page query and our featured query. You can follow this resource to resolve this:
How to: Use two (or more) loops without duplicate posts

Related information

Wordpress Include Tags codex
Wordpress Loop codex
Wordpress Page codex
Activating Post Thumbnail function