Spruce interactive


For the Love of the Advanced Custom Fields (ACF) Plugin

Posted: May 16th, 2012

Author: KJ Parish


, , ,

 Details

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.

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com