How To Add Image Thumbnail Using Wordpress Custom Fields

Over the past few days, I have been toying around with the idea of setting up WordPress as the CMS for a web site directory. One thing I wanted to do with my personal finance directory is to show a thumbnail image of the featured site when I am on the main page, category pages, tag pages, and search result pages. You can see how the directory looks below:

As you know the thumbnail feature is not common in free WordPress themes, so I had to do some work to get it working. Now, let’s take a look at what we need to do to enable this feature.

How To Add Thumbnail Image To WordPress Template

1. Modify the main page (index.php) to show image

Note you could make the same changes to archive.php and search.php to get the same result. Note, I added the following code right under the title inside The Loop:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img style="float:left;margin: 0 10px 10px 0;border:1px solid #000;height:90px" src="/wp-content/uploads<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>” alt=”thumbnail” height=”90″ /></a>

There are two parts to this code, the <a> tag and the <img> tag.

• The <a> tag is the same as the one on the post title. I am adding it here so that users can click on the image to get to the full post.
• The <img> tag has a couple of components:
  • The style attribute tells the browser to float the image to left, add some white space around the image, surround it with a black border, and make it 90 pixels high.
  • The src attribute tells the server to grab the image from /wp-content/uploads directory with the rest of path and filename information coming from a custom field called “Image”

2. Add custom field called “Image” to each post

Now, when you are writing a post, you need to add a custom field called Image to the post with a value that reflects the rest of image path and filename information. In this example, we will use the same image that is shown inside the post itself. To do this:

• Upload an image to the post
• Switch to HTML mode and take note of the image path (see image below) — note the image path is /wp-content/uploads/2008/07/annualcreditreport.png in this example.

• Next add the custom field called Image. Note that we already defined some of the path information in the template — i.e., /wp-content/uploads. So you are adding the rest of the path information and filename in the value field — i.e., /2008/07/annualcreditreport.png. (see image below)

• Save and you’re done!

That’s it! Your blog should start showing thumbnail image next to each post once you completed these two steps.

Things to consider

Right now, if the Image custom field is not defined, the template will show missing image error. With a bit of PHP programming using if-then statement to detect the if the custom field is defined or not, you could show the thumbnail only when the Image custom field is defined.

This article was featured in:

• The WordPress Blogging Guide Carnival at Create A Blog Guides