We use a number of WordPress plugins on GeekWire. One of the most useful ones we’ve found is Advanced Custom Fields (ACF), which enables easy input and output of custom fields. We use custom fields extensively, and I can’t imagine our WordPress development workflow without this plugin. It has literally saved us hundreds of hours of tedious work.
WordPress custom fields
WordPress custom fields allow post authors to assign a variety of metadata to a post. This metadata can literally be anything. We use custom fields to do things like specify expiration dates for certain post types, associate external URLs with a post, add parameters for link tracking in Google Analytics and enter lists of speakers and sponsors for our events posts.
Once a custom field is assigned to a post, you can do interesting things with them to display data on your site. You can use a custom WP_Query object that only returns posts that have a particular value in a custom field, for instance. You could also retrieve the custom field values for display on your site. A great example on our site is our Startup List. Each company in the list is a post with a variety of custom fields. We retrieve things like the URLs to the company and its social media profiles to display in a table. In the case of our Seattle Engineering Centers page, everything you see, except for the name of the company, is stored as a custom field.
Building a WordPress custom fields meta box
If your WordPress posts has custom fields enabled, you can simply enable display of “custom fields” using the Screen Options dropdown at the top right of the admin screen. This provides a very rudimentary meta box in the post editing screen.
Obviously this box gives no direction to a post author on what sort of data your theme is expecting and isn’t even remotely user friendly. To effectively use custom fields, you need to add a custom meta box to your post editing screen that makes the data entry easy to understand and not prone to errors. Here is an example from our site to enter data for our Startup List.
Creating a custom meta box doesn’t involve any super difficult code, but it is extremely tedious. Your code needs to specify the HTML for entry of each field, deal with any data formatting or verification rules, save the values to the database, retrieve the values of from the database, sanitize the user input and add the meta box to the edit screen. A simple metabox with a few fields will easily be more than 100 lines of code. You can see a lengthy example in the Codex for add_meta_box for a simple one-field meta box.
Why ACF is so useful
Advanced Custom Fields allows you to create a complex UI for entering custom field information with zero code. What might take you a couple hours to code yourself becomes a two-minute exercise for creating custom post editing screens.
ACF uses field groups to attach custom fields to posts. The field group lets you change the ordering of custom fields and determine which post types you’d like to attach your field editing screen to.
Once you’ve created a field group, you can enter a variety of custom field types. ACF allows you to specify a field label and field name, the latter of which is used as the meta_key to store the data in the WordPress database. You can select from a wide variety of field types such as a text box, WYSIWYG editor, date picker, image upload, checkbox, image gallery, oEmbed object, Google Map location and more. Many field types like email, URL or number have built-in data verification logic to prevent improperly formatted values from being stored in the database.
You can also add polish to your post editing screens by providing instructions to authors about each field, conditional logic about when a particular field should appear for data entry, placeholder text for input fields and CSS class and id attributes to enable you to apply custom styles to the form.
Displaying custom fields on your site
Once you’ve built a field group and your authors have entered custom data, you need to display the data on your site or use it to affect how your site gets rendered. ACF doesn’t provide a lot of magic here, as you need to determine how you are going to use the custom field data to either output or affect the display of your site using your theme.
The post editor forms you build with ACF Field Groups use standard WordPress postmeta. What that means is that it stores the data in standard meta_key/meta_value pairs in the database. In many cases, there is actually no requirement to use ACF functions to access this data. You can use standard WordPress functions like get_post_meta or WP_Query custom field parameters to get at the data that your authors have stored.
ACF does offer its own API to access custom field data as well. Simple examples like the_field('field_name') or get_field('field_name') allow a developer to quickly retrieve and use custom field data. The nice thing about the ACF APIs is that you can specify what sort of values you want returned. For example, if you have an image upload field, get_field can return an image URL, image ID or array of image metadata, depending on what you need in your code.
Where the API is really helpful is when you use things like repeater fields. A repeater allows fields to be entered again and again on the same post. Using a combination of have_rows, the_row and the_sub_field from the ACF API, you can iterate through these fields to display data on your site in very similar fashion to a WordPress loop.
Getting started with Advanced Custom Fields
ACF comes in two versions. The free download from WordPress.org contains most of the basic functionality. Upgrading to the paid Pro version enables more complex field groups like the Repeater Field, Gallery Field, Flexible Content Field and Options Pages. Purchase of a developer license enables you to deploy the plugin to client websites. You can even distribute ACF in your own plugin/theme if you are a commercial theme developer.
ACF is heavily used in the WordPress community, with 900k currently active installs according to WordPress.org. ACF is also actively developed and properly supported by its developer, which is a key criteria when evaluating any WordPress plugin.
If you are a developer who needs to work with any sort of custom meta data related to your WordPress posts, I definitely recommend checking out ACF. It will save you lots of time.