Using Custom Fields To Post Your Images

Published by: Christopher Hennis
October 11, 2008

Ever wonder how Wordpress template / site authors post images directly to the index page with the CSS/XHTML already configured for the image? A lot of “magazine style” authors use this method, and I’ll teach you how.

Let’s start off by taking a quick look at our custom field section..

Custom Field

We have two fields here we’re working with.
The key area holds the trigger, if you will, that we’ll use to later call on this image.
The value area holds the URL of our image.

Now all we need is a bit of PHP code to add to our page so that we can call on and apply our image to our index page. I know you could have figured this out, but I’ll say it anyway; You can use this method to post to any page / listing.

<?php while (have_posts()) : the_post(); ?>
<?php $image = get_post_meta($post->ID, 'img', true); ?>
<?php echo $image; ?>
<?php endwhile; ?>

Let’s examine our code above..

As you can see, our code needs to be inserted into the Wordpress Loop.
We assign the variable $image to the value stored in our custom field for the value of our key.
We then echo our image, which merely displays it, to the screen.

More than likely, you’ll want to display your image within its own CSS class. We simply enclose our php echo function in a line of XHTML, like so..

<?php while (have_posts()) : the_post(); ?>
<?php $image = get_post_meta($post->ID, 'img', true); ?>
<img class="yourimageclass" src="<?php echo $image; ?>" alt="Our Image" />
<?php endwhile; ?>

You could also define an image to use as a default image, just in case we didn’t post an image with our post either by accident or on purpose.

<?php while (have_posts()) : the_post(); ?>
<?php $image = get_post_meta($post->ID, 'img', true); ?>
<?php if(empty($image)) { 
         $image = "http://www.anydomain.com/img/document.png"; 
} ?>
<img class="yourimageclass" src="<?php echo $image; ?>" alt="Our Image" />
<?php endwhile; ?>