Child Themes and the Template Hierarchy

Child Themes and the Template Hierarchy

Ef0ca9dc51eb3f428e9e6ba89088d51f?s=128

Caleb Burks

November 05, 2016
Tweet

Transcript

  1. Child Themes & the Template Hierarchy

  2. About Me » Caleb Burks » WC Ninja at Automattic

    » Loves Gummy Bears » Tweets at @WPprodigy
  3. My Origin Story

  4. What is a Theme?

  5. What's a Template?

  6. None
  7. How does the hierarchy work?

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

  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 */
  11. Main Templates: Index » home.php - blog homepage » index.php

    - backup for home.php
  12. Index Example

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

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

    - backup for front-page.php » singular.php - Fallback
  15. A live look.

  16. Aren't there more parts?

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

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

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

  20. Sidebar.php » dynamic_sidebar()

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

    » the_content() » the_excerpt()
  22. A closer look

  23. But wait, there's more!

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

  25. Custom Templates

  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.
  27. Custom Templates: Pages » page-$slug.php » page-$id.php or...

  28. Custom Templates: Pages

  29. Custom Templates: Pages Make your own template with just one

    extra line of code!
  30. Custom Templates: Pages template-fullwidth.php <?php /* Template Name: Full-width */

  31. Custom Templates: Posts <?php /* Template Name: Full-width layout Template

    Post Type: post, page, product */
  32. Confused yet?

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

  34. Awesome Tools » WPhierarchy.com

  35. So, Child Themes.

  36. Creating children

  37. » style.css » functions.php

  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.
  39. functions.php <?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' ); } ?>
  40. Change anything!

  41. Brace Yourselves, It's Live Demo Time

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