Spruce interactive

Noise

Highly Flexible Layouts using ACF Flexible Content & Repeater Fields

Posted: June 15th, 2012

Author: KJ Parish

Tags:

, , , , ,

 Details

Are you using Advanced Custom Fields Yet? Well, if you build CMS sites using WordPress, you’ll be hard pressed to find anything better than ACF. We know–we tried a lot of the tools out there and it’s the best. What’s better is that Elliot Condon keeps making more awesome things for us developers to play with and make our lives even easier. The latest add-on we’ve come to love is Flexible Content. It’s awesome. It’s made even more awesome, however, when used in combination with the Repeater Field.

Why Flexible Content?

In a recent project, the site in question had a fairly standard 3 column layout, but within those columns, different kinds of content could appear depending on the page. Here’s a super basic visual of what I am talking about here.

If you are going to build a CMS in this format, you’ll likely want to use the following custom field types in your layouts:

  • Text area, or WYSIWYG
  • Repeater Fields which allow you to create 2 text and/or page link fields for each link (the display title, and the URL).
  • Image
  • Video
  • Repeater fields for entering team members containing an image field, and as many text fields as you need in order to display contact info.

Now, knowing this, you have some of options.

  1. You can create a single field group called “3 Column Layout” and have all 3 ACF fields be WYSIWYG fields, and leave all formatting up to the client. This would be doable for you or me, but let’s face it…we all have clients that write full paragraphs in <h1> tags. So, don’t do that or you’ll see some really awful stuff on the site in no time, and will likely be fielding many confused calls from the client.
  2. You can create a single field group and add every possibly ACF field the client might like to use within all 3 columns, but this solution will leave a lot of fields in the page’s admin panel that the user might not need  or ever use within a given column on a page. This really clutters things up, so we don’t recommend that either.
  3.  Create Flexible content fields for EACH column, all within one Field Group called  ”3 Column Layout.” This one is a lot like #2, only this time, the client will click a button to add content, and then choose the content format they want to add.

An Example

Looking at the home page mockup again, the left column will need to allow the user to add a WYSIWYG editor, as well as any number of internal or external links below it.

This is going to involve adding a flexible content field for “Column 1″, and then adding 2 field types within it:

  • WYSIWYG
  • 2 Repeater Fields for both types of link options: internal and external. For the internal links repeater field, we’ll add a text field for each link display title, and a Page Link field so the user can select the (internal) page link from a list. The second repeater field for external links will simply contain 2 text fields for display title and URL. Nothing crazy.

To keep this tutorial simple, I am only showing these 2 content areas for column one, but don’t forget that other columns on other pages will have additional content types, like images, video, etc. Once you get the basic principle of working with flexible fields and repeater fields, you can extend this to include as many content types as you wish.

You’ll see below that I’ve added a flexible content field in Advanced Custom Fields called Column 1 Content (col_1_flex). Under this, I have 2 layouts for WYSIWYG and Links.

Within Links, I have 2 Repeater Fields for Internal and External links.

In your page.php template, you’ll need something along the lines of:

<?php               
if (get_field("col_1_flex")){
  while (has_sub_field("col_1_flex")){
    if (get_row_layout() == "wysiwyg"){
      the_sub_field("wysiwyg_content"); 
    }  

    if (get_row_layout() == "links"){  
      $rows = get_sub_field('internal_links'); //Repeater Field Name
      if ($rows){ 
        echo '<ul>';
        foreach($rows as $row){
          echo '<li><a href="'.$row['internal_link'].'">'.$row['internal_link_display_title'].'</a></li>'; 
        }
        echo '</ul>';
      }

    $rows = get_sub_field('external_links'); //Repeater Field Name
    
      if($rows){ 
        echo '<ul>';
        foreach($rows as $row){
          echo '<li><a href="'.$row['link_url'].'">'.$row['link_display_title'].'</a></li>'; 
        }
      echo '</ul>';
      }
    } 
  }
}
?>

Here’s what the client sees when they edit the page and hover over the “Add Content” button.

Now – imagine we had every content type we could possibly need for column 1 within flexible fields. This would mean the client could easily put in content within a column in a simple and easy manner, and we designers and developers can still format whatever they add with ease without having to create a bunch of different ACF field groups for each page or post.

Note: A previous version of this tutorial used the_flexible_field() instead of has_sub_field(). This was updated on 10/25/2012, as the_flexible_field() is deprecated as of ACF v3.3.4 (see: http://www.advancedcustomfields.com/docs/functions/the_flexible_field). Many thanks to Matt for the heads up!

  • Jonah

    This is awesome, thank you for sharing! This really demonstrates the power of ACF. I ended up taking this a step further on a site by setting up a layout taxonomy (for Full Width, sidebar/sidebar/content, sidebar/content/sidebar, content/sidebar/sidebar and so on) and then conditionally using different flexible fields for each of those columns in any layout. This allowed for even more flexibility within the website because the client can select any of the layouts and then add content for that layout on a page by page basis. Then it was just a matter of setting up all the CSS for the different layouts. Pretty cool stuff IMHO. Maybe I’ll post my own overview on how I did that someday :) For now, hopefully this gives others some ideas of what you can do with this incredibly powerful plugin.

    Thanks again for the post!

  • Adam

    Thanks for putting this together. I was having a hard time with flexible fields and repeater fields working together. Thanks to your code, I was able to duplicate what you did (got that working!) then figure out what my error was with my code and fix it.

    Thanks again!

    • spruceit

      Our pleasure! Glad this tutorial helped you.

  • Matt

    Hey guys! Great article and extremely helpful to see the “mini-wire framing” as examples! Best one that includes flexible content and repeater fields.

    I was a little confused by the code at first until I found that Eliot has depreciated the ‘the_flexible_field’, function, replacing it with ‘has_sub_field’, if you are itching to update this informative article!

    • spruceit

      Thanks Matt! We’ve updated the tutorial to reflect the new function in ACF. Really appreciate the tip!

  • Adam

    Hi, is the repeater field included in flexible content? Or do I need to buy both to accomplish what your doing in this article?

    • spruceit

      Hi Adam! Yep, you’ll need to purchase both add-ons to reproduce the demo above. That said, once purchased they’re yours to keep and use on as many sites as you’d like, so we’ve always felt it’s a pretty fair pricing model. Once you start using ACF you’ll never go back to plain old WordPress!

  • http://www.mobileappaddict.com/ John Defahl

    ACF is a seriously ridiculously powerful plug-in. If it actually works along with the JSON=API, then this could mean a whole lot of work already done.

  • Mimi

    I am using this loop and it’s working okay. However, if the client wants to revise his entry and deletes one of the repeater fields through the admin panel, it still appears on the webpage. Did that happen to you too?

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