Introduction to WordPress Advanced Custom Fields (ACF)

Daniel Comley

Founder

In our previous post, we introduced Custom Post Types (CPT) in WordPress, what they are, why you would use them, etc. In this post, we begin discussing the plugin Advanced Custom Fields (ACF), which works really well in conjunction with custom post types to take your website designs to the next level.

Advanced Custom Fields allows you to add additional custom fields to any edit screens in WordPress. This allows additional data to be captured for your posts, which can then be styled and displayed in your own custom templates. WordPress provides custom fields functionality out of the box, but it is very basic and lacks a lot of management features which ACF offers.

What are ACF fields used for?

ACF allows you to add additional blocks of custom fields to your post edit screens, users, media, comments, and more. If you are familiar with WordPress development and know PHP and WordPress hooks, ACF comes with a great set of actions and filters which allows you to manipulate, manage and display your custom fields.

For example, you could have a custom post type for events that you run, and you could set up ACF fields to store data about events such as:

  • Event name
  • Location of event
  • Date of event
  • Time of event
  • Details of event
 

Each event would have its own set of data for the ACF fields, and can then be managed, formatted and displayed as desired.

ACF fields on edit screen
ACF fields on custom post type edit screen
ACF fields styled in blog post
ACF fields displayed in custom post type single blog post template

How to create advanced custom fields (ACF)

ACF is built around the concept of field groups. Field Groups are sets of fields which can then be given locations to appear in. There are also tools to import and export fields groups which can be used in different WordPress sites which also have the ACF plugin installed.

ACF admin menu options
ACF admin menu

You need to create a field group for a set of fields to appear on a post edit screen. When creating a field group, add fields one by one which you like to appear on the edit screen (or elsewhere). Fields can be given labels, values, data types, and much more. The Pro (paid) version of ACF also adds additional data types which can be useful depending on your requirements.

ACF field data types
Adding a new ACF field displaying different data types

Once all of your fields have been added to the field group, they can be reordered, deleted, duplicated, or modified.

ACF Field Group
ACF Field Group example for Events

At this point, the Field Group needs to be added to different locations in your WordPress installation where you would like the fields to appear. These are known as Rule Groups. There are all sorts of locations where field groups can be added, but to add them to custom post type edit screens, simply select where Post Type is equal to Event (or your custom post type name). You can add the field group to multiple locations as required based on different criteria you specify.

ACF rule groups
ACF rule groups showing the many locations a field group can be added to

There are a number of other settings which can be set around styling, ordering, and so on. One of the most useful settings though is Hide On Screen. This setting allows different parts of the edit screen to be hidden if they are not required. For example, you may not want to display the default Gutenberg content editor when creating new posts for your custom post type, or you may not want to use Categories and Tags. You can turn these on and off as required.

Keep note though that these settings can also be set when using custom post types with the CPT UI plugin, so if you have set an item to be hidden but it still appears on the edit screen, check the post type in CPT UI as the item may not be hidden in there.

ACF field group hide items
Items which can be hidden on the edit screen

The ACF field group blocks should now display on the post edit screen (or wherever you added it to for the Location). The data in these fields will now save when posts are published.

How to display advanced custom fields on your templates

Once data has been saved for your custom fields, it can now been retrieved and displayed on your blog posts on your website (and other areas). The best way to display ACF data depends on the level of control you need for your website project. At a basic level, if you just want the data to be displayed as it is on a post, you can do so via a plugin or if you use a popular page builder. If you need to perform some kind of manipulation or formatting on the data (or just need more control), you may need to write custom PHP in your child theme’s functions.php file (or via a custom plugin). There are many ACF actions and filters which gives you full control over the data that is stored.

But to keep things simple in this article, we use the Elementor page builder which offers built in support for displaying dynamic ACF fields. Elementor offers a Theme Builder where you can create templates for your custom post types which can be built to include ACF fields. While this is not an Elementor tutorial, you can drop in elements onto your template such as a Text Editor, and there will be a dynamic tag option where you can select your ACF field to display on the template.

Dynamics Tags in Elementor
Dynamic Tag in Elementor
ACF Dynamic Tag
ACF Field option in Dynamic Tag
Select an ACF field key
Select your ACF field to display

The ACF field will now be added to your template and the correct post data will display on the post page for your post type.

How are advanced custom fields stored?

Data from ACF fields are stored in the WordPress database in the wp_postmeta table. This is a standard WordPress table, and like the name says, it is used to store metadata about posts. When creating any post (regardless of if it is a custom post type or not), the post is stored in the wp_posts table and is given a post ID (primary key).

Post ID in wp_posts table
Showing the Post ID in the wp_posts table

The ACF fields are stored in the wp_postmeta table linking back to the post through the post_id field.

ACF fields in wp_postmeta table
The ACF fields are linked back to the post through the post_id field in wp_postmeta table

This is the data stored for the post from the screenshots above. This screen shows that each ACF field is given its own generated field name. Note that dates are ALWAYS stored in the format of YYYYMMDD. The format of the dates can be displayed in any format you like (but you cannot change how they are stored in the database table). This can be set from the field within the Field Group by setting the Display Format and Return Format settings. Alternatively, the format can be set through PHP custom code.

This article is just a basic introduction to how ACF works. There is a lot you can do with this plugin which is outside the scope of this introductory blog post.

Hopefully you now have an understanding of how advanced custom fields work. There are free and paid versions of the ACF plugin. ACF is generally considered an essential plugin for WordPress developers, and it will make your life a lot easier! Check out the ACF plugin site.