Simplifying Flexible Content With Advanced Custom Fields

Sasha Endoh@sashaendohsashaendoh.com



Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.

Charles Mingus

Why Me

I'm a front-end developer, designer, and web strategist running my own interactive design studio here in Montreal

I’ve been at it for nearly a decade, so I’ve worked on a large variety of projects.

These days, the focus of my studio's work is on making WordPress websites for non-profits, cause-based organizations, and other do-gooders.

They are the ones making a difference out there, they are they ones who really need our help.

But has not always been my mandate, so I've worked with all sorts of clients from mom-and-pop shops, to corporations, and everywhere in-between.

What all clients have in common

Regardless of size, funding structure, location etc..

  • clients are terrified of breaking their CMS websites
    • they're not going to be poking around in the admin interface to get to know it better
    • it should be dead simple for them to work with their site's content
    • we ought to reduce risk associated with their interactions in the admin area
  • they are always looking for ways to grow their business, but they don't want to re-design their website each time their business evolves a little
    • they want flexible websites that will grow with them
    • but... "flexibility" means different things in different situations, to different clients
    • this is where your expertise as a web professional comes in really handy
  • They want the best value for their buck
    • this applies to their dealings with you
    • but this also applies to their internal operations

Enter Page builders

The way our (WordPress) community has addressed all of the above points is by developing page builder plugins. They are means to offer:

  • A simple way to change page & post content
  • A flexible system for altering page & post layouts without coding
  • An affordable way to integrate these capabilities

How page builders work

  • Turn the content editor into a widgetized area (like a sidebar)
  • creating rows and breaking them into columns, then populating these columns with content blocks (images, text, list of featured items, CTAs etc.)
  • drag-and-drop functionality to move around blocks of content

Which sounds great!... but let's take a closer look.

WPBakery Visual Composer Overview

  • "#1 WordPress Page Builder Plugin" with 1,000,000+ users
  • at only around $34 USD
  • comes packaged with all those multi-purpose themes you see in ThemeForest, as well as many others
  • offers a front-end editor so you can see your changes as you make them
  • uses shortcodes to compile and output code
  • comes with a large selection of shortcodes out-of-the-box
  • you can "map" your own shortcodes
  • can use your dynamic sidebars
  • and widgets
SiteOrigin Page Builder Logo

SiteOrigin's Page Builder Overview

  • Free
  • uses widgets only
  • comes with a few extra widgets and has an extention plugin with more
  • you can code your own widgets
  • has a front-end "live editor"
SiteOrigin Page Builder Logo

A closer look at interfaces

WPBakery Visual Composter Workflow

A closer look at interfaces

SiteOrigin's Page Builder Workflow

Now let's look at the front-end code

Visual Composer

Visual Composer Output

Page Builder

PAge Builder Output

The leftovers

SO's Page Builder puts the content of your widgets in your content editor if you remove it...

Visual Composer shortcode leftovers

...this is what you're left with after using Visual Composer.

What's the real problem?

It isn't page builders themselves!

They're just catering to an existing audience and their demand for layout without coding, and there are lots of options they have to account for.

The real problem is:

  • when we start using these plugins for client projects, instead of applying our expertise as developers and designers to create custom made solution
    • Do your clients know what CSS classes do?
    • Why should they?
    • Do your clients need all those options?
    • Why should your client need to make layout/design decisions?
  • when we mistake "all the options" for "flexibility"
    • in reality, this is overwhelming
    • which makes it unusable

Introducing ACF

Essentially, it’s the page builder for developers, so that clients can benefit from our expertise without having to re-invent the wheel.

Allows you to create whole meta box areas and gives you control over where they appear

  • comes in two basic flavours: free and Pro (paid)
  • Pro can be purchased separately for each project (at $25 AUD) or under a dev license (at $100 AUD) for unlimited activations.
  • Very well documented and has a fabulous support forum.
Advanced Custom Fields Logo

Available Fields

  • BASIC
    • Text
    • Textarea
  • CHOICE
    • Checkbox
    • Select
    • True / False
  • CONTENT
    • File (Upload)
    • Gallery
    • Image
    • oEmbed
    • Wysiwyg Editor
  • JQUERY
    • Color Picker
    • Date Picker
    • Date Time Picker
    • Google Map
    • Time Picker
  • LAYOUT
    • Clone
    • Flexible Content
    • Repeater
    • Tab
  • RELATIONAL
    • Page Link
    • Post Object
    • Relationship
    • Taxonomy

ACF Admin Area

ACF field groups screenshot

ACF Field Groups

ACF field groups screenshot

ACF Field Groups (cont)

ACF field groups screenshot

ACF Implementation

Displaying data from frields is extremely easy (and very well documented)!

Displaying a field


<?php the_field('field_name'); ?>

Retrieving a field as a variable


<?php
$variable = get_field('field_name');

// do something with $variable

?>
					

ACF Implementation (cont)

Using conditional statements


<?php

if(get_field('field_name')){
	echo '

' . get_field('field_name') . '

'; } ?>

ACF Implementation (cont)

Working with the Repeater Field


<?php if( have_rows('repeater_field_name') ): ?>
    
    <?php while( have_rows('repeater_field_name') ): the_row(); ?>
  • sub_field_1 = <?php the_sub_field('sub_field_1'); ?>, sub_field_2 = <?php the_sub_field('sub_field_2'); ?>, etc
  • <?php $sub_field_3 = get_sub_field('sub_field_3'); // do something with $sub_field_3 ?> <?php endwhile; ?>
<?php endif; ?>

Real world example

Collaboration with Threespot on new website for Poetry in America.

The client:

educational non-profit production company offering a variety of programs, making poetry accessable to all.

Project requirements:

an easy to use and update website that extended the organization's brand; storytelling achieved through felxible display of interstitial content blocks.

Content blocks:

Featured Guests, Featured Staff, Featured Partners, Promo block, a fancy Pullquote, listing of Resources, a simple Button, Social Follow Block, Facebook Post Embed

Poetry in America website screenshot

We were going to use a page builder....

  • ...we saw that as a standard approach to flexibility in WordPress
  • ...we had a clearly defined set of blocks to build
  • ...and we weren't going to waste our client's time with layout decisions
    • in fact, we went with the best UI practice of using a single column content well to have more control over the narative of our website.
  • ...finally, ACF offered us a much more user-friendly approach to setting up the admin area interface!

ACF Admin Implementation

We used ACF to set-up a number of custom fields that allowed for flexbility:

optional title variations, ability to pick whether a tile block has a solid background or a featured image, an optional video teaser instead of a featured image.

ACF Admin Implementation (cont)

We set-up all our pre-defined blocks of content as groups on fields in ACF flexible content field, with a small variants where appropriate.

ACF Admin Implementation (cont)

Here's the interface the client gets to work with.

Displaying data from ACF

The code in for our flexible field blocks


// check if the flexible content field has rows of data
if( have_rows('page_builder') ):
 	// loop through the rows of data
    while ( have_rows('page_builder') ) : the_row();

	// check if current row layout is Text Block
        if( get_row_layout() == 'text' ){
        	$text = get_sub_field('text-block');
        	if ($text){ echo wp_kses_post($text); }

	// check if current row layout is Featured Staff Block
    	} elseif( get_row_layout() == 'featured_staff' ){
    		$staff_members = get_sub_field('choose_staff_members');
    		if($staff_members){
					 	

Displaying data from ACF (cont)

The code in our post & page templates


while ( have_posts() ) : the_post(); 
  the_content(__('Read more', 'poetry')); 
  get_template_part( 'layouts/page-builder' ); 
endwhile;
					 	

And finally the front-end

The magic kicker

None of this matters unless the client gives their seal of approval.

The tutorial for this website lasted half an hour over a conference call with screenshare.

At the end of it, the client told us:

We were worried before this tutorial. But now that we know how easy this system is - we can't wait to start using it!

They went ahead and started adding content right away!!

In Summation

Strategy:

  • figure out what "flexibility" means to your client
  • define what content blocks they'll actually need

Design:

  • make as many design decision as possible (you're the designer!)
    • your clients shouldn't have to create columns and rows, work with layout in general
    • they should be focused on content
  • allow for a little variation but don't overwhelm them with options
  • define areas for more dynamic content
    • this can be a block of featured items on the home page
    • or the main content well of pages
    • and, of course, sidebars if your design asks for them

Development:

  • don't ask your client to learn what CSS classes and IDs do
  • reduce code bloat by optimizing how the design options are implemented

References and further reading

Thank you!

Sasha Endoh@sashaendohsashaendoh.com



Any darn fool can make something complex; it takes a genius to make something simple.

Pete Seeger