Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Custom Fields - Flexible Content

Norm Euker
February 13, 2016

Advanced Custom Fields - Flexible Content

Norm Euker

February 13, 2016
Tweet

Other Decks in Technology

Transcript

  1. Here is the difference between native custom fields and Advanced

    Custom Fields. It provides a much friendlier user interface to edit content.
  2. Advanced custom fields Flexible Content This allows users to enter

    an unlimited amount of layouts including repeating content with control over the order.
  3. 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.
  4. 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)
  5. 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
  6. 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.
  7. 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.
  8. Select field type for number of columns. Conditional logic to

    show or hide column 3. 1-3 Column layout (Services)
  9. USER ENTERS CONTENT User can: • Create layouts with desired

    content • Drag to reorder any of the content
  10. CREATE TEMPLATE FILES IN THEME TO DISPLAY CONTENT What’s being

    used in theme: • Theme with Bootstrap • ACF plugin • Flickity slider to display gallery
  11. 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
  12. 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
  13. 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.
  14. 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 … } } }
  15. 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/