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:

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:

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:

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:

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:[caption id="attachment_1248" align="aligncenter" width="553" caption="Our custom field output beneath a post"]

[/caption]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:

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

And the final result would be something like this:

More about custom fields

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