This tutorial answers two important questions. What are WordPress custom data fields, and how do you use them? You may be familiar with two default data fields created whenever you save content in WordPress. One is the title field, and the other's the description. We call this metadata or post meta. WordPress saves other bits of data too, and we'll look at that in a moment.
Custom fields let you add extra arbitrary data that are useful to the author and or site visitor. It can remain hidden in the back-end, or visible at the front-end from any web browser.
Custom Fields at the Front-End
Getting custom field data to show at the front-end is tricky using the Guttenberg editor. You need to be comfortable working with templates (site files) and have a basic knowledge of PHP. This is a beginner's guide that introduces the concept of custom fields, but it doesn't get into coding. It's not overly difficult, but it's easy to break things if you're a novice.
Note: There are links to help files on displaying custom fields at the front-end for each method. But please get an expert to modify your template files if you're uneasy working with code.
Alternatively, you can add custom data using Guttenberg's Paragraph block. We'll look at that later. The block approach isn’t as powerful as programming custom fields into a template, but it's ideal for displaying custom fields for beginners. Or, you can use the Elementor Pro page builder to display custom fields at the front-end.
See my Learn Elementor – WordPress Course (that is a heavily discounted link) if you'd like to learn more.
Default Metadata Vs Custom Data Fields
With every post or page, WordPress auto-saves metadata behind the scenes. That's typically the post or page title, author's name, and the date and time you made or saved the page or post. Custom fields, though, only exist if you create them, so it's additional data.
Example of custom Fields
Let's say you have a website dedicated to Asian cooking. At the top of each page is a breakdown of useful recipe information to help visitors. It would be handy to have custom fields to put the additional information in the same place for each post. It could be short—like the example below—or something much longer and more detailed.
Creating custom fields manually
Creating a custom field has two parts, i.e., Name (left) and Value (right). The name you choose is for your reference at the back-end. The value is the output data you want to display on the front-end. The custom fields for our recipe posts could look like this on the live page.
Prep time: 15 minutes
Cooking time: 45 minutes
Yield: 4 servings
Total Calories: 500
The bold text in this example is permanent, so you won't need to type that out for each recipe. The non-bold data is what you type into the custom field from the editor screen. Where this data appears on the page depends on where you add the code to your theme file.
Adding code is the tricky part of the manual method that we get into at the final stage.
Adding Custom Fields (2 Methods)
There are two methods for adding custom fields in WordPress. One is to use the feature built into Guttenberg. The other method is to use a plugin. Setting up custom fields at the back-end is effortless with either approach. Displaying the data at the front-end, is trickier as mentioned earlier. The plugin is more powerful than Gutenberg and offers a ton of interesting options.
Let's start at the back-end using the WordPress built-in custom fields feature.
How to Add Custom Fields in Guttenberg
Manually adding custom fields at the back-end is a 2-step process:
- Unhide the custom field feature from the Guttenberg editor
- Create new custom fields
Step #1 | Unhide the custom field feature
The WordPress built-in feature is not currently visible by default, so let's bring it into view.
Log in to your WP Admin Area.
Open any WP post or page or create a new one. We'll use an existing post to illustrate.
Go to Posts => All Posts from the Dashboard side menu.
Click the Edit link under the post or page title to open the editor.
- Click the 3 dots (…) at the top right of the Editor Screen to reveal the list of options.
- Scroll down the menu and click Preferences.
A Preferences popup window opens.
- From the Preference window, click Panels
- Click the Custom Fields toggle button to ON (changes to blue colour)
- Click the Enable & Reload button
Your WordPress editor reloads and displays the new custom fields panel below the main content. There are most likely a bunch of preinstalled custom fields in the —Select— dropdown. However, we're going to create ours from scratch using the Enter new link inside the meta box.
Note: The WordPress custom fields feature is now visible in your editor for all posts.
Step #2 | Create new custom fields
OK, let's go ahead and create a simple custom field to display cooking details at the front end.
Click the Enter new link in the Custom Fields panel.
Enter Prep: in the name field.
Type the time in the Value field. For this example, we'll say 15 minutes, but it can be anything.
Click the Add Custom Field button to save it.
Repeat the above procedure and add 3 more custom fields for:
Time: add hours/minutes
Yield: servings, e.g., serves 4
Calories: add the number
Point to note: The name field is for your easy reference as the content creator. On the live site, you could display any text you want before the value. For this example, we're going to keep things simple and display Prep Time: at the front end. If you don't enter any value in the editor, then the text that would normally display before it won't show on the live site.
Your new custom field options are now available for any WP post from the — Select — dropdown.
However, getting them to appear on the live site is the tricky part. You need to tell your WordPress theme where to display the new data, and how. You can do this for posts by adding code to the single.php file, which you can access via the WordPress Theme Editor. And to format the output data at the front-end requires a little CSS knowledge.
It's beyond the scope of this beginner's guide to get into coding. Please see Displaying Custom Fields if you want to show custom data to visitors at the front-end.
I'll show you a workaround later in this guide so you can display these fields using the Gutenberg Paragraph block. Before we do that, let's see how to add custom fields using a plugin.
Add Custom Fields Using a Plugin
Please read the how to install and activate plugins tutorial first if you're new to WordPress.
The plugin opens unlimited custom fields possibilities compared to the native WordPress feature. The one we're going to use here to illustrate is The Advanced Custom Fields plugin. It has over one million active installations and a high rating from users. It's an excellent tool for developers and site admins to add custom data to any place in any way on a WordPress website.
The Advanced Custom Field builder supports the following features:
- Simple to use at any level, with an intuitive interface
- Offers over 30 types of field
- Powerful built-in functions
- Includes extensive documentation
OK, let's get started.
Install and Activate the plugin called Advanced Custom Fields by Elliot Condon.
Go to Custom Fields => Field Groups from the Dashboard side menu.
Click the Add New button on the Field Groups screen.
You Need to Add a title for your new field group.
Let's apply the recipe theme again used with the WP custom fields.
Type Recipe Information into the Add Title field, then click the Add Field button.
Now click Publish in the Publish box (top right) to save the new Group.
We can now add a label that will show on the custom field's edit screen.
Type Prep Time then press the Tab key to jump to the next field.
Note: The plugin auto-fills the Field Name based on the label. You can change it if you want or leave the auto-fill. This label is the ID needed to display the custom field on the front end.
Press your keyboard's Tab key to jump to the Field Type dropdown list. The list reveals a bunch of options in 6 categories. They are Basic, Content, Choice, Relational, JQuery, and Layout.
For this example, we'll leave the Field Type as Text.
Note: There are many other options as you scroll down the screen, most of which are self-explanatory. You can modify any custom field at any time from its Edit screen. We'll settle for the three inputs above. Here's how it looks.
Now scroll down to the Location box. We need to decide where to display the new custom field. The locations available are Posts, Pages, Users, and Forms.
Select Post Type is equal to Post, then click the Update button (top right).
You will now see the new custom field under the Edit window in the Post Editor.
Repeat this procedure to add the custom fields for Cooking Time, Yield, and Total Calories.
The next part is to place the custom data at the front end. Again, it's beyond the scope of this beginner's guide to get into coding. Please see How to create a front-end form for details.
Display Custom Fields in Posts Using Gutenberg and Shortcodes
Editing theme templates may be too much for someone without PHP skills. I will create a simple tutorial showing how to do this, but for now, I have a simple work-around.
One solution is to set this up so that you can insert custom fields into a post (manually) using a shortcode which specifies the custom field you want to add.
Before continuing with this, please make sure you have the custom fields plugin installed and you have a couple of fields created.
Go to this web page:
https://www.isitwp.com/get-custom-field-value-with-shortcode/
Debjit Saha has kindly provided this PHP code:
Note, you do not need to copy the bottom two lines, just what you see in my screenshot above.
Copy it to a text editor of your choice.
We need to copy this code to the functions.php file in our theme folder. To do this, click on Theme Editor in the Appearance menu:
On the right-hand side, click on the Functions.php file:
The functions.php file opens in the editor on the left, ready for the code to be inserted.
Scroll to the very bottom of the functions.php file, and paste the code.
Now click the Update File button to save this file.
OK, create a new post.
You should see the Custom fields section of the editor if you installed the plugin earlier and created some custom fields. Here is mine:
If you click on the drop down box for Name, you can see the custom fields you have created.
Using the plugin, I am going to insert values for two of my custom fields for this post:
In an ideal world, you'd have created a WordPress template to automatically show these custom fields when displaying the post. However, with our workaround, we can display them using shortcodes in a plain old paragraph block. Here is the block:
The custom fields “prep_time” and “Total Calories” are wrapped inside shortcodes within the paragraph block.
The Time: and Total Calories: labels are just standard text typed into the paragraph block. The shortcodes are enclosed inside [ ].
The code we inserted into the functions.php file is defining the format of the shortcode. Inside the opening square bracket, we use the word field, space, followed by the name of the custom field in quotes, close square bracket.
This code in my paragraph block looks like this when the page loads:
As you can see, the values of the custom fields are inserted in place of the shortcodes.
The real value of having custom fields is to automate this insertion. Without coding, we can't. However, to make this more useful with the shortcode workaround, we can save the paragraph block we created with the shortcodes as a reusable block:
Now whenever you add a new post, you can add the paragraph block, pre-written with shortcodes simply by selecting the reusable block:
That will insert the paragraph block, together with all formatting and shortcodes, into the new post:
It's not quite as elegant as having this coded into the theme, but it's easy if you are a beginner. You can insert identical formatting of the custom fields on any page you want, while omitting from pages that don't need it.
However, look out for a tutorial coming soon, showing you how to create a custom template to display posts with custom fields.
