Getting Started with Advanced Custom Fields (ACF)

Why Use Custom Fields?

I can’t begin to express how blown my mind was when I got started with Advanced Custom Fields (ACF). When I started using WordPress, I figured out how to bend Posts and Pages to do a whole lot more than they should have. I’d give clients very specific instructions for using Categories and Parent Pages in convoluted ways. Then I discovered custom post types and my instructions got a whole lot simpler.

But even with separate post types, not every piece of content fits neatly into a title+content+excerpt+thumbnail mold. Events require start dates and times. Employees often need email addresses or titles. Products might have prices, color variations or sizes. All these content types push WordPress beyond simple custom post types.

What About Plugins?

One solution to this is to find a plugin for each and every kind of custom content you need. Install WooCommerce for products, The Events Calendar for events, Meet My Team for employees, Soliloquy for slides, or WPP for portfolio items. That works for a lot of people: it’s faster to develop that way at first.

However, I’m not a fan of plugin smorgasbords for two reasons. First, every plugin you add affects site speed (hardly any speed it up!). Chances are high that every content type plugin you add will add its own JS and CSS files to the front end. You can literally watch your Page Speed score plummet as you add those plugins. Second, most plugins you use will look different from your theme (with the exception of premium themes that are “compatible” with major plugins). This will have one of two negative results: either your site will look like it’s been patched together from three or four plugins, or you’ll spend a ton of time overriding plugin CSS to make plugin content types look like they belongs in your theme.

ACF Field Types

Advanced Custom Fields (ACF) provides a way to attach almost any kind of custom field imaginable to your post types.

Included Field Types

The ACF plugin comes with more than 20 field types by default:

Text: Single line text field, optional HTML support, character limit
Text Area: Multi-line text field, optional HTML support, character limit
Number: Number, min/max values
Email: Validates email input
Password: Masks text for password input
Wysiwyg Editor: Optional WP media insertion, basic/full editor buttons
Image: Upload image or select from WP library, returns object, url or ID
File: Upload file or select from WP library, returns object, url or ID
Select: Provide options in drop-down, supports multi-select
Checkbox: Allow selection of multiple items in checkbox list
Radio Button: Allow selection of single item from radio button list
True / False: Simple true / false selector
Page Link: Returns URL of any post or page, can be limited to specific post types
Post Object: Returns WP object of any post or page, can be limited to specific post types or taxonomies
Relationship: Same as post object, but with improved interface and drag-drop reordering
Taxonomy: Returns object or ID for one or more taxonomy terms, can be limited to tags, categories or custom taxonomies
User: Select one or more users, can be limited by role
Google Map: Set lat/long center, zoom level, and width
Date Picker: Select calendar date, return formatted date string
Color Picker: Select hexadecimal color
Message: No options, leave a message for users
Tab: Collect following fields into a tab interface

Free Add-on Fields

The WordPress plugin repo and the ACF add-ons page have a number of helpful add-on plugins for ACF. These plugins allow users to select a menu, select a sidebar select a Gravity Form, collapse complex field groups and import spreadsheets.

Paid Add-on Fields

There are a few premium ACF add-ons that are very useful. Most cost around $25 and are well worth it, in my opinion.

Repeater: The ACF Repeater Field allows users to develop complex layouts with any number of fields. For instance, a repeater field could contain a Text field, an Image field and a WYSIWYG field, allowing users to create a list of “Services” with icon, title and description.

Flexible Content: The ACF Flexible Content Field allows users to set up multiple layouts (each made of multiple fields) which can then be selected and used in any order on the page. See this Snow Fall tutorial for an example of Flexible Content fields in action.

Options Page: The ACF Options Page add-on allows developers to create custom options pages in the Dashboard, then attach any set of custom fields to those pages. This is quite useful for collecting site-wide data, such as company address, social media links, phone number or theme color options.

Attaching Field Groups to Content

ACF Field Groups can be attached to content by any criteria: post type, page template, parent page, post category or tag, taxonomies themselves, media, and users.

On the Edit page for the content that the field group is attached to, any pieces of the default WordPress admin can be hidden (Editor, Featured Image, Slug, Author, etc), and the Field Group can be place below the Title, below the Editor, or in the right column.

Using ACF Fields in Templates

ACF provides several useful PHP functions for including custom field data in WordPress template files. The ACF Documentation pages have a great deal of useful information. The following are some of the most common functions used.

`get_field()`

The get_field('field_name', $post->ID, 'option') function returns the formatted contents of the custom field whose name is passed as a parameter. A post ID parameter is optional: if this function is being used outside the loop or to access fields from another post or page, the ID would be necessary. If the field is on an Options Page, include the 'option' inside this function.

Since this function returns data, it can be assigned to a variable, or displayed with print or echo.

if ( get_field('sub_title') ) :
	print '<h2 class="sub-title">'.get_field('sub_title').'</h2>;
endif;

`the_field()`

The the_field() function echos the contents of the field, formatted according to the parameters in the Custom Field Group admin area. It can take the same $post->ID and 'option' parameters as get_field(). It’s basically the same thing as echo get_field().

if ( get_field('staff_image') ) :
	the_field('staff_image');
endif;

Subfields

If the custom field is in a Repeater Field or Flexible Content Field, use get_sub_field() and the_sub_field() instead. The $post-ID and 'option' parameters work the same way.

Looping Through Fields

To loop through all the rows in a Repeater Field or Flexible Content Field, use have_rows('field_name', $post->ID, 'option') and the_row(). These functions work very similarly to the WordPress loop functions:

if ( have_rows('image_rows') ) :
	while ( have_rows('image_rows') ) : the_row();
		the_sub_field('row_icon');
		the_sub_field('row_title');
		the_sub_field('row_text');
	endwhile;
endif;

The Flexible Content Field has multiple layouts. The function get_row_layout() returns the name of the layout in use at that iteration of the loop.

Conclusion

When it comes to using Advanced Custom Fields to make WordPress a highly-configurable CMS, the sky is the limit. These fields can be used to create precise custom content input and style to create complex custom layouts. Share one of your best ACF-enabled projects in the comments, or ask a question about using these fields in one of your sites.

Frequently Asked Questions (FAQs) about Advanced Custom Fields

How can I use Advanced Custom Fields (ACF) to customize my WordPress site?

Advanced Custom Fields is a powerful tool that allows you to add custom fields to your WordPress edit screens. These fields can be used to collect and display more information than is possible with the standard field set. You can add fields like text, images, file uploads, and more. To use ACF, you first need to install and activate the plugin. Then, you can create a new field group and add your custom fields. Once you’ve set up your fields, you can add data to them in your edit screens and display that data in your theme files using the appropriate ACF functions.

What is the difference between the get_field and the_sub_field functions in ACF?

The get_field and the_sub_field functions are used to retrieve data from your custom fields. The get_field function is used when you want to retrieve data from a field at the top level of your field hierarchy. On the other hand, the_sub_field function is used to retrieve data from a subfield within a repeater or flexible content field. Both functions return the value of the field they are called on, but they are used in different contexts depending on the structure of your fields.

How can I display data from my custom fields in my theme files?

To display data from your custom fields in your theme files, you need to use the appropriate ACF functions. For example, if you have a text field, you can use the get_field function to retrieve the data and then echo it out in your theme file. If you have a repeater field, you would use a while loop with the have_rows and the_sub_field functions to display each item in the repeater.

Can I use ACF to create custom options pages?

Yes, you can use ACF to create custom options pages. This is a powerful feature that allows you to add custom fields to a new or existing options page. You can use this to create a set of global options for your site, like a set of social media links or a site-wide banner. To create an options page, you need to use the acf_add_options_page function in your functions.php file.

How can I use ACF with custom post types?

ACF works seamlessly with custom post types. When you create a new field group, you can choose to show it on any post type, including custom post types. This allows you to collect and display more specific information for each type of content on your site. For example, if you have a custom post type for events, you could use ACF to collect and display information like the event date, location, and price.

Can I use ACF to create custom widgets?

Yes, you can use ACF to create custom widgets. This allows you to add custom fields to your widgets, giving you more control over what data is displayed and how it’s presented. To create a custom widget with ACF, you need to create a new field group and set it to show on widgets. Then, you can use the get_field function in your widget code to retrieve and display the data.

How can I export and import my custom fields with ACF?

ACF includes built-in tools for exporting and importing your custom fields. This allows you to easily move your fields between sites or share them with others. To export your fields, you can use the Export tool in the ACF settings. This will generate a JSON file that contains all of your field settings. To import fields, you can use the Import tool and upload the JSON file.

Can I use ACF to create custom Gutenberg blocks?

Yes, you can use ACF to create custom Gutenberg blocks. This allows you to create your own blocks with custom fields, giving you more control over the content and layout of your posts. To create a custom block, you need to register a new block type with the acf_register_block_type function and create a new field group for your block.

How can I use conditional logic with ACF?

ACF includes a feature called conditional logic that allows you to show or hide fields based on the values of other fields. This can be used to create more complex forms and to streamline the editing process. To use conditional logic, you need to set up your conditions in the field settings. You can choose which field to base the condition on, what the condition should be, and what value to compare it to.

Can I use ACF to create front-end forms?

Yes, you can use ACF to create front-end forms. This allows you to create forms that users can fill out to submit content to your site. You can use any of your custom fields in your forms, and you can control where the submitted data is saved. To create a front-end form, you need to use the acf_form function and pass in an array of settings for your form.