Advanced Custom Fields Tutorial

Marketed as “a content editor for WordPress developers,” the Advanced Custom Fields (ACF) plugin may seem intimidating for some who aren’t familiar with what the plugin does. However, don’t let these buzzwords get to you, because everyone should be using Advanced Custom Fields, seeing as how it’s one of the biggest timesavers for web development. That’s why we put together an Advanced Custom Fields tutorial to show you everything.

Yes, the Advanced Custom Fields plugin is confusing for beginners. But the learning curve isn’t bad and the advantages of using this plugin on a regular basis will turn you into a believer.

⚠️ Important: While we’ll cover some non-code methods for displaying your custom fields on your website, you might need the help of a developer if those code-free solutions aren’t flexible enough for you.

What does the Advanced Custom Fields plugin do?

Advanced Custom Fields lets you collect additional information about your content in the WordPress editor.

WordPress is a flexible, open-source platform, so you should be able to create any website you want, with different functionality for things like ecommerce, blogging, events, and more.

The WordPress visual editor has excellent tools from rich content editing to media formatting.

Yet, sometimes a developer could make it more intuitive for particular use cases.

The problem is that customizing the WordPress content editor typically requires careful formatting and potential code editing.

Advanced Custom Fields eases this process by allowing you to change the content editor and standardize how you collect and display certain information.

Make it easier to update styled content

After your website is developed and ready to launch, much of your management process involves changing small details.

For instance, a common adjustment for companies is to change the homepage header or background for new sales and announcements. Changing text in that header area is common as well.

header hero image.

Sometimes that’s all a business owner does with a website on a regular basis!

And that’s totally fine, but working with WordPress makes you realize how sensitive the visual editor is. One wrong backspace and you may remove text formatting. One wrong image upload and you could make the entire homepage look like junk.

Standardize the display of repeated content

Repeated actions also warrant the use of ACF.

An example would be for a movie review blog.

Let’s say each of your reviews requires you to type in the production company, release year, and movie rating.

Or maybe you have a simple movie rating and a description of your rating scale.

movie review.

This could be done in the WordPress editor, but it would be nice to keep formatting the same across posts. In addition, having the same fields to adjust cuts the process down to a few clicks instead of having to type everything in.

Advanced Custom Fields tutorial

The first thing to do is to download the Advanced Custom Fields plugin. Check out our guide on installing and activating WordPress plugins if you need any help.

We could make an Advanced Custom Fields tutorial with thousands of examples. It’s that versatile.

However, we’ll use the example of running a movie review website.

For every new review, we want to display the following data:

  • The release year
  • The studio
  • The movie rating

Keep reading to see how this works.

Step 1: Make a new field group

A field group is a collection of custom fields.

All fields I plan on having on my movie review website fall in the same category, so it makes sense to put them in the same field group.

To create a new field group, go to ACF > Field Groups in WordPress.

custom fields.

On the new screen, click on the Add New or Add Field Group button.

add new.

The following screen may look intimidating, but you typically only need to change a few elements. You can also test them out to see how they work on your site.

add field group.

For the time being, name your field group something like Movie Review Data.

Step 2: Add fields to your group

Now it’s time to add individual custom fields.

Click on the Add Field button.

add field - Advanced Custom Fields tutorial.

This opens another long form with settings grouped into tabs. This form can also be somewhat confusing, but easy to grasp after one or two uses.

Start by typing in the Field Label. For this tutorial, we’re using Release Year.

first field.

The Field Name is then automatically populated. It’s used for placing the results in templates and coding. That would be used by your developer.

Choose your Field Type as well. For this one, we’re selecting a Text field type, but you have dozens of options from images to checkboxes and accordions.

All field types have different options, but here are some of the items you’d potentially fill in for the text field type:

  • Field Instructions – you may want to remind your writers to only type in four digits.
  • Required – You could make this field a requirement before publication.
  • Default Value – This is useful if you want a value to always show up, even when left empty.
  • Placeholder Text – This shows up in the input fields when a writer is in the editor.
  • Character Limit – It’s possible you don’t want writers to go over a certain character count.

That’s not all of the fields on there, but none of these are required. Therefore, it’s best to test them yourself. In addition, you may see other options depending on the Field Type.

Step 3: Add more fields to the group

After saving the first field, it’s time to add the studio and our movie rating fields.

Luckily, it’s the same process!

Simply go back to the Field Group, click Add Field, then name them different things.

field options.

The production company field isn’t anything special, but we can take advantage of tools for the movie rating.

field label.

This Field Type is a number.

We can also specify in the Field Instructions (via the Presentation tab) to “Rate the quality of this movie from one to ten”.

Then, we would mark the Minimum Value as 1, the Maximum Value as 10, and the Step Size as 1 (the latter is in the Presentation tab).

values.

The Step Size indicates the increments available.

Step 4: Set field locations

Now it’s time to configure where and how the fields show up on the website.

Go to the Location panel.

location - Advanced Custom Fields tutorial.

This asks for rules on where the fields should appear. For this example, it makes sense to show the field group for when “Post Type is equal to post,” since that means every post.

If you’re using custom post types, you could also associate your custom field group with a custom post type.

Under the Presentation tab, you have a chance to design how the fields show up on your WordPress editor.

settings - Advanced Custom Fields tutorial.

Essentially, this section lets you customize the design interface for your own needs.

For instance:

  • Order No. – Lets you organize the list of fields you have in a group.
  • Position – Has options for showing the fields above or below the editor.
  • Style – Consider placing the fields in a metabox.
  • Hide on screen – Remove panels that you don’t need.
backend complete.

Step 5: Display custom field information on front-end of your site

Now, once you’ve added some custom field data in the WordPress editor, you need a way to display that information on the front-end of your site.

As discussed earlier, you may have to hire a developer to get the results of your custom fields on the frontend. However, there are a few beginner-friendly solutions to consider first!

  • Use shortcodes to display ACF fields in the editor.
  • Find a page builder plugin with support for showing ACF fields.
  • Put a shortcode for the field in a reusable block group.

The first option involves using the ACF shortcode. The plugin doesn’t have a shortcode builder, so you’ll have to use the following format:

[acf field="field_name"]

This only works for text-based fields, and you have to replace the field_name with the name of your field.

For instance, you can find the field names in your field list.

Name of the field.

It then takes just a moment to add the field names to those shortcodes in the editor.

Shortcodees.

Make sure your field data is filled in for the post.

Make sure fields are filled in with information.

Click on the Publish button to view the results on the frontend!

Frontend.

You can also find a page builder that lets you display ACF fields in the editor. For example, Elementor Pro, Divi Builder, Beaver Builder + Beaver Themer (which is part of the Beaver Ultimate Addons Package), and a few other options allow for this.

Another excellent solution is to create a block in the editor, put the shortcode in there, then save it as a reusable block for future use.

Reuseable blocks.

Step 6: If all else fails, send it off to your developer for display on your website

Frontend of Advanced Custom Fields tutorial.

If the code-free methods above aren’t doing it for you, your next option is to send it off to a WordPress developer, which shouldn’t take long and should be cheap.

Essentially, all the developer is doing is adding a bit of code in your template file, or maybe a single post file.

Therefore, we suggest finding a reputable developer to help out with this. You can also look for a developer that’s local to your area (if you want to support local businesses or some other reason).

Advanced Custom Fields tutorial: Have fun making your WordPress editor more user-friendly! 🤗

With Advanced Custom Fields, you can use WordPress in new and interesting ways. If you want to further extend your site, you can learn how to create custom post types and then add custom fields to those new post types.

If you have any questions about our Advanced Custom Fields tutorial, let us know in the comments below!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!