Aaron here, A couple of months ago I was chatting to a good buddy of mine – Ben about an idea I had to save developers time when working with WordPress & the awesome Advanced Custom Fields plugin.
The Problem
It can be time-consuming to implement the fields you’ve created with Advanced Custom Fields, especially if you’re working with a team on a complex project.
Most WordPress developers that I chat to have code snippets, keybindings or other workflow shortcuts that will help create the code they need to implement a particular feature or field (this includes myself up until recently).
Snippets can be great, it means you don’t have to memorise all of the features of an API. I created my own snippets for most of the ACF field types, I’ve used them for the last few years and I’ve had the fun of migrating them each time I switch code editor.
When implementing a field within a WordPress theme, it’s likely I’ll forget the field name, was it ‘profile_image’ or ‘profile_photo’ ? I’m also likely to forget how I’ve set that field to be returned, was it ID, URL or Array ? I found myself constantly editing the field group to find out. I’d then have to remember the shortcut for my snippet to get the code for that type of field with a specific return format. If I was missing a snippet I’d have to jump over and search the ACF docs!
Our Solution
To solve this workflow ‘problem’, Ben & I decided to create (another) WordPress plugin and we called it ACF Theme Code. It generates the code needed to implement ACF in WordPress Themes!
When you publish, edit or update an ACF Field Group, the code required to implement each field is displayed for you in the Theme Code section below the field group settings.The code is based on the ACF documentation, the field names are automatically updated and the code generated changes depending on how you’d like to return a field.
We’ve also included a clipboard feature so you can easily copy these code blocks and paste them into your theme, so our plugin should save you loads of time!
Free & Pro versions
We have a Free version that generates code for all of the fields found in the free version of ACF. The free version of ACF Theme Code is available on WordPress.org, it’s already had over 800 downloads!
We also have a Pro version that generates code for all of the fields within ACF Pro. This includes the complex fields like clone, repeater, gallery and flexible fields. Our Pro version also generates code for a bunch of popular 3rd party fields including the Font Awesome field and Image Crop Field. ACF Theme Code Pro version is available for purchase from this site!
Issues
We ran into a couple of issues along the way, the first one that caught us off guard was due to the way the field group data is stored in the database. The field group data is stored differently in different locations between the free (v4) and Pro (v5) version of ACF. This slowed us down a little but we’re now able to generate code for both the Free and Pro versions of ACF.
Another issue we encountered is regarding field group ‘locations’. You can set a field group to be shown not only on a page or post – but on an options panel, user profile page etc. If that’s the case the code generated will need a couple of tweaks to finalise the implementation. We had this issue partially solved and then we also realised a field group could be set to multiple locations. We’re working on a solution for this one & plan to release a feature to address this soon!
Summary
It’s been a great working with Ben on this plugin, I’m stoked with feedback we’ve received from WordPress developers around the world. I’m looking forward to introducing support for more third-party fields and other developer features in the future!
If you’re interested in finding out more about ACF Theme Code head over to our downloads page.