How to Create and Use Custom Fields in WordPress

Posted in Performance by WP Engine

Last updated on February 23rd, 2023

Editor’s note: This article was written by Abbey Fitzgerald a UX software engineer and web designer who loves the art of crafting code.

WordPress custom fields are a great way to expand upon the typical post or page content on your site. They are pieces of metadata that are attached to a post or page on your WordPress site, which means that by using this method, you are able to add additional information of any kind to your content.

Organized in a key/value format, custom fields are used for adding data across multiple posts or pages. The key is a name that provides consistency and identifies the specific field, such as “Item.” This is always the same. A value is the information that will be displayed in the field. The value will be different across posts, depending on what information is entered.

Adding Custom Fields to the Post

The following steps will show you how to use custom fields in your posts. If you would rather use them on pages, the same ideas will apply but will have to be implemented in template files that are responsible for building pages rather than posts.

1. Go to the post editor screen and check “Custom Fields.”

2. Find the Custom Fields box as part of your post editing. When you are on a post page, you will see a new section at the bottom with the heading of “Custom Fields.”

Now let’s take a look at a very basic example of WordPress custom fields in action. Things will shape up with this example for a fitness blog. We’ll use the custom fields to track and list various types of physical activity on posts.

3. Add the key, which in this case is “Type of exercise.” We will use this box to add specific details to the post. Click on “Enter new” and type the key in the field.

4. Add the value. Let’s go with Zumba for this one. Keep in mind, this is only going to show up on this specific post. On a different post, you can enter a different value, something like “Elliptical” or another type of exercise.

5. Save the post.

At this moment, you won’t actually see much. You still need to add some formatting to display the information. So far, this additional information is stored in the database, so it can be called upon to be displayed. For this tutorial, I’ve opted to display these custom fields on posts (instead of pages) so I’ll go through the most basic way to format everything.

Displaying the Custom Fields on the Post

Using template modifications to add the custom fields as recurring site data is an efficient way of going about things. Let’s say that you start by displaying the custom fields at the beginning of your post, but later decide that it would look better at the bottom. By using template modifications, that change is easy to do because changing the template will update the entire site. If you didn’t use this method, and instead saved the information individually inside each post, you’d have to edit every single post to make the change, making changes much more difficult.

For this example, the custom field will be shown before the post so the reader can see the exercise type right way before reading the entire post. To display it this way, the data will be called before the WordPress loop.

Note: These customizations should be done in a child theme of course, and we’ll be using the single.php file. As always, customizations like these are best tested in a development environment.

1. Open the single.php file and add this code outside of the WordPress loop:

&lt;?php the_meta(); ?&gt;

It will display something like this:

If you’d rather have this displayed somewhere else on the page, try placing that snippet in the loop or after the loop. For example, by placing the function inside the <main> tag, the custom field information will be shown as part of the main content.

&lt;div id="primary" class="content-area"&gt;
&lt;main id="main" class="site-main" role="main"&gt;

This approach will work to also show other custom fields you have created.

One thing to mention about this example: The child theme was created from the WordPress Twenty Fifteen parent theme, which is very popular. If you’re experimenting with where to display the custom fields, there may be other templates you need in your child theme besides the single.php file. To show the information in the post, a content.php was added to the child theme. The snippet above was placed within the content of the page so it appeared as part of the post.

2. Style the fields. If you go to the inspector, you’ll see some new classes added to the page.

Here’s what the example looks like with the two different custom fields:

Type of exercise: Zumba
Time of day: Morning

It’s pretty simple to work with as a list. With some styling, it will look more integrated with the style of the site. With just a couple of simple CSS modifications, we can adjust the text color and list styling.

ul.post-meta li {
color: #898989;
list-style-type: none;
}

ul.post-meta li span.post-meta-key {
color: #1fc3d2;
font-weight: bold;
}

More Custom Fields Customizations

The styling in the previous example will work just fine, but there is more that we do. The following examples will show you how custom fields can be adjusted with additional display options for specific use cases. Making the custom field read as part of the post and setting the context with a helpful heading will be a great addition to the post. If you are following along step by step, be sure to comment out the <?php the_meta(); ?> that you added in the previous example.

For this example, things have been slightly modified. The key has been simplified to “exercises” so it can be added to the template easier, and the code snippet was added in the content.php file of the child theme so it will appear in the post content, instead of before or after it.

&lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', false); ?&gt;
&lt;h3&gt;Today’s exercise:&lt;/h3&gt;
&lt;ul&gt;
&lt;?php foreach($exercises as $exercise) {
echo '&lt;li&gt;'.$exercise.'&lt;/li&gt;';
} ?&gt;
&lt;/ul&gt;

The custom field is now shown below the heading that reads “Today’s exercise:” in a list format. This has been set as an <h3> but can be easily adjusted to be another heading or paragraph style. If you do not want it in list format, that can also be structured however you’d like.

Conditional Custom

Fields

There might be times where the custom field is not included. Say, for example, there’s a post without an exercise value. This will allow you to display fallback information, so it’s not just left blank.

&lt;?php $exercises = get_post_meta($post-&gt;ID, 'exercises', true); ?&gt;

&lt;h3&gt;Today’s exercise:&lt;/h3&gt;
&lt;ul&gt;
&lt;?php if ($exercises) { ?&gt;

&lt;?php echo '&lt;li&gt;' .$exercises. '&lt;/li&gt;'; ?&gt;

&lt;?php } //if there is nothing for exercises then display

else { ?&gt;

&lt;li&gt;Today was a rest day.&lt;/li&gt;

The Advanced Custom Fields Plugin

By following that tutorial, you can easily get custom fields up and running. f you’d rather use a plugin to add custom fields, however, there are options available for that, as well. Advanced Custom Fields is a very popular option. This replaces the default custom fields interface in WordPress. The final product created from this tutorial could also be created with this plugin.

Field Groups

The Advanced Custom Fields plugin allows for field groups, which is worth mentioning because they are closely related to the above tutorial. Essentially, we created a very basic version of a mini field group. Advanced Custom Fields groups contain custom fields, location rules, and display options. Each field group will use it’s location rules to display the fields when needed, in the right location. Like the manual way of doing things, these display options allow you to customize the page however you’d like. There are plenty of field groups to choose from with this plugin.

This barely scratches the surface of what can be done with this plugin. To get the full picture, be sure to visit the Advanced Custom Fields website.

Custom fields are an out of the box capability of WordPress. By making just a few template modifications, you can easily add this functionality to your website. These steps cover the basics and with a little experimentation, you will have a clear understanding of how to implement custom fields. When planning your next project, be sure to consider the flexibility that custom fields offer. They can accommodate various of types of content while making it easy to make site-wide changes.