Using WordPress Child Themes

There are tons of quality WordPress themes out there. You found the perfect one for your site, almost. Everything looks good at first then you decide you need a few little tweaks to the theme code to really fit your needs. Stop modifying the theme directly. Start using WordPress Child Themes. If you aren’t familiar with child themes it’s time to learn about them.

What are WordPress Child Themes?

Child themes in WordPress allow you to inherit the code from a theme template. You can override basically anything you would (PHP, HTML, CSS, JavaScript) as if you were modifying the parent theme directly. However, the benefit of using child themes is that it keeps the parent theme untouched. If you were to modify the theme directly and then update that theme using WordPress’ update feature you would lose all of your customizations. With child themes you won’t lose any of your changes when you update the parent theme as your changes are in their own directory. Plus child themes are so easy there really isn’t an excuse not to use them.

How you can get started with WordPress Child Themes

If you’ve ever tried to create a WordPress theme on your own you already know most of what it takes to create a child theme. If you haven’t dug into creating your own theme yet don’t worry. It’s very simple to create a child theme but it does require some knowledge of HTML, CSS, and PHP. Creating a child theme is a great way to learn about WordPress if you need to brush up on some of those skills.

I’m going to show you how to create a child theme based on the new WordPress default theme Twenty Fifteen. First navigate to the theme directory of you install which is probably something like /wp-content/themes/

wordpress child themes 01

 

Next create a new folder for your child theme. It’s not required to use this format but I general name the folder {theme name}-child. So in this case the folder will be called twentyfifteen-child.


wordpress child theme 02

There are two requirements for child themes. The first is a style.css file and the second is a functions.php file. Next open your favorite text editor (I’ve been using Atom lately). We’re going to create the style.css. You can find an example of this file on the WordPress codex.

Paste the following into your text editor. You should fill in all of the fields but the most important fields are Theme Name (the name you will see in the WordPress admin) and the template section. The template tells WordPress where to go to get the original theme’s file so you want to make sure this name matches the parent theme. I did this for my personal site and had problems with the name’s not matching so be sure to check it.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Ward
 Author URI:   http://example.com
 Template:     twentyfifteen
 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:  twenty-fifteen-child
*/

You can add your name and update the urls then save this inside the twentyfifteen-child directory as style.css. Then you’ll want to create another new file in your editor. Paste the following code:

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

}

You can save this file in the twentyfifteen-child directory as functions.php. This is all the is technically necessary. However, the WordPress Codex also mentions that you may want to make sure the parent theme is loaded first by making the child them a dependent in the functions.php file. To do that you would updated the functions.php file to look like this:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

Now your new child theme directory should look like this

wordpress child theme 03

Now you can enable the theme in the WordPress -> Appearance section by clicking the activate button on the new child theme.

wordpress child theme 04

 

Once activate your child theme behaves like any other WordPress theme. You can change the look using the built in customizer. You can add and edit widget. Now you can override any of the core files. For example if I wanted to change the background of this white sidebar to a different color.


wordpress child theme 05

 

If I wanted to make it red I would use the browser inspection tool to find out what css I want to override. Keep in mind you can actually change this color using the built in customizer but I’m doing it using CSS as an example.

Using the inspector I see that the div I want to override has an ID of #sidebar

wordpress child theme 06

Then I would open the style.css in my child theme and add a new rule below the comments to make this red.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Ward
 Author URI:   http://example.com
 Template:     twentyfifteen
 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:  twenty-fifteen-child
*/
#sidebar{ background:red;}

Which would then give you

wordpress child theme 07

 

As you can see the sidebar is now red because we updated our style.css

What else can you do with WordPress Child Themes?

Now that I’ve showed you how to make a simple CSS change you may be wonder what else you can do. Well you can override any of the file from the original theme. Take a look in the original theme directory.

wordpress child theme 08

You can copy any of those files over to your child theme directory and then start hacking away at the code. Want to do something special in the author bio simply copy the author-bio.php file. Want to change the footer? Copy the footer.php file to your child directory and make your change.

What can go wrong?

The only thing that I’ve seen go wrong is that you can update the parent theme and then things can end up breaking because you have an old version of a file that was updated in your child theme. To fix this you have to compare the new file with the one in your child theme and update accordingly. That’s still better than modifying the original theme because in that case you would lose all your changes.

Let me know if this post helped you out or if you have any other questions. If this post did benefit you please share.