Justin Tadlock

WordPress Custom Fields: Adding Images To Posts

Using WordPress custom fields to add images to your posts like DoshDosh.com

This tutorial will explain how to add images to your posts using WordPress custom fields. It is the third part of the Using WordPress Custom Fields Series. This tutorial assumes you at least know what XHTML, PHP, CSS, and WordPress are. Plus, you should know how to input a custom field “Key” and “Value” and upload images.

The example I’m basing this tutorial off of is Dosh Dosh. If you notice, he adds an avatar-sized image to each post. I don’t know whether he uses a technique like I’m about to explain or adds each image to the “Post” box.

Why use custom fields to add images to posts?

There are two main reasons for this. Typically, when a blogger adds an image to a post, he or she will simply upload the photo and add the picture in the posting textarea.

  1. You can display images when using excerpts.
  2. You can pull the image out from just about anywhere and use it how you like.

Most WordPress theme archive, category, and search templates display post excerpts, and even some home pages. Why not display a custom image for each post? This technique will allow you to do that.

If you take a look at my WordPress Themes page, you can see how I pull an image out of a custom field. Of course, I created a plugin with some added features for that particular page. But, it shows you how information can be pulled out of custom fields to be used elsewhere on the blog.

Upload images and create Keys and Values:

The first thing you need to do is upload an image. For the sake of this tutorial, I will assume these images are thumbnailed-sized, such as ones that you might see on a message board or at Dosh Dosh. You can, of course, do as you like when it comes to sizing your images.

Now, create a Key named “Thumbnail.” Give it a Value of the URL of the image you uploaded (ex: /wp-content/uploads/image.gif).

Create a key named “Thumbnail Class.” Give it a Value of “thumbnail-class” or anything that you can use to style in your stylesheet (style.css).

You can also create alt text for your image. This is optional. Create a Key named “Thumbnail Alt” with a Value of “Describe your image.” If you don’t do this, the alt text will default to the post title.

Now, for the code:

You can use this code in any of your templates (index.php, single.php, category.php, archive.php, etc.). Open one of those files in your text editor of choice (I’m editing index.php in Notepad).

After:

if(have_posts()) : while(have_posts()) : the_post();

Add this:

// check for thumbnail
$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
// check for thumbnail class
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
// check for thumbnail alt text
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);

Basically, this just retrieves your custom field information for each post that will be displayed by the loop. When it retrieves the custom field Key and Value, it assigns it to a PHP variable. This is important because it’ll make the coding later cleaner and we only have to retrieve the information once for each post. (Also note that this is the technique I’ll use on later tutorials, unless I come up with an even better way to accomplish this.)

Before (in the same file):

<?php the_content();  ?>

or

<?php the_excerpt();  ?>

Add this code:

<?php // if there's a thumbnail
if($thumb !== '') { ?>
    <p>
    <img src="<?php echo $thumb; ?>"
    class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
    alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
    />
    </p>
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>

This code outputs the image right before your content is displayed. Pretty simple, huh? You can obviously add other things like width and height using custom fields or set a width and height for all images. What I will show you next is how to do this with your “thumbnail-class” instead.

Open style.css file from your theme folder and add this code:

.thumbnail-class {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 15px 0 0;
    }
.left {
    float: left;
    margin: 0 15px 0 0;
    }

The class “left” is the default in case you forget to input a “Thumbnail Class” custom field Key. Obviously, how to style your image is up to you. Play around with it, have some fun, and see what you can come up with. You can also do away with the entire “Thumbnail Class” custom field and just input the class in the XHTML. I prefer to leave “Thumbnail Class” open, in case I want to style or align individual thumbnails differently.

That’s pretty much it. You can do a lot with this. For example:

  • Add a link around the displayed thumbnail to a larger image, another page, or the single.php page.
  • List posts by just their image.
  • Creat kick-ass archive and search pages.

As I’ve said before regarding custom fields, their only limit is your imagination. Follow this tutorial series by subscribing to the feed. If you have anything you would like to see done and think it might be possible with custom fields, let me know because I’m always looking for more things to play around with.