Child Themes and the Template Hierarchy

Transcript

1. Child Themes
   & the Template Hierarchy
   

   View Slide

2. About Me
   » Caleb Burks
   » WC Ninja at Automattic
   » Loves Gummy Bears
   » Tweets at @WPprodigy
   

   View Slide

3. My Origin Story
   

   View Slide

4. What is a Theme?
   

   View Slide

5. What's a Template?
   

   View Slide

6. View Slide

7. How does the hierarchy work?
   

   View Slide

8. View Slide

9. Requirements for a theme
   » style.css
   » index.php
   

   View Slide

10. Style.css
    /*
    Theme Name: My Theme
    Theme URI: http://awesometheme.com
    Author: Caleb Burks
    Author URI: http://author.com
    Description: Blah Blah
    License: GNU General Public License v3 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: storefront
    */
    

    View Slide

11. Main Templates: Index
    » home.php - blog homepage
    » index.php - backup for home.php
    

    View Slide

12. Index Example
    

    View Slide

13. Main Templates: Posts
    » single.php - Single Post Page
    » singular.php - Fallback
    

    View Slide

14. Main Templates: Page
    » front-page.php - static homepage
    » page.php - backup for front-page.php
    » singular.php - Fallback
    

    View Slide

15. A live look.
    

    View Slide

16. Aren't there more parts?
    

    View Slide

17. Componentized Templates
    » get_header()
    » get_footer()
    » get_sidebar()
    

    View Slide

18. Header.php
    » wp_head()
    » wp_title()
    » body_class()
    

    View Slide

19. Footer.php
    » wp_footer()
    » date(‘Y’)
    

    View Slide

20. Sidebar.php
    » dynamic_sidebar()
    

    View Slide

21. Content.php
    Used for posts in the index
    pages.
    » the_title()
    » the_content()
    » the_excerpt()
    

    View Slide

22. A closer look
    

    View Slide

23. But wait, there's
    more!
    

    View Slide

24. Archive Templates
    » Categories
    » Tags
    » Date-Based
    » Author-Based
    

    View Slide

25. Custom Templates
    

    View Slide

26. Custom Templates: Archives
    » category-$slug.php
    » category-$id.php
    » tag-$slug.php
    » tag-$id.php
    Applies to authors, taxonomies, and CPT's as well.
    

    View Slide

27. Custom Templates: Pages
    » page-$slug.php
    » page-$id.php
    or...
    

    View Slide

28. Custom Templates: Pages
    

    View Slide

29. Custom Templates: Pages
    Make your own template with just one extra line of
    code!
    

    View Slide

30. Custom Templates: Pages
    template-fullwidth.php
    /*
    Template Name: Full-width
    */
    

    View Slide

31. Custom Templates: Posts
    /*
    Template Name: Full-width layout
    Template Post Type: post, page, product
    */
    

    View Slide

32. Confused yet?
    

    View Slide

33. Awesome Tools
    » What The File
    https://wordpress.org/
    plugins/what-the-file/
    

    View Slide

34. Awesome Tools
    » WPhierarchy.com
    

    View Slide

35. So, Child Themes.
    

    View Slide

36. Creating children
    

    View Slide

37. » style.css
    » functions.php
    

    View Slide

38. style.css
    /*
    Theme Name: Twenty Fifteen Child
    Theme URI: http://example.com/twenty-fifteen-child/
    Description: Twenty Fifteen Child Theme
    Author: John Doe
    Author URI: http://example.com
    Template: twentyfifteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-fifteen-child
    */
    Template is important.
    

    View Slide

39. functions.php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }
    ?>
    

    View Slide

40. Change anything!
    

    View Slide

41. Brace Yourselves,
    It's Live Demo Time
    

    View Slide

42. Questions?
    » https://codex.wordpress.org/Child_Themes
    » Slides at https://twitter.com/WPprodigy
    

    View Slide