WordPress Child Theme: Easy Mistakes

How to set up a child theme

There are a number of tutorials that go over how to set up a child theme. I should know by this point, but there are a few frequent mistakes that are both crucial to the setup process and that other tutorials fail to make explicit.

Short-hand list for creating a child theme

Create the child theme directory: name it “parent-theme-name-child”
Create the style.css with headers: remember to add “Template:” to the header
Add the functions.php with enqueue_scripts: remember to enqueue parent style
Add template files: remember to mirror the file path as the parent file path
Add custom functions to functions.php: remember to add conditionals to hooks

Details to set up a child theme

Create the child theme directory

You’ll want to create a child theme directory in the “/content/themes” folder. The name should follow the parent theme. So for instance, if your parent theme is “my-theme” your child theme will be named “my-theme-child”.

Create the style.css

Place a style.css in the root of your child theme folder. And this part is crucial.

/*
Theme Name: My Theme
Theme URI: http://my-theme.net
Author: My Name
Author URI: http://my-site.net
Template: my-theme <--------[you want to add your parent theme name here]
Description: This child theme is the bomb.
Version: 1.0
License: Envato License
License URI: http://themeforest.net/licenses
Text Domain: my-theme-child
Tags: custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu*/

As you can see it's important to add the "Template: " part in the style header. It's easy to look over in other tutorials as they don't make this explicit. Copy and pasting your parent theme header will not work.

Add the functions.php

If you want to use your parent theme style add this.


add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

If you want to use your parent theme styles and you have additional code in your style.css, add this.


add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

Add Template Files

If you have a template file just drop them in the child theme directory with the same path. For example, if you want to override your "page-templates/dashboard.php" create the "page-templates" directory and drop your new dashboard.php in there.

Add Custom Functions

When adding hooks and filters to your functions.php remember to check if the function exists before adding it in.

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

Conclusion

I hope this helps clear some common mistakes when creating a new child theme.