Advanced Custom Fields and Complex Layouts

Presented at the Chicago WordPress meetup, Oct. 2015

Why do we work in WordPress?

  • Easier for developers?
    • (sure, there’s a plugin for that)
  • Easier for designers?
    • (not really, unless they understand the structure)

I don’t know about you, but I started building sites in WordPress because the end client wants editing control! Sure, a lot of clients say they want control and then don’t ever change anything, but let’s make it as easy for them and ourselves as possible.

WP editor

Theme development is really about creating 2 sites in WordPress. The front end for the visitor, the dashboard for the owner/editor.

Front end
Front end
Back end editor
Back end editor

Ever done this?

No divs in the editor!
Yep, I’m guilty too. It’s so easy to just setup a complex layout in HTML inside the editor. Until of course your editor tries to update something in the visual editor and BREAKS it.

ACF Plugin

Advanced Custom Fields – Pro version

ACF is a very powerful plugin for developers and it’s very nice for content editors. With defined fields placed in a template, your editor doesn’t even have to think about how to get the picture to go over there, or where to put the email address, you control the layout with the template. The editor is then free to change and add without fear of breaking anything.

  • Add fields just for images or with a wysiwyg editor, plus many more options
  • Specify what page, template or post type the field shows up on
  • Pro version includes a Repeater, Flexible Content and Gallery options

Create Fields First

We start with a group
We start with a group

Need several fields for just one page or category of post? That’s a group.


Then add fields
Then add fields

Add the fields you need within a group. Think about how your editor is going to use them. Do they need a full WYSIWYG editor, or will a simple text field do? Do they need to link to another page or create a mailto: link with an email address? Make the content easy to edit while locking down the styles and functionality as much as possible.


ACF Repeater

Repeater fields have sub-fields. Groups of things that can be um, repeated. Like a service section that needs a headline, image and text or a slideshow.

Create the Template 2nd

template creation

Once you have a pretty good idea of what fields you need for a certain page, create a new template page in your theme. Then place the divs and fields where you want and style them. ACF has excellent documentation on how to call different kinds of fields.

design w/ code

When the editor wants to change or add, this is what he sees.
fields in post

Now he can change where something links, update the graphics etc. in a clear and straight forward way. The styling has all been pre-determined so there’s no fear of this layout not looking great. Here’s the real site.

I’m a big proponent of small business site owners knowing how to keep their own sites current. I like to get the theme setup and working with some content and then let the owner take over with adding the rest of the content during development. Yes, this involves time and training, but I find the end confidence and satisfaction of the client to be well worth it. You don’t hand over a car to someone who doesn’t know how to drive. By using custom fields to control the content you can have interesting layouts without sacrificing simplicity of editing for your clients.