Introduction to WordPress Child Theming

1. Introduction to
WordPress Child
Theming
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe

2. Hi, my name is Topher
I’m a WordPress developer from
Grand Rapids MI
@topher1kenobe
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe

3. What is a child theme?
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
● At its very minimum, a child theme has a
style.css file that names a parent theme.
● A child theme inherits all of the attributes of
its parent; styles, functions, virus code, etc.

4. Why use a child theme?
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
● So that when you update the parent you
don't lose your custom styles and
templates.
● So that when you're starting your new
theme you can start with an existing
powerful system.

5. Making a child theme
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
Step 1: create the theme and style.css
Using Make as the parent theme, copy the entire CSS comment block
from the parent style.css
/**
* Theme Name: Child of Make
* Theme URI: https://thethemefoundry.com/wordpress-themes/make/
* Author: The Theme Foundry & Topher
* Author URI: https://thethemefoundry.com
* Description: A Starter child theme of Make
* Version: 1.0
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: make
* Domain Path: /languages/
* Tags: black, <snip>
* Make WordPress Theme, Copyright 2014 The Theme Foundry
* Make is distributed under the terms of the GNU GPL
*/

6. Making a child theme
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
Step 2: add one item to the comment block
* Template: make
In this example, “make” is the slug of the parent theme.

7. Making a child theme
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
Step 3: include the parent CSS
Child theme functions.php:
<?php
function get_parent_theme_css() {
wp_enqueue_style( 'make-theme', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'get_parent_theme_css' );

8. Making a child theme
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
Step 4: Optional Screenshot
The screenshot that appears on the Themes page
comes from screenshot.png in the theme’s folder.

9. Changing Styles
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
● Any styles placed in the child’s style.css file
will override the parent styles.
● !important styles in parent themes are
annoying and bad.

10. Template files
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
● All theme files come from the parent theme,
UNLESS they are copied to the child theme.
● Once they’re copied to the child theme they
override the version in the parent theme.
● You may copy as many templates as you
wish.

11. Gotchas
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
● The more templates you copy to child, the
fewer are getting updated.
● You can’t make grandchildren
● If the parent has a problem, ALL the children
have the same problem

12. THANKS FOR
LISTENING
Introduction to WordPress Child Theming
Topher DeRosia
@topher1kenobe
http://topher1kenobe.com
Follow me @topher1kenobe