Local Scottsdale, Phoenix WordPress Meetup discussing child themes and various solutions

1. Child Themes
Not the Mama!

4. What is a child theme?

5. A child theme is a theme that inherits the functionality
and styling of another theme, called the parent theme.
Child themes are the recommended way of modifying
an existing theme.
From the Codex

6. Provides a way to update a theme without effecting any
changes you’ve made.
Simplified

7. Advantages
- safe updates - easy to extend
- reduced development time

8. Disadvantages
- time invested to learn parent theme (multiple authors)
- parent theme could be abandoned

9. Implementing a Child Theme

10. twentysixteen
Default WordPress Theme

11. twentysixteen
Parent Theme

12. twentysixteen
Child Theme
twentysixteen-child
(empty folder)

13. Child Theme Files
twentysixteen-child
functions.phpstyle.css

14. Child Styles
style.css

15. style.css
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.1
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
Text Domain: twenty-sixteen-child
*/

16. style.css
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.1
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
Text Domain: twenty-sixteen-child
*/

17. /**
Theme Name: Twenty Sixteen Child
…
*/
@import url(“../parent-theme/style.css”);
style.css

18. functions.php
Child Functions

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

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

21. get_template_directory_uri()
get_stylesheet_directory_uri()
vs

22. get_template_directory_uri()
get_stylesheet_directory_uri()
vs
mama (parent theme)

23. get_template_directory_uri()
get_stylesheet_directory_uri()
vs
mama (parent theme)
not the mama (child theme)

24. demo

25. Plugin: Simple Custom CSS

26. Plugin: One-Click Child Theme

27. Justin Tucker
@certainstrings certainstrings.com
resources
• codex.wordpress.org/Child_Themes
• Plugin: One Click Child Theme
• Plugin: Simple Custom CSS
slides: bit.ly/wpaz-child-theme-building
Developer at fansided.com