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

Building WordPress Themes with Advanced Custom Fields

Building WordPress Themes with Advanced Custom Fields

In this session, you’ll not only discover best practices for building custom WordPress themes, but how to leverage custom fields to create complex page layouts and make content management easier for clients. Tessa will introduce you to a WordPress plugin called Advanced Custom Fields, how it works, and what it can do when used to build WordPress themes.

Tessa Kriesel

October 06, 2018

More Decks by Tessa Kriesel

Other Decks in Technology


  1. ABOUT ME Developer Outreach Manager 
 Founder @tessak22 ➤ Love

    Obsessed with Dogs ➤ Shoot Archery ➤ Passionate about teaching others
  2. WHAT IS ACF? ‣ Stands for Advanced Custom Fields ‣

    Makes content editing easier ‣ Easy to learn and use ‣ Allows you to add custom meta fields to content ‣ Free & Pro Versions
  3. WHAT CAN IT DO? ‣ Add custom data to your

    pages, posts & custom posts. ‣ Collect theme setting values that you can use globally in your theme. ‣ Create a custom page builder- esque layout editor ‣ Capture entries through a frontend form ‣ Extend your theme capabilities and features ‣ Data is stored in the postmeta table
  4. TEMPLATE 101 ‣ functions.php - allows you to add functionality

    to your theme ‣ style.css - your CSS (styling) for your theme ‣ page.php - page template file ‣ single.php - single post file ‣ single-postname.php - Custom post type
  5. FIELD GROUPS + FIELDS Let’s create a new field group!

    ➤ I have created a page template titled “My Dog” ➤ I also started a field group titled My Dog.
  6. <?php acf_form(); ?> Edit your ACF data on the frontend

    of your site! Add where form should be: <?php acf_form_head(); ?> Add before get_header FRONTEND FORMS
  7. REPEATER FIELD This field is really nice for sliders, carousels

    or anything that someone may want to use an unpredictable number of times.
  8. OPTIONS PAGE <?php the_field('header_title', 'option'); ?> Options page allows you

    to have global fields that can be used where ever you want in your theme!
  9. FLEXIBLE CONTENT My favorite feature of all… With flexible content

    you can essentially make your own page builder with just the blocks that you need!