What is the Advanced Custom Fields plugin?
Advanced Custom Fields — or ‘ACF’ for short — is a WordPress plugin that makes it possible for designers and developers to offer more sophisticated, user-friendly websites to their clients. It does this by taking the custom field system — a core feature of WordPress — to a whole new level by providing a standardized collection of fields, each with their own special capabilities.
ACF is a tool for:
- Enhancing the experience of entering meta data into WordPress’ database.
- Controlling and standardizing data as it is stored in the database.
- Displaying the meta data on the front end in a clean and stable way.
Other features include support for custom options pages, front end forms, and custom Gutenberg blocks.
This feature set has made Advanced Custom Fields a very popular plugin in WordPress industry with most professionals — both freelance and agencies — leveraging the power and flexibility it offers.
Is it free or does it cost money?
There is both a free version and a pro version with various pricing tiers available depending on how many sites you intend to use it on. The free version is incredibly flexible and has all the base functionality required to deliver awesome websites but if you decide to go with the pro version, you’ll get a few additional features which are indispensible for many modern professionals:
- The Repeater Field for creating sets of sub fields that can then be used (repeated) any number of times.
- ACF Block Support for registering your own custom Gutenberg blocks that use ACF fields to control data.
- The Flexible Content Field for building flexible layout templates consisting of groups of sub fields.
- Options Pages for setting up custom site options.
- The Gallery Field for managing sets/collections of images.
- The Clone Field for reusing fields and field groups without having to recreate them all the time.
ACF offers a robust collection of field types to suit all kinds of situations
ACF’s collection of user-friendly input fields can be configured in the WordPress admin with ease can then be interacted with by website administrators just as easily. The fields can be organised into groups and displayed in various areas of the WordPress admin/backend. With ACF fields in place, people creating posts, taxonomy terms, users, etc., can easily see and understand what information needs to be added when working with the website.
There are 30 custom field types built into the ACF core offering and a growing number of third-party fields that are developed by independent developers around the world. Some examples of the available fields you’ll see in the ACF core include:
- Single line and multi line text fields.
- WYSIWYG text editor field.
- Select, multi-select, and true/false fields.
- Checkboxes and radio group fields.
- Google Maps field.
- File upload, image, and gallery fields.
- Time, date, and colour picker fields.
- Post relationship fields.
- oEmbed field for embedding content from many supported platforms.
- Accordion and tab fields for organising fields in the WordPress admin.
This, of course, is all on the administrative side of WordPress and is all focused around controlling and organising information for storage in the database. The field inputs themselves only appear in the WordPress admin unless a developer decides to leverage ACF forms for front end field rendering.
Template helpers provide a stable & convenient way to display field values on the front end
The other side of ACF is the collection of PHP functions it provides for displaying the data on the front end of a website. These functions are all designed to be used at the theme template level but can be used elsewhere if needed.
ACF’s template functions make theme development very flexible and allows designers/developers to build a WordPress theme in the typical WordPress fashion they are used to. The functions provided are very similar to what we use when developing WordPress templates so they are familiar and are easy to learn. This allows designers/developers to plug custom field data into any project’s unique HTML, CSS, & JavaScript. In this sense, you can think of ACF as the connection between your website’s front end templates and your meta data stored in the database.
Who is ACF built for?
When I first discovered ACF, it was a pretty exciting moment. I remember thinking of all the possibilities that were now open to me with such a collection of fields. At that moment, I had levelled-up what I was capable of offering clients as a freelance web developer. Fast forward many years and you’ll find I’m still using it in just about every WordPress project I’m involved in. Why? Because it saves me time and provides my clients with admin experiences that would take me ages to build.
A flexible time-saver for web developers
If you are a developer, you can think of ACF as a robust and flexible set of custom fields that help you better normalize meta data for post objects, taxonomy term objects, user objects, and more. You also get a familiar set of template functions that provide a stable API for displaying and updating meta data.
A powerful leg-up for web designers
If you are a designer, you can think of ACF as a way to expand your technical boundaries and move beyond standard WordPress templates and more into complex layouts with structured data and advanced templates. You get to work mostly within the front end languages where you may prefer to work while providing your clients with websites that structure, format, and display data within minimal PHP.
Do I need to know how to code to use it?
You do need to know a little bit about code. Realistically, you should be comfortable (or at least willing to dive into) HTML, CSS, and the use of PHP in the context of WordPress theme templates/development.
The ACF documentation has a short guide on displaying values in your theme and the documentation for each of the field types has further examples on how to display various fields.
Are there any shortcuts for handling template code?
If you are comfortable working with snippets or just wish to save further time, you could also consider leveraging the added power of ACF Theme Code Pro — a plugin available via Hookturn which generates the PHP needed to render your ACF fields. Just copy, paste into a template, then add HTML. If you are sticking with the free version of ACF, there is a free version of ACF Theme Code on the WordPress.org plugins repository.
Can ACF be extended?
You bet. In fact, there is an entire library of extensions right here on our site which is chock full of plugins that all extend the ACF core. Some extensions add new features, some enhance existing features, and some add new field types which enable you to do more when building out your field groups.
What do people build using Advanced Custom Fields?
What don’t we build! From simple brochure style sites with configurable templates right through to complex data systems, ACF gives us the foundation we need to create all types of websites and web applications in WordPress. Just a few examples of projects I’ve been involved in include:
- Sports results platforms that provide site admins with the ability to add data and front end users to view and filter results.
- Complex product listing sites that use both ACF and WooCommerce to display heavily customised product experiences.
- Real estate listing sites that support listing, searching, and displaying properties for multiple estate agents across.
- Yoga studio sites for listing classes and managing student attendance.
- Date aggregating sites that consume data from third party systems, save it into WordPress via Advanced Custom Fields, then provide various ways of visualising that data.
There are even people out there bundling ACF into their own plugins as a means of providing a high-quality settings user experience without all the effort of coding out the admin side of things.
Why should we even care about structuring data in the first place?
This is an excellent question and if you spend most of your time building simple websites with just a few basic pages, you might not see much of a need for it (yet.)
Structured data really starts to make a whole lot of sense when you start building websites that display, search, and filter objects. You can think of an object as a thing — cars, books, properties, people, courses, adventures, products… these are all examples of objects. If you have 5 cars, you have 5 objects.
How does structured data come into it? Well, let’s say, for example, you build a site that is a collection of travel destinations. You would probably set up a custom post type in WordPress called Destination and each destination is going to have a core set of properties in common — e.g; country, rating, price, open times etc. Whilst typing all this information directly into the post content is possible, imagine if you needed to change where in the post that data sat for 1000 destinations in your database. You would need to go through and manually update all of those destination posts individually. On the other hand, if the information was stored in custom fields, you could simply change the one template that handles the display of all those posts and all of them would be updated.
In addition to the display of information — it is very likely the case that your users will want to search/filter the destinations to find things that match their needs. They may, for example, only want to look at destinations with a 5 star rating in France. Filtering posts that have that data typed into the post content will be difficult, unreliable, and slow. By storing the data in custom fields, you can utilise WordPress’ built-in meta queries to search for specific posts with fields matching a given criteria.
Advanced Custom Fields stores all data in WordPress’ meta tables by default but if you need to go even further and break that data out into custom database tables, you can do so using the ACF Custom Database Tables plugin. It’s not a blanket solution for all websites but this approach can be very powerful when large data sets and complex custom search queries are needed.
ACF Forms
ACF Forms is a convenient feature that developers can leverage to display forms made up of ACF fields on the front end of a website. Using ACF Forms, a developer can set up front end forms for creating new — or editing existing — posts on a site. This can work on any post type and opens up possibilities for user submitted content. With a little bit of work, a developer could even set up a custom admin dashboard so that only certain users have access to create and/or edit posts without having access to WordPress’ admin dashboard itself.
There are a number of options available for controlling ACF Forms and more detail around this can be reviewed in the ACF Forms documentation — there is even a series of code-snippets for when you need a little bit of a head start.
Advanced Forms Pro — a convenient shortcut and additional features for ACF Forms
For those in need of more control and more possibilities, the Advanced Forms Pro plugin offered by Hookturn and developed by Fabian Lindfors adds some very nice features such as the ability to create and edit users in addition to posts. The plugin also adds a range of very useful hooks and filters for customisation and integrations with MailChimp, Zapier, and Slack. We suggest you check out the plugin documentation and give the free version of Advanced Forms a try before committing to the pro version.
Options Pages
ACF also supports the addition of nestable custom options pages — this makes it possible for developers to create one or more top-level options areas in the WordPress dashboard with any number of sub pages appearing in the flyout menu.
Once you have your pages in place, you can assign ACF field groups to the options page with any combination of fields for site administrators to manage. The possibilities here are vast as you basically have the ability to easily and rapidly create custom options for the entire site or even default options to fall back on when a post/page/user/term/etc is missing the data. You might even get really creative here and use the data from an ACF options page to populate available options in other fields!
When ACF fields are loaded on an options page, the data is stored in the wp_options database table which can help reduce the size of meta tables on site. To query the data, however, ACF needs to know the field name you are requesting is for an options field so it’s necessary to pass either option or options to the get_field() and the_field(). You can read more about that here but a quick example of this might look as follows:
// By passing 'option' as the second parameter, ACF knows we are looking for data stored in the options table.
$option = get_field('my_custom_option', 'option');
To create options pages, you need to use some PHP code. There are some very useful snippets over in the ACF documentation for the acf_add_options_page() and acf_add_options_sub_page() functions so you should get familiar with those documents.
Of course, if you need a shortcut, ACF Theme Code Pro can generate the snippets you need ready for pasting into your theme’s functions.php file.
A great place to learn more about options pages is the ACF documention for Options Pages.
ACF Blocks
A recent but very welcome addition to the Advanced Custom Fields feature set is support for the new WordPress Block Editor (AKA Gutenberg). This is a rapidly evolving feature allowing developers to easily register their own custom block types and use PHP to build the templates needed to render the blocks. ACF field groups can be assigned to the custom blocks and those fields are then made available to the user as they craft a post in WordPress.
The ability to rapidly create custom blocks for the new block editor is a powerful asset and allows developers to move away from solutions based around the Flexi Field and dive right into providing admin experiences that are more visually pleasing and easier to understand for the people who spend their time creating posts and pages. The admin preview updates on the fly as the fields are updated so it is easier to see what effect the data is having on the public face of a website.
As with many things in the ACF space, there are some convenient resources to make life a little easier here:
- To learn more about working with blocks, have a read of the ACF Blocks documentation.
- If you want a shortcut for handling block related code, ACF Theme Code Pro can generate the code snippets you need to both register your custom blocks and scaffold the field output in your block templates.
- If you are interested in a suite of ready-to-use ACF blocks, you should check out the ACF Blocks Pro plugin.
Further learning and people you might like to follow
The internet is awash with ACF resources. There are tutorials, guides, tips, plugins, scripts, and more. Here are just a few really good sources for you to start with:
- The ACF Documentation is a fantastic resource for learning more about ACF.
- The ACF Support Centre is a great place to ask questions and connect with others on your journey.
- Following ACF on Twitter is a good way to keep up to date on happenings in the ACF community on Twitter.
- Following AwesomeACF on Twitter is another good way to keep up to date on happenings in the community. We tweet about new extensions, tutorials, guides, and other cool ACF-related things we find.
- Following Hookturn on Twitter is a good way to keep up with premium ACF extension development and developer tips and tricks.
