Advanced Custom Fields - Flexible Content

1. Advanced custom fields
Advanced Custom Fields plugin acts as a GUI layer for
custom fields.

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

3. Advanced custom fields
Flexible Content
This allows users to enter an unlimited amount of layouts
including repeating content with control over the order.

4. 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.

5. Goal
Create 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)

6. 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

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

8. 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.

9. Let’s look at how this looks in the admin.
Conditional Logic
true/false
Display button conditionally
Conditional logic to show or hide button
CTA button.

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

11. FAQ’s using repeater field type.
Sub Fields for question and answer.

12. USER ENTERS CONTENT
User can:
● Create layouts with desired
content
● Drag to reorder any of the
content

13. CREATE TEMPLATE FILES IN THEME TO DISPLAY CONTENT
What’s being used in theme:
● Theme with Bootstrap
● ACF plugin
● Flickity slider to display gallery

14. Layout/File Structure
Each ACF layout corresponds to a specific template
I’m creating a template file for each layout type
Theme fileshome-page.phpHomepage layout

15. 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 layout
call /partials/stripe-hero.php

16. stripe-hero.php
This 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.

17. 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
…
}
}
}

18. Let’s edit and display our content

19. 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.com
Demo: http://njedesign.com/demo/acf/