WordPress Wednesdays: A quick introduction to WordPress custom fields

Geek Factor: 3

For us at Stem, WordPress Custom Fields have been an unsung hero for using WP as a CMS rather than simply a blogging platform. In this week’s WordPress Wednesday, we’ll be doing a quick introduction of Custom Fields.

So, what are they?

Custom Fields are basically ‘meta data’ that can be added to posts, pages, or any custom post type. You can add as many custom fields to a post as you choose. The custom field information is stored in key/value pairs; the ‘key’ is basically the name of the custom field.

A basic example using custom fields:

Let’s say you have profile pages on your website, and in those profiles you’d like to display each person’s role within the organization. You would want to create a custom field with the key ‘Role’; on each of the profiles, you would then be able to assign different values to that field.

Beneath the editor, there is a section titled ‘Custom Fields’. To the left, there is a column titled ‘Name’ (the key); on the right is a column titled ‘Value’.

To add your first custom field, click the ‘Add New’ link at the bottom of the ‘Name’ column (once you have added a few, you will also have the option of selecting one of the previous keys from a dropdown). Enter the name of your ‘key’ in this field (in this case, Role).

To add the value, simply fill in the field in the Value column that matches up with the Role key.

Now, to display this content, you just need to use WordPress’s the_meta() function in your template; the basic output for this tag is as follows:

[html]

[/html]

With a little styling, you can simply tweak the unordered list to output as follows:

Role: Associate

Now, a slightly more complicated example:

It’s unlikely that you’d bother to use custom fields to display just one line of information for a profile; however, it can become extremely helpful when you need to display many (like here or here), or even retrieve profiles based on their meta data (like Practice Areas or Offices).

It’s possible to display different custom fields in different spots in your theme by using WordPress’s get_post_meta() function. Typically you would call the function and nab a specific meta value by citing its key, like so:

[php]
ID, “Role”, true);
$phone = get_post_meta($post->ID, “Phone”, true);
$fax = get_post_meta($post->ID, “Phone”, true);
$mobile = get_post_meta($post->ID, “Fax”, true);
?>
[/php]

Then you can output the contents of each of the custom fields by echoing the variables you stored them in; this is especially helpful for fields like ‘mobile’, which may not have a value for every profile; in those cases, you can first check if the variable is populated before outputting anything:

[php]
Mobile: ‘.$mobile;
?>
[/php]

You could also store this exact same information, but rather than creating a separate field for each type of phone number, use multiple copies of the ‘Phone’ custom field:

The get_post_meta() function accepts three variables: $post_id, $key and $single. By specifying ‘true’ as the final variable, we are only returning the first instance of a custom field, whether or not there are several. By instead using ‘false’ (like in the ‘Phone’ example below) we return an array:

[php]
ID, “Role”, true);
$phone = get_post_meta($post->ID, “Phone”, false);
?>
[/php]

When outputting the values of the ‘Phone’ custom field, we would now use code like a foreach() loop to output each phone number:

[php]
Phone: ‘.$phone;
}
}
?>
[/php]

This post is just scratching the surface of what you can do with custom fields on your WordPress site — stay turned to future WordPress Wednesdays posts to learn more about how this nifty feature can make your life a little easier.

Do you use custom fields on your WordPress site? Share some examples in the comments below!

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.