Tips on using the WordPress plugin Advanced Custom Fields Pro to build custom websites.
Advanced Custom Fields (ACF) is a plugin for WordPress to help manage custom fields and edit screens. I definitely recommend getting the Pro version as it gives you access to the Repeater, Flexible Content and Clone fields, among other features, which I think are essential.
This article is for people who are already familiar with the plugin, but want to get a little more out of it. I will assume you have a design and you are trying to build a custom website from it. Most tips are not exclusive for ACF, but how you build your theme to use it.
1) Split the design into logical sections
Many times I see someone building a custom field group with 20, 30 or 40 fields. These types of groups become unmanageable due to their size and complexity. You will not be able to reuse most of these groups on other pages.
Instead, try to follow the natural structure of the design. Most designs are split into sections and sections are split into components. You should aim to create a separate field group for each section and for each component.
Example: you have a section with a custom background, a heading, a text, a slider and a button. You create a separate field group for it. Maybe the button needs extra options to customize the styling, whether it opens in a new window, etc. That type of button is probably reused on other sections, so I would recommend creating a separate group for it as well, to avoid having to recreate the same options more than once.
To make use of these field groups you can use the Clone field type. With the Clone field you select a group that will be cloned into another group, thus you are able to reuse the same group multiple times. By paring cloned fields with a Flexible Content field you can achieve a truly dynamic template, where you are able to pick the sections you want to use on each page.
Summary:
- Don't create huge monolithic field groups.
- Create partial field groups, splitting into sections and components.
- Use Clone and Flexible Content fields.
2) Build sections with reusability in mind
Another common pain point that can come up when building a custom site is to create field groups that are too specific to a particular page. You should aim for reusability. Build for the page you are currently working on, but try to keep an open mind about where that might be used in the future.
This means taking into account that all the content should be editable: headings, body text, images, button labels and destinations, etc. Configurability should be the norm. Even sections that look similar can be grouped into a single field group (e.g. imagine a section that shares the same fields but is only different in color or style - that can be done in a single group with a couple of fields to specify the styling).
Most fields should be optional. The layout shouldn't break if you decide to leave a text field empty, nor should it render an empty element. In the same vein, lists should support varying lengths. You should be able to support lists from 0 to N items without causing issues to the layout. Obviously if the layout is complex in itself, you might have to settle for a fixed min/max length, but you should strive for flexibility.
Another issue is giving very specific names for a group and its fields to match the design. You should try to give names that represent their working nature. Instead of a group called "Find out why we are the best", call it "Features List". Instead of "Get started button label", simply call it "Button label". This will make it easier to understand that the groups are reusable on new pages.
Summary:
- Create groups that can be reused on new pages.
- Assume all content in the design is editable.
- Assume most fields are optional.
- Assume lists vary in length.
- Use generic names that represent true nature.
3) Make easy to edit layouts
When making a field group you should take into account how easy it will be to edit that page. For example, there are many situations where fields only need to be entered depending on other fields, otherwise they can be hidden as they provide no value - you can use Conditional Logic settings for that (i.e. only show a field if a select/checkbox/radio has a specific value).
To make advanced layouts you can use groups and tabs as well, and further divide a group into logical sections.
Depending on the type of layout it might make sense to give a specific width to a field (a width for the edit page) - some layouts work better when they are compact and you can put several fields on the same row using custom widths. You can even go as far as to provide a custom CSS class to a field and then use CSS to apply custom styling to it - in some cases it's very useful to make a field standout or to accomodate specific scenarios.
Fields also have formatting options (e.g. automatically apply paragraphs to new lines). The important thing is to be consistent. If in one text field you turn new lines into breaks, do the same for the rest of the text fields elsewhere. The key is not to break user expectations.
Summary:
- Use conditional fields.
- Use tabs and groups to compartimentalize fields.
- Use field settings for more advanced control.
4) Use Theme Options for general settings
ACF provides features to help manage generic option pages for your theme. Make use of them to create generic settings, e.g. settings for the header, footer, generic options for groups of pages. Divide the options into several sub pages to keep each page simple and fast.
5) Use acf-json for automated workflow
acf-json saves your custom fields to a local folder automatically. Just create a folder named acf-json inside your theme and the files will be saved there. Then you have the added bonus of the fields being pushed to git. If you have automated deployment (you should), then the fields will be deployed to the external environment as well.
So you have a completely automated setup and the only thing you need to worry about is to sync the custom fields locally before working on them. No manual changes should ever be done on staging or production environment - only do changes locally and always sync the custom fields (more info on how to avoid conflicts).
Conclusion
ACF has a lot of advanced features that help to manage complexity and promote reusability. Learn how to use them and they will make your life easier, but don't go overboard with complex layouts - keep them simple to work with as that is usually the best for performance as well.