$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Tessa Kriesel

Other Decks in Technology

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 //
    [email protected]
    Upcoming Speaking: 

    PHP World
    @tessak22

    View Slide