Child Themes and the Template Hierarchy

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?
7. How does the hierarchy work?
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