How to add thumbnails to wordpress posts

Thumbnails give more personality to the post on the home page, index or any other page. It is well established trend - magazine like themes with thumbnails next to the post excerpts.

If you were wondering how to add those thumbnails, you are on the right place.
In this tutorial, i will explain how to create post thumbnails and how to use them.

Note: Post thumbnails can also be noted under the name Post Avatars.

What’s the fuss behind the post thumbnails and how are they added?

Approximately 99% of the wordpress powered sites that use thumbnails, do that with the use of the custom fields.

What are custom fields?

Custom fields are used to add extra data to a post, beside the post’s content, title, tags and categories. You can display thumbnail, video, price, author’s note, source link or almost anything you want.

Well yes, all those things numbered can be used within a post, so why use custom fields?

Let’s say that you want:

• The thumbnail that appears on the home page, not to appear when someone previews the post
• Want to include author’s note, but don’t want the author’s note displayed on the home page
• It could really be anything…

Where are custom fields located?

If you have been using wordpress for a while, you might have noticed them at the bottom of the page when you write new posts or pages. They will probably look like this image (or similar, depending on the Wordpress version you use)

So let’s get started…

What are we going to do?

1. Place the code for the thumbnail within the wordpress loop
2. Assign default thumbnail, which will be displayed alongside the post if no thumbnail is assigned when the post was published
3. Assign thumbnail for a post using the custom fields

Step #1 - Locating the loop, placing and understanding the code, adding default thumbnail to the theme’s image folder

The code must be added between the wordpress loop (it can be the default or any custom loop that you coded out) in the theme’s template files.

So, try to locate this piece of code:

<?php while (have_posts()) : the_post(); ?>
... codes
... codes
... codes
<?php endwhile; ?>

You will have to specify where you want to place code, so it will suit your theme just the way you like.

The code for the thumbnail

<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>

<a href="<?php the_permalink() ?>" rel="bookmark">
<img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" />
</a>

<?php else: ?>

<a href="<?php the_permalink() ?>" rel="bookmark">
<img src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" />
</a>

<?php endif; ?>

What does this code mean?

As mentioned previously, we are going to use default thumbnail, if a unique thumbnail is not specified for the post. That’s why we need to create and if else statement. The src of the image after the if statement is the one that is going to be assigned from the custom field. If nothing is assigned, we proceed to the else statement, where we are going to use a default thumbnail image, which needs to be placed somewhere (image folder) in our theme. For XHTML compatibility, for the alt atribute i used the wordpress function the_title() - you can really use anything you want.

Please note that i placed the thumbnails within anchor tags which when clicked, point to the post itself using the the_permalink() wordpress function. You can of course, exclude that.

Uploading the thumbnail image and inserting it using the custom fields

#1 Login into your wordpress dashboard, and located the Media panel, which is right under the Posts panel.

#2 Add new image, which will be used as a thumbnail.

#3 Open the media library, locate the image, right click on it and choose “Copy image location” - It might say different depending on which browser you use, i am on Firefox.

#4 Open the post where you want to place a thumbnail, or create a new post.

#5 Scroll to the bottom, until you locate the Custom fields panel.

#6 Type in “thumbnail” without quotes inside the Name field (please note that this is case sensitive, as we specified “thumbnail” to be the name used in the custom field, within the code inside the loop) . For the Value field paste the code that we previously copied (the image location one)

#7 That’s it! Publish your post and the thumbnail will be shown. You should use CSS to stylize it per your needs.