{"id":18986,"date":"2016-09-22T11:00:19","date_gmt":"2016-09-22T16:00:19","guid":{"rendered":"https:\/\/getflywheel.com\/?p=18986"},"modified":"2025-03-11T14:07:00","modified_gmt":"2025-03-11T19:07:00","slug":"wordpress-custom-fields-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-custom-fields-how-to\/","title":{"rendered":"How to Create and Use Custom Fields in WordPress"},"content":{"rendered":"\n

Editor\u2019s note: This article was written by Abbey Fitzgerald<\/a>, a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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 \u201cItem.\u201d 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.<\/p>\n\n\n\n

In this guide, we’ll cover all the most important information you need to know about adding custom fields to your WordPress site. Let’s dive in!<\/p>\n\n\n\n\n\n

Adding Custom Fields to WordPress Posts and Pages<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

1. First, click the three dots in the upper right corner of the post editor, and then click Preferences<\/strong> from the menu that appears. Next, click Panels<\/strong>, and then toggle on the Custom fields<\/strong> selector. Finally, click Show & Reload Page<\/strong> to proceed.<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

2. A Custom Fields section will now be shown in the post editor when you are editing posts.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Now let\u2019s 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\u2019ll use the custom fields to track and list various types of physical activity on posts.<\/p>\n\n\n\n

3. Add the key, which in this case is \u201cType of exercise.\u201d We will use this box to add specific details to the post.<\/p>\n\n\n\n

4. Add the value. Let\u2019s 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 \u201cElliptical\u201d or another type of exercise.<\/p>\n\n\n\n

\"Type<\/figure>\n\n\n\n

5. Save the post.<\/p>\n\n\n\n

At this moment, you won\u2019t 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\u2019ve opted to display these custom fields on posts (instead of pages), so I\u2019ll go through the most basic way to format everything.<\/p>\n\n\n\n

Displaying the Custom Fields on the Post<\/h2>\n\n\n\n

Using template modifications to add the custom fields as recurring site data is an efficient way of going about things. Let\u2019s 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. <\/p>\n\n\n\n

By using template modifications, that change is easy to do because changing the template will update the entire site. If you didn\u2019t use this method, and instead saved the information individually inside each post, you\u2019d have to edit every single post to make the change, making changes much more difficult.<\/p>\n\n\n\n

For this example, the custom field will be shown before the post so the reader can see the exercise type right away before reading the entire post. To display it this way, the data will be called before the WordPress loop<\/a>.<\/p>\n\n\n\n

Note: These customizations should be done in a child theme<\/a> of course, and we\u2019ll be using the single.php<\/code> file. As always, customizations like these are best tested in a development environment.<\/p>\n\n\n\n

1. Open the single.php<\/code> file and add this code after the header and before the WordPress loop:<\/p>\n\n\n\n

<?php the_meta(); ?><\/code><\/code><\/pre>\n\n\n\n
It will display something like this:<\/p>\n\n\n\n
\"text<\/figure>\n\n\n\n
If you\u2019d 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><\/code> tag, the custom field information will be shown as part of the main content.<\/p>\n\n\n\n
<div id=\"primary\" class=\"content-area\">\n     <main id=\"main\" class=\"site-main\" role=\"main\"><\/code><\/pre>\n\n\n\n
This approach will also work to show other custom fields you have created.<\/p>\n\n\n\n
One thing to mention about this example: The child theme was created from the WordPress Twenty Fifteen parent theme. If you\u2019re experimenting with where to display the custom fields, there may be other templates you need in your child theme besides the single.php<\/code> file. To show the information in the post, a content.php<\/code> 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.<\/p>\n\n\n\n
\"themes<\/figure>\n\n\n\n
2. Style the fields. If you go to the inspector, you\u2019ll see some new classes added to the page.<\/p>\n\n\n\n
Here\u2019s what the example looks like with the two different custom fields:<\/p>\n\n\n\n