Organizing ACF Fields with Tabbed Layouts

I’ve said it before, I adore the WordPress plugin Advanced Custom Fields (aka ACF). It has changed my world as a web developer and I feel like each time I build a website, I come up with more streamlined ways to implement its many features.

One of my primary focuses when I build WordPress websites, is on the person who will be responsible for populating site content. Yes, you got me, the unsung hero of WordPress websites. While CMS customization is not something that gets a ton of attention, setting this up in the most UX-friendly way possible, is a huge part of my workflow. When a WordPress CMS has been customized to be as intuitive and flexible — clients can take complete ownership of their website, not only easily managing and editing content, but also confidently creating new pages with custom layouts.

In addition to the variety of field types ACF makes available, it also has some field types that have been created with this in mind – making content population easy and intuitive for whoever has been tasked. Some of these fields are: groups, tabs and a new one: accordions. Today I’m going to talk about tabs and how using them can make things so much easier for your end user.

Use Case #1: Flexible Content

Flexible content makes this a breeze. I recently worked on a website that didn’t use page templates at all – it just used a flexible content field with a variety of options such as: Content Block, Call-to-Action, Image Card Grid, Page Hero… to name a couple.

Anyhow each of these sections needed the following:

  • Ability to set custom background with the following options: background color, background image and background gradient.
  • Fields for custom top and bottom padding values
  • Light or Dark Text checkbox
  • Option Max-width value on wrapping container

Additionally I wanted to allow the user to be able to add custom classes to these sections – like bootstrap helper classes as well as unique IDs – as many of these panels were going to be customized with SVG animations.
But putting all these options into each flexible content panel in addition to the fields themselves seemed like it would be pretty overwhelming for the user … especially on more complex fields like something with a repeater.

The solution?
Tabs! For each section I created 3 tabs: content, appearance and settings. All content gets populated in content tab, style settings in settings tab and custom class and I’d in settings. Some other ideas I had were an instructions tab and a responsive settings tab.

Use Case #2: Options Page

Another thing I’ve started doing is creating a Global Options page (using ACF obviously) entitled Helpers. Here I like to add information on things like, documentation on any shortcodes I’ve created, details on available helper classes, or typography tips and tricks. I create this documentation with the “Message” fieldtype and organize them into groups with left-aligned tabs. So far, this has proven to be an invaluable resource for my clients!

Are there any tips and tricks you use to make things easier on the content people? Shoot me an email!