Let’s now dig into the actual Advanced Custom Fields tutorial and I’ll show you how to create and display your first set of custom fields.
For this example, let’s say you have a blog about running. You’re like…really into running and you want to share your day-to-day workouts with your readers. Specifically, with each blog post, you want to share a run’s:
- Purpose — let’s say you have two different types of running: “speed work” and “conditioning”.
- Distance — how long your run was.
- Start Time — when you started your run.
- Finish Time — when you finished your run.
- Location — where your run took place.
To collect that information, you’ll want to add five custom fields.
It’s important to note that the principles you’ll learn in this Advanced Custom Fields tutorial apply to any use case. We’re just picking a specific example because it helps to have a tangible example to connect to.
1. Create a New Field Group
Once you’ve installed and activated the free version of Advanced Custom Fields from WordPress.org, go to Custom Fields > Add New to create your first Field Group.
As the name suggests, a “Field Group” is a group of one or more custom fields that are displayed together in your WordPress dashboard.
For this example, you’ll create one field group that contains five custom fields.
Give your field group a name, and then choose its Location. For this example, we want to display these custom fields for regular WordPress blog posts, so you can leave it as the default Post.
However, if you want to display your custom fields elsewhere, like alongside a custom post type or with a taxonomy, you’d want to change this. You can also set up multiple rules to display your fields in multiple locations:
2. Add Custom Fields
Next, click the + Add Field button to add your first custom field:
This will open a lot of options, but you don’t necessarily need to fill out everything.
The two most important choices are:
- Field Label — this is what will appear in the editor. It will also be used to generate the Field Name, which is what you’ll use in code. You don’t need to change the field name (though you can if you need to).
- Field Type — this is the type of information you want to collect. For example, you’d want a Number field to collect number information or an Email field to collect an email address.
For this first field, you’d want a Radio Button field type:
Further down, you can enter the radio button selection options in the Choices box:
There are also a number of other choices you can make, like whether or not a field is required and a default value. Feel free to configure these to your needs.
Let’s look at another example: a custom field to collect the distance of the run. This time, you’d want a Number field type:
You could also make things a little more user-friendly by opting to Append the distance unit. And if you want, you could also add validation with a Minimum Value and Maximum Value.
Just repeat the process for all the other custom fields you want to collect. When done, it should look something like this:
3. Configure Settings and Publish
To finish things out, scroll down to the Settings box. Here, you can control how your fields display in the WordPress editor
Most of the time, you can leave these as the defaults. But feel free to change things up if you want. For example, you could opt to display your custom fields above the regular WordPress editor.
Once you’ve made your choices, Publish your field group to make it live.
4. Add Some Information in the WordPress Editor
Once you’ve published your field group, you’ll see your fields appear when you go to create a new post.
By default, they’ll appear together underneath the editor in both the classic TinyMCE editor and the new block editor:
The information you enter here will be stored in your site’s WordPress database for easy retrieval (you’ll see that in the next part of our Advanced Custom Fields tutorial).
