For the Love of the Advanced Custom Fields (ACF) Plugin
Posted: May 16th, 2012
Author: KJ Parish
That’s right - for this newly redesigned Spruce website, we are going to dedicate our very first post to Elliot Condon and the amazing work he’s put into making the Advanced Custom Fields plugin for WordPress. It’s no secret…we love WordPress, and this plugin as has become instrumental in our workflow as we handcraft custom WordPress themes for our clients. ACF allows us to completely customize the client experience, and helps us transform WordPress into a robust CMS.
This tutorial doesn’t cover ACF basics or theming with code examples–for that, you should check out the documentation and code examples here. What we’ll mostly be talking about here is how to create a great client experience in the back end.
ACF allows you to add fields to pages and posts, and then customize where these fields display (example, perhaps you only want to display some fields on posts with the “news” category). Each field type comes with nice little code examples for creating customized themes. I’m sure we’ll be talking more about this plugin in the future since we can’t cover it all here. But let’s dive in a bit with a real-life example.
Using Advanced Custom Fields to Build a Custom Page Template with Repeating Fields
A recent client of ours is an author who needed a way to feature his books on his website so readers could learn more about them, read reviews, and purchase them. In addition, we needed to make the “books” page flexible enough that the author could add new books to the page whenever he needed to.
Here’s a view of that books page I just mentioned.
We could have opted to create a “books” category and do some PHP wizardry to feed a “books” loop to the “books” page with standard custom fields. But, this isn’t really all that user-friendly clients and we wanted to make the administration of the site as clean and simple as possible. In addition, we don’t really love the default WordPress custom fields functionality.
This is where ACF comes to the rescue. Looking at the image above, here are the fields we needed to create in order to make an easy-to-edit nice user interface for each book in the admin panel:
- Book Title
- Book Subtitle
- Book Image
- Book Description
- Featured Press
- Drop-Down (expanded to show all) Press
- Basic Book Specs
- Amazon Hardcover Link (optional)
- Amazon Paperback Link
- Amazon e-book Link (optional)
- Indiebound Paperback Link
- Amazon Review Link
- Goodreads Review Link
- Shelfari Review Link
- Google Books Review Link
- Barnes and Noble Review Link
A couple other important requirements:
- We only wanted these fields to appear on the “books” page.
- Furthermore, we needed all of these fields to appear for EACH book the author added.
Fortunately, this is all no problem thanks to ACF’s core features and the “Reapeater Field” Add-on.
Building the Field Group
Below, you’ll see how we set up the fields for the “Books” page.
We started by giving the field group a name: “Book Page Fields.” Then, we created a new “repeater” field for “Book Details” and nested all related book fields within that repeater field. This is how it looked when we finished.
The Repeater Field Add-On
A “repeater field” allows you to group a series of fields together under one label, and then gives you the option to add that field group to the page as many times as you want. So, in our case, we can add as many books as needed and all of these fields will be generated quickly and easily so the author can fill in the details for his new books for many years to come.
Here’s how it looks to the author:
Whenever the author has a new book, he simply needs to add a new row (i.e. book)
It’s just so easy and great. A big thanks to Elliot Condon for making this plugin available.
Comments are closed.