Add Thumbnails to Wordpress with Custom Fields

What Are Custom Fields?

If you're reading through this article, there's a possibility you've never heard of Custom Fields (or maybe you just haven't seen a use for them yet).  Essentially, all a Custom Field does is allow you to add extra pieces of data to individual Wordpress posts that otherwise aren't there by default.  In other words, along with things like the Post Title, Entry, and Categories, you could add:

• Thumbnail
• Lead Image
• Price (perhaps each of your posts is a product that you need a price label for)
• Source Link

Sure – but you COULD also just put those in the post… right?

Of course, but when you do that, you're stuck with your default posting format and styling.  What if you want to have a Thumbnail for your post, but instead of the thumbnail appearing inside of the post entry, you only want that thumbnail to appear on the front page of your blog – and using a completely different style than it would in your entry?

This is where Custom Fields come into play.  They allow you to add as many additional fields as you like, all of which can be used anyway you want to use them.

Adding a Custom Field

The first step to making custom fields work is to actually add one to your Wordpress Blog.  To do this, simply start making a New Post, and scroll down the page until you see "Advanced Options".  Under this heading, you should see something like, Excerpt, Trackback, and Custom Fields.

To add a Custom Field for a Thumbnail, just fill in the Key with "Thumbnail".  For the Value, post the full URL of the thumbnail you would like to use.

Click Add Custom Field, and it will apply to that post.

Creating Thumbnails for your Posts

Now that you have a key called Thumbnail, you'll never have to create that key again.  It's stored so you may select it from the dropdown box for now on.

In each post that you'd like to have a thumbnail, you'll have to go to the Custom Fields area of yourWrite Post page, select "Thumbnail", and fill in a value with the path to the thumbnail you'd like to use.

Now, let's insert this thumbnail into your post listings on the front page.

In your theme files (I am assuming that you have a basic understanding of modifying themes in Wordpress), open up index.php.  Find these lines:

view plaincopy to clipboardprint?

1. <?php while (have_posts()) : the_post(); ?>  
2. ...  
3. <?php endwhile; ?>  

The code between these lines is the output for each individual entry shown on the front page of your Blog.  So, let's say you limit your blog to 10 posts per page, this is the code the repeats 10 times to display those 10 posts.

Within these lines, we want to add the following code in order to show our newly created thumbnails:

view plaincopy to clipboardprint?

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

This outputs an image, using the Value of the Key, Thumbnail, which we've inserted into our post.  It can be inserted ANYWHERE within the while loop, allowing you to float it to the left or right of the header and entry, display it above an entry, below, whatever you want.

Great, but I want this to show up In the Individual Post Too

That's possible as well, using the same code as shown above.  You just need to make sure you insert the code that displays your thumbnail in the while loop.

Maybe you want to display a different image on your post page, such as a larger or smaller version of your thumbnail. At Tutorial9, we often times have Lead Images at the top of our posts which are much larger than our thumbnails.  This is very easy to achieve as well.

On your Write Post page, add another Key to your Custom Fields called "Lead Image", with a value pointing to the URL of your lead image.

Now, in your single.php theme file, insert the following code inside of the loop:

view plaincopy to clipboardprint?

1. <img src="<?php echo get_post_meta($post->ID, "Lead Image", true);?>" />  

Simple!

Only Show a Thumbnail or Lead Image on Some Posts

Maybe some of your posts don't require thumbnails or lead images.  We don't want to output unnecessary code…  With a few additional lines, we can fix this problem.

First off, we'll want to put this right after the loop starts:

view plaincopy to clipboardprint?

1. <?php $Thumbnail = get_post_meta($post->ID, 'Thumbnail', $single = true); ?>  

This won't output anything in HTML, but will store the value of our Thumbnail field in a variable called$Thumbnail.  If the field was left empty during the post creation process, this variable will also be empty.

Next, we need to modify our output a bit:

view plaincopy to clipboardprint?

1. <?php if($Thumbnail !== '') { ?>  
2.   
3. <!-- Any special styling you might have for posts with thumbnails... -->  
4.   
5. <img src="<?php echo $Thumbnail;?>" />  
6.   
7. <?php } ?>  

What this does, is checks to see if the Thumbnail variable is empty.  If it isn't empty, the code will output the thumbnail image.  However, if it is, nothing will be shown here.

After you're finished modifying your code, upload, and test to make sure thumbnails are being displayed properly.