advanced custom fields - flexible content
TRANSCRIPT
![Page 1: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/1.jpg)
Advanced custom fieldsAdvanced Custom Fields plugin acts as a GUI layer for
custom fields.
![Page 2: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/2.jpg)
Here is the difference between native custom fields and Advanced Custom Fields.It provides a much friendlier user interface to edit content.
![Page 3: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/3.jpg)
Advanced custom fieldsFlexible Content
This allows users to enter an unlimited amount of layouts including repeating content with control over the order.
![Page 4: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/4.jpg)
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.
![Page 5: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/5.jpg)
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)
![Page 6: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/6.jpg)
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
![Page 7: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/7.jpg)
Here is a list of all the possible field types we can use.
![Page 8: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/8.jpg)
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.
![Page 9: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/9.jpg)
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.
![Page 10: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/10.jpg)
Select field type for number of columns. Conditional logic to show or hide column 3.1-3 Column layout (Services)
![Page 11: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/11.jpg)
FAQ’s using repeater field type.
Sub Fields for question and answer.
![Page 12: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/12.jpg)
USER ENTERS CONTENT
User can:● Create layouts with desired
content● Drag to reorder any of the
content
![Page 13: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/13.jpg)
CREATE TEMPLATE FILES IN THEME TO DISPLAY CONTENT
What’s being used in theme:● Theme with Bootstrap● ACF plugin● Flickity slider to display gallery
![Page 14: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/14.jpg)
Layout/File StructureEach ACF layout corresponds to a specific templateI’m creating a template file for each layout type
Theme fileshome-page.phpHomepage layout
![Page 15: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/15.jpg)
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
![Page 16: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/16.jpg)
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.
![Page 17: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/17.jpg)
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…}
}}
![Page 18: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/18.jpg)
Let’s edit and display our content
![Page 19: Advanced Custom Fields - Flexible Content](https://reader033.vdocuments.net/reader033/viewer/2022042503/58778c511a28ab0f778b46c5/html5/thumbnails/19.jpg)
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/