Advanced Custom Fields - Flexible Content

Advanced custom fieldsAdvanced Custom Fields plugin acts as a GUI layer for

custom fields.

Here is the difference between native custom fields and Advanced Custom Fields.It provides a much friendlier user interface to edit content.

Advanced custom fieldsFlexible Content

This allows users to enter an unlimited amount of layouts including repeating content with control over the order.

ACF VERSIONS

There is a free version, personal and PRO version of advanced custom fields.The personal version($20) is for one website, the PRO version is for unlimited sites.

Plugin advanced custom fields PRO ($100).● Plugin lets you create custom fields, as well as repeaters, flexible content, gallery,

etc.● We’re going to talk about defining your own webpage content layout using flexible

content. http://www.advancedcustomfields.com/● Can create layouts that will allow users to enter just about any kind of content like

text, video, galleries, maps and layouts.

GoalCreate homepage template where the user can enter content into a variety of layouts.

Demo with the following content layouts:● Hero with a background image and

optional CTA button (uses conditional logic)

● Content with 1, 2 or 3 columns● Content with 2 columns, one text, one

image● Image with caption● Gallery● FAQ’s (repeater)

Once plugin is installed, we will:

● Create field group of type flexible content

● We can assign content to appear on a page, post or CPT, so when we edit our homepage, the layout will appear

● Can import/export code● Can show or hide items

Here is a list of all the possible field types we can use.

Let’s start creating our layouts.

This shows the Hero layout:● Add new layout called Hero● Add 5 fields

○ Hero image○ Hero text○ Display CTA button(this

is a conditional field so user can turn this off or on)

○ Hero button URL○ Hero button text

There are 5 more layouts that we’ve created.

Let’s look at how this looks in the admin.

Conditional Logic

true/falseDisplay button conditionally

Conditional logic to show or hide button CTA button.

Select field type for number of columns. Conditional logic to show or hide column 3.1-3 Column layout (Services)

FAQ’s using repeater field type.

Sub Fields for question and answer.

USER ENTERS CONTENT

User can:● Create layouts with desired

content● Drag to reorder any of the

content

CREATE TEMPLATE FILES IN THEME TO DISPLAY CONTENT

What’s being used in theme:● Theme with Bootstrap● ACF plugin● Flickity slider to display gallery

Layout/File StructureEach ACF layout corresponds to a specific templateI’m creating a template file for each layout type

Theme fileshome-page.phpHomepage layout

Main template file: home-template.php

Check if we have rows

If we have layout call:get_template_part()

So if we have a hero layoutcall /partials/stripe-hero.php

stripe-hero.phpThis is the template file that will display our hero content

We use get_sub_field()to get the field values.

Create HTML structure for our layout.

Set background image

Display field values

Can use the_sub_field()to display fields.

Note: In template files, we can use ACF functionality to display fields, or use WP function get_post_meta.Using get_post_meta will work even if plugin is removed or deactivated.

$rows = get_post_meta( get_the_ID(), 'home_page_content', true );if( !empty( $rows) ) {

foreach( $rows as $count => $row ) {if ($row == 'hero') {// HERO

$rows = get_post_meta( get_the_ID(), 'home_page_content', true );if( !empty( $rows) ) {

foreach( $rows as $count => $row ) {$hero_image = get_post_meta( get_the_ID(), 'home_page_content_' . $count . '_hero_image', true );$image_src = wp_get_attachment_image_src( $hero_image, 'full');if ($hero_image) {

$bg = wp_get_attachment_image( $image, 'large' );}$content = get_post_meta( get_the_ID(), 'home_page_content_' . $count . '_hero_text', true );$display_cta_button = get_post_meta( get_the_ID(), 'home_page_content_' . $count . '_display_cta_button', true );if ($display_cta_button) {

$hero_button_url = get_post_meta( get_the_ID(), 'home_page_content_' . $count . '_hero_button_url', true );$hero_button_text = get_post_meta( get_the_ID(), 'home_page_content_' . $count . '_hero_button_text', true );echo '<p class="cta"><a class="button" href="' . $hero_button_url . '">' . $hero_button_text . '</a></p>';

}}

}}elseif ($row == ‘services’) {// SERVICES…}

}}

Let’s edit and display our content

RESOURCES

● http://www.advancedcustomfields.com/● http://www.advancedcustomfields.com/resources/flexible-content/● Good documentation and example code on ACF website● Videos show how to create layout similar to my demo● Google search will take you to some good posts on how to create layouts

Norm Euker - http://www.njedesign.comDemo: http://njedesign.com/demo/acf/