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

THANKS FOR

LISTENING

Introduction to WordPress Child Theming

Topher DeRosia@topher1kenobe

http://topher1kenobe.comFollow me @topher1kenobe