Using WordPress Custom Fields

Using WordPress as a CMS often for client sites I use custom fields perhaps quite a bit more than the regular WordPress user. Still, I’ve received quite a few requests to write about the use of custom fields in WordPress, so in this post I’ll cover the ins and outs of WordPress custom fields.

What Are Custom Fields?

I realize some WordPress users may not even know what custom fields are so let me clarify. The custom field panel can be found on the New/Edit post screen under the conspicuous title, “Custom Fields.” That panel is rather cryptic if you’ve never used it before, but custom fields are really simple to use and incredibly useful. A perfect example of how they can be used is the header image for each post on this site.

The Custom Field Panel

As shown in this post’s header image, the custom fields panel has two form fields, one called “Name,” and the other “Value.” Name is how you’ll reference this custom field when accessing it in the code and the value is, well, whatever you want it to be. As an example, the post header images on this site use a name of “image” and a value of “post-image-name.jpg” (this image file name).

Depending on whether or not you’ve ever used custom fields before, your custom field panel may not look exactly like the one above. Instead you may see something more like this:

Enter a new custom field in WordPress

Enter a new custom field in WordPress

This allows you to enter a new custom field if you haven’t entered any before or if you already have existing custom fields and click the “Enter New” button as seen in this post’s header image.

Adding a New Custom Field

So now that we’re familiar with the custom field panel, let’s use it.

Since I’m currently working on a WordPress Real Estate blog, we’ll create a custom field to display the property address at the bottom of the page, but you can use this technique to add just about anything to a post.

Creating a Property Address Custom Field

So the first thing we want to do is type the name by which we want to refer to this custom field in the “name” field of the custom fields panel. In this case I’ll use “property_address”. You can actually use anything you want and it can even have spaces in it, although I prefer to avoid spaces, replacing them with underscores, just in case that changes in future WordPress releases.

Next we want to add the property address to the “value” field. Keep in mind that if you want to add any formatting inside the custom field (like line breaks for instance), you’ll have to add the HTML code directly to the field itself here because we’ll be pulling the data out of the field directly and WordPress won’t automatically add formatting like it will when writing the actual content for a post. An example of that can be seen toward the end of this post.

Here’s what it looks like before we save it:

Adding a Custom Field Value in WordPress

Our new Custom Property Address Field

Now that we’ve entered the name and value, click the “Add Custom Field” button to apply our changes.

Now save/publish the post.

Editing Our Post Template to show the Property Address

Now that we’ve created our new property address custom field, we have to tell WordPress where we want that information displayed.

For this example, I’m going to add code to the single.php theme template to first check if that property address was entered for the post being shown, and then to display that address if it exists.

So, open up single.php and look for the code that displays the post content, which is something like this:

<?php the_content(); ?>

Your the_content() function may contain something inside the parentheses and that’s fine…we’re just looking for that line.

Now immediately after that line we want to add the following code:

<?php
$property_address = get_post_meta($post->ID, 'property_address', true);
if($property_address != '') echo "<strong>Property Address: </strong>" . $property_address;
?>

get_post_meta()

The first line of that code pulls the custom field with the name “property_address” and assigns it to the $propert_address variable using WordPress’ built-in get_post_meta() function.

That function takes up to three parameters: The first is the post ID number. Since we’re adding this code inside the loop, we can use $post->ID to get the post ID number. If you’re using this code outside of the loop, the $post object won’t be set so you’ll have to enter the ID number of the post you want to use here. The second parameter is the name of the custom field we want, in this case, “property_address”. And the third parameter tells WordPress to return the value of that custom field as a string, rather than inside an array.

The second line uses an if-statement to check if the $property_address variable contains anything besides an empty string. If there’s something there, we then echo “Property Address:” in bold, followed by the contents of the $property_address variable containing our property address.

The Final Result

The final result, using my free WordPress theme, This Just In!, looks like this:

WordPress Custom Field Output

Our custom field output beneath a post

That’s all there is to it.

Some things to remember about custom fields

You can use custom fields in this way for just about anything. You should remember that the custom field is pulled as plain text exactly as you entered it, so if we wanted to display the address on two lines, like it would be shown on a letter for example, we’d have to add <br /> tags into the custom field when creating it. You’ll probably want to output the custom field inside of a table in this case so that the second line of the address wraps below the first line properly. The code to display that would look something like this:

<?php
$property_address = get_post_meta($post->ID, 'property_address', true);
if($property_address != '') {
echo "<table>";
echo "<tr><td><strong>Property Address: </strong></td><td>" . $property_address . "</td></tr>";
echo "</table>";
}
?>

In this case, our custom field panel would look something like this:

HTML formatting in our custom field

HTML formatting in our custom field

And the final result would be something like this:

The final result with HTML formatting

The final result with HTML formatting

More about custom fields

Smashing Magazine has a great post about other uses for custom fields if you’re interested in learning more.

image_pdfimage_print
12 Comments
  1. Can you let us know if this is the same for pages?

    Some time ago I wanted a Page list that would allow a description field and would reference it from the code but I could never get it to work and ended up hard coding the menu.

  2. man, wordpress has such beautiful, simple, elegant themes, and you are claiming to be a wordpress “HACKER”.

    Why then is your website so ugly and un-navigable ?

    You should consider hiring a designer to make your site more “pleasing on the eye”.

    Seriously !

    • Chad, give the guy a break. What he thinks looks good is his business. Don’t be such a dolt.

    • Hey Chad, thanks for the input, but maybe it would be more productive to give me an idea of what you think makes the site un-navigable.

      I’m open to constructive criticism, but not big on insults.

  3. hi, great post.
    Do you know if its possible to add a custom field to the quick edit of a post?

    • Anything’s possible. It’s really out of the scope of this article though. I’ll add it to the list of possible future posts.

  4. John – I recently used custom fields to add a series of images to a slide show. Once completed, I realized I have no easy way to reorganize the sequence. For instance, if I add another image, it goes on the end, though I might want it to show up third. Ideas?

    • @Ray: Since custom fields are essential key=>value pairs, there’s no elegant way to do that.

      A quick search on Google didn’t yield any obvious results.

      One option would be to add a numeric index to the image name and then parse that index before displaying the image, reordering the images by that index.

      It depends on how you’re getting those image names, but if you have an image like “my-first-image.jpg”, you could enter “1_my-first-image.jpg” in your custom field.

      When you get those image names, pull off everything up to the underscore using something like this:
      $image = "1_my-first-image.jpg";
      $pos = strpos($image, "_");
      $index = substr($image, 0, $pos);
      $image_name = substr($image, $pos + 1);
      echo $index . " " . $image_name;

      Something like that would get the index off the front of the image name, then get the image name. You could assign the result to an array, then loop through the array using foreach to print the img string.

  5. Hi, Wonderful easy to understand post. Can the custom field be used to bring the author info and link to the author’s other posts along with the image of the author in a multi-author site? So with what I understand, I need an author name and value for each author and then code each author custom field into the single template. Am i right?

  6. Hi John, I’m looking answer for custom field and the answer come from the past.
    How to make a neater table? How to add background colors and borders, I’ve tried this but I can only code big error on screen, can you help me?
    And should I used plugin so that the same custom fields can be reused in many post without setting up again?

    Thanks in Advance

Leave a Reply

Address

Razorlight Media
Phone: 513-549-7355
Fax: 866-377-4331
Url:
cash, check, credit card, invoice, paypal
2207 Kemper Lane
Cincinnati, OH 45206
700 West Pete Rose Way, Suite 554
Cincinnati, OH 45203