Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

About tfbox

Adding WordPress 3.0 Post Thumbnail using Custom Fields

Adding WordPress 3.0 Post Thumbnail using Custom Fields

Looking for an alternative method to do WordPress Thumbnails? Well here’s how it can be done with a Custom Field.

Love it? 15
Tutorial Details
Tutorial Type
Estimated Time
5-10 Minutes

In this tutorial I will show you how to add custom thumbnails to your WordPress Loop. There are other alternative methods to doing this but this is the method I prefer. The thumbnail will be shown only in the loop, not on the single.php post page.

What are custom fields?

A Custom Field allows you to enhance your WordPress posts by adding extra data which isn’t there by default. For example you could add such things as:

  • Mood: Happy
  • Reading: Pride and Prejudice
  • Music: Jason Derulo – What if

Adding a Custom Field

First thing’s first you need to create your Custom Field. Start by Creating a New Post then scroll down till you come to the section Custom Fields.

Custom Fields

In this tutorial we will be using the custom field name ‘thumbnail’. When you create your Custom Field just use anything as the value for now as we can change that later.


Creating the thumbnail

Now you have created your Custom Field it will always be available in a dropdown for all future posts. Next Find your index.php file and within that file locate the following lines of code:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>

This is defined as the WordPress Loop. Any code inside that will equal to 1 post. For example if you have your blog to show 12 posts on the front page, the code within the if statement will repeat 12 times.

Within these lines insert the following code

<img src="<?php echo get_post_meta($post->ID, 'thumbnail', true); ?>" />

Now you have told WordPress to output the Custom Field thumbnail‘s data as the image source.


Upload your thumbnail

Now you have done that you will need to upload your thumbnail using the Add an image Icon at the top of the wordpress post.

Upload Image

I prefer to upload from computer but you can do as you wish.

Copy the link URL

Link URL

This is essential as you need to paste the URL into the custom field.

Paste the link URL into the custom field

Custom Field Final

Thats it! Now hit publish (or preview) to see the result. You may want to style it accordingly.

What if I want thumbnails on some posts but others not?

No problem! You may now always want a thumbnail with all your posts, here’s a quick and easy solution to how this can be done.

Create a variable

Add this right after the loop starts:

<?php $thumbnail = get_post_meta($post->ID, 'thumbnail', true); ?>

This will store the value of the thumbnail custom field in a variable called $thumbnail.

Create a conditional statement

<?php if($thumbnail !== '') { ?>
    <img src="<?php echo $thumbnail; ?>" />
<?php } ?>

This will check to see if there is any data being put into the custom variable and if there is it will echo out the content’s within the statement. If there isn’t any data in the thumbnail custom field there will be no HTML output.

You’re done!

Thats it! You should now have your custom field thumbnails in working order. You may want to play around with the styling of it to suit your needs as raw code is pretty ugly.

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

blog comments powered by Disqus