The Importance of Featured Image in WordPress

WordPress post-thumbnail

One of the important features of WordPress since version 2.9 is featured image, or people often mention it as post-thumbnail. With this feature, we can use a picture to represents hundreds or thousands of words in our posting. With this feature, we can now implement the quote that says “A picture is worth a thousands words”. Yes, one representative picture can replace a thousand words.

The post-thumbnail feature in WordPress also has been implemented as standard look-and-feel of many commercial WordPress themes. They make the homepage looks more interesting by displaying or listing the thumbnail of posts instead of the first paragraph or the excerpt of the post. Other usage of this feature can be found in post-carousel, where we can view a virtual conveyor of post images with left and right arrow signs to change the active post images. In summary, the post-thumbnail feature in WordPress can make our blog more interesting and more live for the readers.

For you who uses blog, this post-thumbnail feature has been installed automatically in your blog. All you have to do is just using it. Even now, the homepage of has been configured to show some thumbnail images of chosen posts of the blog hosted there, as you can see from the following image: post-thumbail images

For the users of self-hosted WordPress, you have to upgrade your WordPress version to 2.9 or more recent versions in order to use this feature. Better yet to always keep up-to-date with today’s WordPress version, which has reached version 3.0.1 at the time of writing. In the newest version, this feature is used heavily in the standard theme Twenty Ten.

So, what is WordPress post-thumbnail then?

When we are uploading an image using WordPress image uploader, WordPress automatically will also create thumbnail versions of the image, or smaller versions which sizes you can set from the Media settings in admin screen. By default, the thumbnail size of the image is 150×150 pixels. Other than thumbnail size, there are also medium and large sizes. We can also freely configure the width and height of the generated medium and large versions of the image using admin screen.These various sizes of the image offer us some flexibilities in using the proper version of the image in our post.

When we are configuring the property of the image in media uploader after we successfully upload the image, there is an option to make the image as featured image. If we click the option (or the link), then after dismissing the image uploader screen we should see the image in the featured image box in the editor area (more precisely on the right hand side of the editor area). The following image shows the featured image box in the editor area:

Featured image box in WordPress editor

Mark Jaquith of WordPress has a very details explanation about how to use post-thumbnails feature in WordPress >2.9. You can read his posting about it here:

The size of thumbnail image can also be specified from theme we are using. The theme can call the following function in functions.php to specify the thumbnail image size:

// Set the post thumbnail size by 150x150 pixels.
set_post_thumbnail_size( 150, 150, true );

By calling the function above, all uploaded images that has size more than 150×150 pixels will also be made its 150×150 pixels thumbnail version. Of course we can freely change the number 150 with our our number choice to generate the image in the chosen size.

Usage Example: YARPP Template

One example of featured image usages can be implemented in the YARPP (Yet Another Related Posts Plugin for WordPress). YARPP is one of popular related posts plugins that we can use to list all related posts inside the current post. By default, YARPP will display all related posts as a list of post titles with its link, so readers can click the link and read the particular related post. YARPP also provide template files, which we can edit freely to format the appearance of the related posts list. In this section, I will show you how to implement featured image in the YARPP template.

It should be more interesting for our readers to show them list of images instead of just links. By editing YARPP template file, we can put PHP code to freely show and format the post thumbnail images of related posts. There is a WordPress function called the_post_thumbail(); to accomplish that goal.

The following source code is taken from my yarpp-template-example.php which displays related posts in YARPP as post thumbnails:

<?php if ($related_query->have_posts()):?>
<div class="yarpp-post-container">
   <h3>Related Posts</h3>
   <div class="yarpp-post-body">
   <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
   <div class="yarpp-post">
      <?php $title = get_the_title(); $permalink = get_permalink(); ?>
      <a href="<?php echo $permalink; ?>" rel="bookmark">
         <?php the_post_thumbnail( 'post-thumbnail', array( 'title' => $title, 'alt' => $title ) ); ?>
      <div class="yarpp-title">&nbsp;</div>
      <div class="yarpp-link-container">
         <a href="<?php echo $permalink; ?>" title="<?php echo $title; ?>" rel="bookmark" class="yarpp-link">
            <?php echo $title; ?>
   <?php endwhile; ?>
<?php endif; ?>

Of course we have to add some CSS definition to make the appearance more tidy. The following source code shows example CSS which I use in the code above:

.yarpp-post-container {
   margin-bottom: 20px;
   clear: both;
   overflow: hidden;

.yarpp-post-title {
   font-size: 1.4em,

.yarpp-post {
   float: left;
   text-align: center;
   width: 168px;
   height: 170px;
   padding: 5px 5px 5px 5px;
   position: relative;

.yarpp-title {
   position: absolute;
   padding: 2px 5px;
   top: 119px;
   overflow: hidden;
   height: 40px;
   background: #000;
   opacity: 0.6;
   width: 140px;
   margin-left: 9px;

.yarpp-link-container {
   position: absolute;
   padding: 2px 5px;
   top: 119px;
   overflow: hidden;
   height: 40px;
   width: 140px;
   margin-left: 9px;
   z-index: 1000;

a.yarpp-link {
   color: #fff;

a.yarpp-link:hover {
   color: #fff;

I will explain how the code and CSS definition above work on future post.

And, the following image is a sample of the result of YARPP template that I have edited above:

Result of post-thumbnail

Of course, this is just a simple usage of how we can leverage the featured image or post-thumbail in WordPress. And you can be more creative and imaginative in using the feature to enhance the appearance of your blog.

Interested? Wish you luck for trying!

Related Posts

YARPP Template with Post-Thumbnails
This entry was posted in WordPress and tagged .

6 Responses to The Importance of Featured Image in WordPress

  1. Pingback: Tweets that mention The Importance of Featured Image in WordPress | --

  2. Joey says:

    Thank you for the tutorial. I have implemented your code using my YARPP to my template. It is quite a sight and much better than normal links. I appreciate it.

  3. Terrific tutorial. The YARPP template is especially useful.

    Do you know if/how the featured image supports external images (e.g., hosted on Flickr)? I use my Flickr hosted images throughout my blog.

    If I could find a solution where I could enter a Flickr photo URL as the “Featured Image” and the image could be dynamically resized (or the system could use the various Flickr photo sizes), that would be ideal.

About Me

I am a professional developer and designer for the following systems: WordPress, Magento, and OpenCart. You can hire me to do overseas works related to those systems.
Hire me | Donate / Payment | Testimonials

Recent Comments