I was recently asked about using custom fields in WordPress and I thought it was worthy of a quick blog post. I’ve seen custom fields used for many different things from review ratings (e.g “3/5 stars“) to mood messages (“Today I feel like listening to  loud metal and shouting at my housemates“), etc. For this example, let’s use a very simple real case we recently dealt with.

We wanted to have an image appear at the top of the WordPress Page or Post, under the headline but above the text. We wanted the image to be shown whenever we supplied one. Here’s how we implemented it.

First off, we want to put it after the header, but before the title. We did a “View Source” on one of the pages and saw code that looked like this for the headline and content:

<div class="content">
<h2 class="title">Case Studies</h2>
<p>What follows are real life examples of recent work we carried our. We have chosen 3 examples representing vastly different business verticals and company age. If you would like to ask us more about these please contact us.</p>
<p><a class="post-edit-link" href="http://www.oursite.tld/wp-admin/post.php?post=476&amp;action=edit" title="Edit Page">Edit this entry.</a></p>
</div>

So we now roughly what the code that we want to find in the theme looks like. We found it in the page.php file (www.oursite.tld/wp-content/themes/our-theme-name/page.php). Here’s what it looked like:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

Now we’re getting places – we want to add our custom image after the <h2>”the_title()”</h2> header, and before the call to “the_content()”. Let’s build the code we want to add.

First of all, we’ve decided to call our custom field “‘custom-post-image” to reflect its usage. We need to check the custom fields array to find out if that exists using the get_post_meta() function like so:

$themeta = get_post_meta($post->ID, $customfieldkey, TRUE);

Now all we want to do is check if it’s empty (or rather, if it’s not):

if($themeta != '') {}

And finally, if it’s not empty, build the <img> tag based on the custom field contents:

echo '<img class= "custom-post-image" src="';
echo $themeta;
echo'" />  ';

Here’s the complete code – rather simple really!

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php
/*     check if custom-post-image custom field exists,
if it does, display an image, if not, do nothing */
$customfieldkey = 'custom-post-image';
$themeta = get_post_meta($post->ID, $customfieldkey, TRUE);
if($themeta != '') {
echo '<img class= "custom-post-image" src="';
echo $themeta;
echo'" />  ';
}
?>
<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>

That’s the code all done! Now all we need to do is add the custom field, and populate it. That’s very easy to do also. From under the edit box in your Write Page scroll down to the Custom Fields box. Click on “Enter new” (highlighted below):

Now add your custom field using the same name that you used in your code – above we used “custom-post-image”. Select it from the drop-down, then fill in a value for the image location – e.g. “/images/our-example-image.png”:

You’re done:

Enjoy playing with WordPress custom fields!