Creating a Child Theme

If you need to customise theme files at a code level, you’ll need to do so using a child theme. Any changes made via AppearanceEditor to a parent theme will be lost if you ever run a theme update.

If you only need to make CSS changes to a theme, then a child theme isn’t necessary. We’d recommend using a plugin like Simple Custom CSSJetpack Custom CSS or for an integrated visual editor, SiteOrigin CSS.

About Child Themes

Child themes work by inheriting the functionality of the parent theme. Once a file is copied from the parent theme into the child theme folder; that file will then take precedence over the same file still contained in the parent theme. Inheritance doesn’t apply to all files, but most that you’re likely to edit.

For a full explanation and tutorial on child themes, please see http://codex.wordpress.org/Child_Themes.

Creating a Child Theme

In this example, we’ll be creating a child theme for our first theme, also called Puro.

Download the starter child theme for Puro

The basic structure of a starter child theme is as follows:

  • puro-child
    • functions.php
    • style.css

The child theme folder name is usually the name of the parent theme followed by -child

style.css

First we’ll add our child theme stylesheet. Edited CSS from the parent theme or new CSS selectors can be stored here or in a Custom CSS plugin.

/*
Theme Name: Puro Child 
Author: Puro
Author URI: https://purothemes.com/
Theme URI: https://purothemes.com/themes/puro/
Description: Puro Child Theme
Version: 1.0.0
Template: puro
Text Domain: puro
Domain Path: /languages/
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

The most important part of the child theme’s style.css file is Template: puro. This declaration allows WordPress to locate the parent theme’s folder. Template should exactly match the name of the parent theme’s folder. To confirm the parent theme folder name, check the /wp-contents/themes/ folder on your server.

functions.php

functions.php handles the importing (enqueue) of the parent theme stylesheet as well as our new child theme stylesheet, a space we can use to add any new custom styles we might have.

<?php

/**
 * Enqueue the parent theme stylesheet.
 */
function puro_child_scripts() {
    wp_enqueue_style( 'puro-parent-style', get_template_directory_uri() . 'https://puro-4401.kxcdn.com/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'puro_child_scripts', 8 );

Installation

If your child theme is prepared in a zipped folder, as our Puro Starter Child Theme is above, you can install from AppearanceThemesAdd New: Upload Theme. Alternatively, you can also upload the unzipped folder to /wp-content/themes/, using FTP or your hosting File Manager.

Usage

Your custom CSS can now be safely added to the child theme’s stylesheet. Any theme files you’d like to edit can be copied from the parent theme into the child theme folder and changed as required. The copy process can be completed via FTP or your hosting File Manager.

Please remember not to copy the entire contents of style.css in the parent folder to style.css in the child theme folder. Only specific selectors you want to edit should be copied over, or new styles added.

More Advanced Customisations

If you need to change an existing function in say functions.php or template-tags.php in the parent theme, it’s not possible to just copy those files over to the child theme. In this case, you’ll need to use filter hooks in the child theme's functions.php file. ThemeShaper wrote a nice post on this topic, if you’re interested, that’s the best place to start.

ThemeShaper: Using Filter Hooks in WordPress Child Themes
ThemeShaper: Using Action Hooks in WordPress Child Themes

Last updated: 12/06/2016