Advanced Custom Fields - Flexible Content

Transcript

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 files home-page.php Homepage 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/