Categories
Uncategorized

Child Themes

This is documented in the Word Press Codex, but I found that page slightly confusing.

First, using FTP or your cpanel file manager (I added a link because I didn’t know what cpanel was until I got an actual virtual private server) create a directory in your wp-content\themes\ folder and call it something like twentysixteen-child

Second, create three files, index.php, style.css and functions.php, in the newly-created twentysixteen-child folder.

Third, using the WordPress dashboard, go to Appearance > Editor and select the child theme from the drop-down menu, for me it was in the upper-right corner.

Fourth, WordPress will complain the theme is broken, that’s because you haven’t told it that your twentysixteen-child theme is actually a child theme. You can fix that adding the following header information to the top of style.css:
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
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, accessibility-ready
Text Domain: twentysixteen
*/

I bolded the Template line because it’s important. You need to tell WordPress the name of the folder that the parent theme resides in, so it needs to match the folder name exactly. You will want to leave the Text Domain as twentysixteen so font changes and URL parsing for the parent theme continue working correctly as well. Save your changes!

Fifth, this was a bit of a gotcha for me I think. You have to tell the child theme how to load the parent theme. You do that by creating the functions.php file with a specific function (that works with the WordPress API) telling it to load the parent theme’s functions.php file.

Make your child theme’s functions.php exactly the following:

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

Now that the style.css is correct and functions from the parent theme are loading, the child theme should load.