In this article, I will share a step by step guide to using WordPress Custom Fields which have made my life as a front end developer much easier. Note: In WordPress 3.1 – the core team wanted to make the Write Panel cleaner, so they unchecked the view button for Custom Fields. If you don’t see them, then click on the Screen Options Tab (in the top right hand corner), and check Custom Fields.

What are WordPress Custom Fields?

Custom Fields are a form of meta-data that allows you to store arbitrary information with each WordPress post. While this does not sound so powerful, it is the single most powerful component of WordPress posts and content types (aka post types). This meta-data is handled with key/value pairs. The key is a “name” which identifies the specific field thus it is a constant and should stay the same for all posts however you can use the same key multiple times within one post. The value is the information that will be displayed for the field when you call it in your WordPress theme thus it can change with each post.

Now let’s take a look at a very basic example of WordPress Custom Fields in Action. While editing your posts, you see this section called Custom Fields. Scroll down a little, and you should see one. We will use that box to add the post author’s mood at the time of writing. So you will add the name “Today’s Mood”, and then you will add the value which can be Happy, Sad, Excited etc.


Now once you add this field, and save the post. This additional arbitrary information related to your post is stored in the database, and it can be called anywhere within your WordPress theme. So for this very basic example, we will use the very basic way of displaying it in the post. Let’s say, you want to display your mood before the person reads the post, so they know what to expect. Well, then you will open your single.php file and add this code inside the WordPress loop:

<?php the_meta(); ?>

It will display something like this:

Today’s Mood: Happy

Now by using the_meta hook, you will display all fields associated with that post. This is great when you have one field, but if you have 5 different fields that you want to display at 5 different locations, then we will have to use get_post_meta hook. Let’s say you want to display the custom field at a separate location by itself, then you will add the following code within the post loop.

<?php echo get_post_meta($post->ID, 'key', true); ?>

What if you have a custom field like ‘songs’ for the songs you were listening while writing the post? Well you can have multiple ‘songs’ keys and have different values stored from the backend. Then inside your loop paste a code like this:Note: replace the key value to whatever your key is.

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>This post is inspired by:</h3>
<?php foreach($songs as $song) {
echo '<li>'.$song.'</li>';
} ?>

Note the trick here is the third parameter “false”. By changing it to false, we tell the function to return an array of the values for the specified key. This is a very handy trick for displaying multiple key values.

Source: Jeff Starr at Perishable

Extending the Power of Custom Fields

An example of a write panel can be seen in the image below:


The image reflects the current version of the parties and events page located at Howl At The Moon. These write panels essentially can replace the default custom fields layout, so once you are done creating the easy write panel for your client’s theme, they will appreciate how easy it is to update and so will you.

There are some other neat plugins that expands the functionalities of WordPress Custom Fields that you should check out:

Custom Fields Template

More Fields

Meet Launch Digital Marketing

Launch Digital Marketing is a Chicago based digital marketing agency specializing in helping businesses grow their online and web presence.