Upload
norm-euker
View
817
Download
6
Embed Size (px)
Citation preview
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/