Advanced Custom Fields Tutorial: Your Ultimate Guide

WordPress custom fields are an important part of what makes WordPress a flexible content management system, rather than “just a blogging platform“.

When it comes to WordPress custom fields, the freemium Advanced Custom Fields plugin is one of the most well-known names. It makes it easier to work with custom fields in all aspects, and it’s also the topic of our post today.

Specifically, we’ll explain why Advanced Custom Fields is so valuable and then show you step-by-step how you can apply it to your WordPress site.

There’s a lot to cover, so let’s dive in…

What Are WordPress Custom Fields? What Do They Let You Do?

WordPress custom fields let you add, store, and display additional information about a piece of content in WordPress. On a more technical level, custom fields help you store metadata.

Even if you’re not familiar with this term, custom fields power much of the functionality in your favorite plugins and themes.

For example, WooCommerce, the most popular way to build an eCommerce store, uses custom fields to store additional information about a product like:

• Price
• Weight
• Color

Or, if you have a WordPress event calendar plugin, that plugin will use custom fields to store extra information about an event such as:

• Location
• Start/end time
• Price

You can also create your own custom fields to store information that’s relevant to your unique needs, which is what this entire post is about.

When Should You Use Custom Fields?

Now, you might be wondering why you even need custom fields in the first place.

For example, if you want to post an event on your WordPress site, couldn’t you just put all that information as regular text in the WordPress editor?

Well, yes, you could. But using custom fields is a better approach for a few reasons:

• Easier input — rather than typing things from scratch, a well-laid out custom field group will make it much easier to input data. For example, instead of typing a date, you can just select the date from a date picker.
• Consistency — the information you enter in your custom fields will always display according to your setup, which means it’ll be consistent across your entire site.
• Easy updates and maintenance — if you want to change something about how that information displays in the future, you can just update one thing rather than having to edit each post individually.

WordPress Includes Built-In Custom Fields Functionality

WordPress actually includes built-in functionality for adding custom fields to your content. In the classic TinyMCE editor, you can enable this from the Screen Options area. Or, in the new block editor, you can enable it from the Options area:

You can then enter your custom field data using key/value pairs:

This native custom fields functionality is totally functional, but it’s not the most user-friendly way to do things, which is why a lot of people turn to the Advanced Custom Fields plugin instead.

Advanced Custom Fields Makes It a Lot Easier

Put simply, Advanced Custom Fields makes it a lot easier to work with custom fields in WordPress in… pretty much all aspects.

It simplifies the interface for adding and managing custom fields in your WordPress dashboard and it also simplifies the process for displaying information from custom fields on the frontend of your site. That fact only helps explain why it’s active on more than 1 million websites with a 4.9-star rating on over 1,000 reviews.

On the backend, it will let you create user-friendly meta boxes that include pre-selected field types. So, rather than that generic key-value pair interface (like those you saw above), you’ll be able to use date pickers, checkboxes, and more like this:

In total, Advanced Custom Fields offers 30+ different field types that you can add to any area in your dashboard, including posts, users, taxonomies, media, comments, and even custom options pages.

You can view detailed information about each field type here.

Advanced Custom Fields also makes it a lot easier to display that information, with well-documented functions, shortcodes, Gutenberg blocks, and more.

Or, you can find integrations with other tools, like some drag-and-drop WordPress page builders.

Advanced Custom Fields Free vs Pro: Which One Do You Need?

Advanced Custom Fields comes both in a free as well as an affordable premium version.

For most basic uses, the free version is completely fine. It gives you access to almost all the field types, as well as all the time-saving and user-friendly features outlined above.

If you just want to store some extra information about your content, the free version is all you need.

With that being said, the Pro version does add some pretty convenient features that help you use Advanced Custom Fields in more interesting ways:

• Repeater fields — these let you repeat certain fields/groups of fields on a post-by-post basis. For example, if you were adding information about a speaker to an event, a repeater field would help you handle the situation where there’s more than one speaker (you could just “repeat” the field(s) for the speaker as many times as needed, which lets you handle edge cases where there are multiple speakers).
• ACF blocks — display your fields as a block Gutenberg, rather than a meta box. This is especially convenient if you’re building a site for a client and want to give them an easy way to input and visualize custom field data.
• Flexible content field — create layouts from other fields. It’s kind of like a lightweight page builder based on custom field information.
• Gallery field — upload multiple images to a single field.

There are also some other differences, like options pages, the ability to clone fields, improvements to the relationship fields, and other smaller tweaks.

You can see all the ACF PRO features here.

ACF PRO starts at $49 for yearly use on a single site, $149 yearly for use on 10 sites, and $249 yearly for use on unlimited sites.

When in doubt, start with the free version until you figure out exactly what functionality you need. You can always upgrade later if needed.

Advanced Custom Fields Tutorial: How to Add Your Fields

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.

We’ll break this tutorial into two parts:

1. How to add and manage your custom fields on the backend.
2. How to display custom field information on the frontend of your site.

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. For example, you’re probably not going on 1,000-mile runs (and if you do… OMG, you’re the ultimate Forrest Gump)!

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).

Exploring Conditional Logic

Before we move forward, let’s take a quick detour.

See, one of the reasons why Advanced Custom Fields is so popular is because of all the interesting implementations it allows.

And one powerful option here is Conditional Logic, which lets you show/hide fields based on how a previous field was answered.

Let’s look at a quick example of how this works…

Let’s say that you want to blog about food, your travels, or anything other than running. When you’re writing about a non-run topic, it doesn’t make much sense to display the custom fields for information about the run, right?

What if, instead of automatically displaying all the custom fields you just created, you could add a custom field that says “Is this post a run?”:

If you check the box, then the run information fields automatically appear. If you leave it unchecked, they stay hidden:

That’s what conditional logic allows you to do!

To set this up, you would edit your field group and add a new True / False field for “Is this a run?”:

Then, you would edit the existing fields and turn on Conditional Logic so that each field only displays when the “Is this a run?” field is checked:

How to Display Advanced Custom Fields on the Frontend

Ok, we’re halfway through our Advanced Custom Fields journey. You’re now able to add information to your custom fields, associate it with the relevant post type, and store it in your database.

However, there’s still one potential problem: the information from your custom fields doesn’t appear anywhere on the frontend yet!

That is, even though you’ve added some custom fields to the editor for your blog posts, your blog post still just looks like a normal blog post on the frontend:

Let’s fix that.

There are a few different ways you can display Advanced Custom Fields data on the frontend of your site. The exact method you choose will depend on your needs and knowledge level. Here are three different ways to achieve that:

1. Your theme’s template files — this requires a little technical knowledge, but it’s the best approach most of the time, especially if you’re comfortable working in your theme’s template files.
2. With a shortcode — this is super simple and a good option if you just want to insert custom field data on a case-by-case basis. However, it requires a lot more manual work because you’ll need to add shortcodes to every post.
3. With Elementor Pro — this is great because it completely eliminates the need to work with PHP, but it’s a premium product and it also means you’ll need to use Elementor Pro for your templating.

You can click above to jump straight to a specific method or you can read through all of them. Up to you.

How to Add Advanced Custom Fields in Theme Template Files

The first way to display your custom field information is to add Advanced Custom Fields’ PHP functions directly to your child theme’s template files.

This is a little advanced because it requires you to dig into your theme’s template files, but it ensures that your custom fields will automatically display in the same spot every time.

Specifically, you’ll need to edit the single template for the post type in question.

For a regular blog post, this is single.php. Or, some themes break things up into template parts. For example, for the TwentyNineteen theme, you actually need to edit the content-single.php template part.

If you’re feeling lost here, you might want to use a different method.

Once you’ve found the theme template file for your single post, you can use Advanced Custom Fields’ the_field() function to display a field’s information. For example,

<?php the_field('FIELD_NAME'); ?>

Learn more here about it.

For example, to display the “Purpose” field, you’d use

<?php the_field('purpose'); ?>

You can find the field name when you edit a field group:

So, combining a little HTML markup with the PHP, you might get something like this to display all the fields:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

To add this above the regular post content, you’d add this to your theme template file above the_content():

And now, after refreshing the blog post, you can see the custom field data above the regular WordPress content:

To learn more, check out Advanced Custom Fields’ full documentation.

How to Display Advanced Custom Fields Data with a Shortcode

For a much simpler way to display your custom fields’ data, you can also use shortcodes. The downside here, though, is that you’ll need to add the shortcode every single time you want to display a custom field. There’s no easy way to automate this task.

The shortcode is this:

[acf field="FIELD_NAME"]

For example, if you entered this in the WordPress editor:

Then, the frontend of your site would look exactly the same as the previous theme template method:

How to Display Advanced Custom Fields with Elementor Pro

Elementor is one of the most popular WordPress page builders. It lets you build your designs using visual, drag-and-drop editing.

With Elementor Pro, the paid add-on, you can also build your theme’s template files, including an option to insert dynamic custom field data from Advanced Custom Fields into your designs.

This is a great option if you want the flexibility to automatically include custom field data in your templates, but don’t feel comfortable making direct code edits to your theme’s template files.

Our Elementor hosting is optimized for speed, security, and peak traffic and is unlike any other platform out there.

To get started, you’d go to Templates > Theme Builder and create a new Elementor template for your post Single:

You could add the regular Elementor widgets for your Post Title and Post Content. Then, to display the custom field data, you’d add regular Text Editor widgets. The only difference here, instead of editing the text, you’d select the Dynamic option:

After this, you can select ACF Field from the drop-down:

From there, you can select the specific field you added with Advanced Custom Fields:

And you can also use the Advanced accordion tab to prepend or append information, which lets you add labels and units:

Easy, right? Now just repeat for other custom fields!

Summary

Using Advanced Custom Fields, you can enrich your pages and blog posts with more data and information with an easy-to-use solution. More: you can start to collect additional information for any content on your site and then display it on the frontend for your visitors.

To do that, you have 3 options:

• Your theme’s template files
• With a shortcode
• With Elementor Pro

The knowledge you’ve gained in this post will let you unlock the deep potential of WordPress to build 100% custom sites that go far beyond WordPress’ blogging roots.

The only question left is this:

What will you create with Advanced Custom Fields? Share it with us in the comments below

Matteo Duò Kinsta

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.

• Website
• LinkedIn
• Twitter