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('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
if ( get_field('sub_title') ) : print '<h2 class="sub-title">'.get_field('sub_title').'</h2>; endif;
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
'option' parameters as
get_field(). It’s basically the same thing as
if ( get_field('staff_image') ) : the_field('staff_image'); endif;
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.
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.
James is a Senior Front-End Developer with almost 10 years total experience in freelance, contract, and agency work. He has spoken at conferences, including local WordPress meet-ups and the online WP Summit. James's favorite parts of web development include creating meaningful animations, presenting unique responsive design solutions, and pushing Sass’s limits to write powerful modular CSS. You can find out more about James at jamessteinbach.com.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja