Advanced Custom Fields (ACF) is a WordPress plugin that is a great tool in setting up custom post meta. It allows you to easily build and configure complex and user-friendly meta boxes with all kind of fields and settings for post types, taxonomy, user screens and options pages. And it’s super developer-friendly.
Now, you could set up your own meta boxes or settings manually, but for more complex settings it requires you to code quite a bit including styling, Javascript, validation and handling saving. Imagine for example manually writing a repeater with a group of settings, a multi-select of posts by a certain query. Or handling showing settings that depends on certain variables such as which term or page template is assigned (which requires Javascript). Advanced Custom Fields handles all of this, and it does so beautifully.
Keep in mind that Advanced Custom Fields will not actually output any of your custom meta in your templates. Outputting or doing something based on the fields and settings set up with ACF is up to you as a developer to handle. But this is easily done by using any of ACF’s methods. It’s also nice to know that ACF is utilizing WordPress core (post, term, user) meta functionality. Meaning that it actually saves e.g. settings for posts as post meta – which you can get a hold of using core functions such as get_post_meta().
Advanced Custom Fields come in a free version and a Pro paid version. The free version is more than enough for most cases, but in the Pro version you get some additional features such as a repeater field, gallery field, Gutenberg blocks (see later), and the possibility to use ACF to set up your own custom admin option pages. ACF is also so popular that you can easily find high-quality extensions for anything that core ACF does not cover itself.
Advanced Custom Fields: The admin part
When you install Advanced Custom Fields plugin you will get a new admin menu for “Custom Fields”. This is where you can set up and configure your “meta boxes” or groups of settings.
Within a group you can set up as many fields as you want to of different types. The most common ones are text input, textarea, richtext editor, file, image, true/false (toggler), checkboxes, radio buttons, and select box. Other common ones are multiple ways to choose posts, choosing taxonomy, select users, datepicker, colorpicker, Google Maps, and many, many more. Depending on which field type you choose you get a range of additional options to customize the field. You can also add conditional logic to any field. Conditional logic is for hiding or showing fields depending on other options within the group.
For each group of settings you can define in which cases these settings should appear. Examples are when editing posts, a taxonomy term, or editing an user. You can further customize the visibility of your settings on for example post type. Or if a post has a certain term or page template assigned to it, if a post is by a certain author, if the user role is so or so, the role of the current logged in user, or if the page is a parent page or not. You can also customize where the meta box should appear. However this functionality is somewhat reduced now with the new Gutenberg editor.
Advanced Custom Fields: The code part
Let’s take a look at the more interesting part: how you can utilize Advanced Custom Fields by code. As mentioned earlier, ACF is super developer-friendly and offers a wide range of customizability.
Getting ahold of values and outputting them in your templates is easily done by using ACF’s methods. For example the_field('your_meta_key') for directly echoing it or get_field('your_meta_key') for storing it in a PHP variable. Provide post ID as second argument if you need to fetch data outside the loop. Easy peasy. You could use get_post_meta(), but it’s recommended to use ACF’s methods – as ACF can transform the value into something more meaningful before returning it to you.
Another thing you should be aware of is the export tool within ACF. You can export created groups into two formats; either a downloadable JSON file or pure PHP code. The JSON file is useful if you need to export settings between test and live servers, or another WordPress. Exporting in pure PHP gives you the possibility to directly paste it into your theme or plugin PHP files.
As you might conclude from this; you can use PHP code, either by writing it manually or by exporting it after setting them up in admin, to add your groups and fields. This allows more control and ways to generate custom choices.
But wait, there’s more! ACF also offers a wide range of actions and filters for customizing the fields or their values further. There are hooks for when saving or rendering a field as well as hooks for registering groups by code (mentioned above), and filters for customizing field’s values, settings, or choices before saving or before rendering. You can further specify if the filter should affect all fields, fields by a certain type, or fields by a certain meta key. All hooks and filters are prefixed with acf/.
Have a look at ACF’s documentation page; click on ‘Functions’, ‘Actions’ or ‘Filters’ for an overview. You’ll find great tutorials and guides at this site as well.
A note on Advanced Custom Fields and Gutenberg
Creating custom Gutenberg blocks is at the moment pretty daunting. The documentation is not quite in place, changes to it occur often, and it requires quite a bit of Javascript knowledge to code. Preferably you need knowledge of React and how to set up compiler from JSX/ES6 with webpack and Babel.
However in version 5.8 ACF Pro introduced a feature to set up a field group as a Gutenberg block – allowing you to add custom blocks purely with ACF and PHP code. No Javascript knowledge neccessary!
All you need to do is setting up the groups in admin or by code as usual. But then defining their location as Gutenberg block. All that remains is adding some PHP code to register them as a custom Gutenberg block with acf_register_block(). To that function you define a callback to a PHP function or template file that is responsible for rendering the block output. You write this function or template part fully in PHP and use familiar methods such as get_field() for getting the setting values.
Stay tuned in the Advanced Custom Fields category for tutorials on how to use this plugin!