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.

Transcript

1. BUILDING WORDPRESS
   THEMES
   with
   

   View Slide

2. ABOUT ME
   Developer Outreach Manager
   

   Founder
   @tessak22
   ➤ Love Obsessed with Dogs
   ➤ Shoot Archery
   ➤ Passionate about teaching others
   

   View Slide

3. WHO ARE YOU?!
   https://sli.do
   Enter event code: wcorl
   @tessak22
   

   View Slide

4. 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
   

   View Slide

5. 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
   

   View Slide

6. 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
   

   View Slide

7. LET’S BUILD SOME STUFF
   

   View Slide

8. 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.
   

   View Slide

9. ADDING TO THEME
   
   advancedcustomfields.com/
   resources/code-examples
   

   View Slide

10. 
    Edit your ACF data on the
    frontend of your site!
    Add where form should be:
    
    Add before get_header
    FRONTEND FORMS
    

    View Slide

11. PRO FEATURES
    

    View Slide

12. REPEATER FIELD
    This field is really nice for
    sliders, carousels or
    anything that someone
    may want to use an
    unpredictable number of
    times.
    

    View Slide

13. OPTIONS PAGE
    the_field('header_title', 'option');
    ?>
    Options page allows you to
    have global fields that can be
    used where ever you want in
    your theme!
    

    View Slide

14. 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!
    

    View Slide

15. GUTENBERG!
    advancedcustomfields.com/blog/the-
    state-of-acf-in-a-gutenberg-world/
    

    View Slide

16. ASK ME ANYTHING
    https://sli.do
    Enter event code: wcorl
    @tessak22
    

    View Slide

17. FOLLOW UP
    @tessak22 //
    me@tessak22.com
    Upcoming Speaking: 

    PHP World
    @tessak22
    

    View Slide