introduction to wordpress child theming, wordcamp kansas city, 2015
TRANSCRIPT
Introduction to WordPress Child
Theming
Introduction to WordPress Child Theming
Topher DeRosia@topher1kenobe
Hi, my name is TopherI’m a WordPress developer from
Grand Rapids MI
@topher1kenobe
Introduction to WordPress Child Theming
Topher DeRosia@topher1kenobe
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.
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.
Making a child theme
Introduction to WordPress Child Theming
Topher DeRosia@topher1kenobe
Step 1: create the theme and style.cssUsing 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 */
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.
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' );
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.
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.
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.
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