How to Create a WordPress Child Theme

Have you ever spent countless hours customizing your site, only to lose all of your hard work after updating the theme?

Creating a child theme allows you to make changes to your site without touching your original theme’s code, making it easier to update your site without the threat of wiping out changes when you update. A child theme inherits the functionality of its parent and you can turn off your child theme and fall back on the parent any time you want.

In today’s Weekend WordPress Project we’re going to look at how to set up a child theme.

Feature image

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

Getting Started

In this example, we’re going to create a child theme for the Twenty Thirteen default WordPress theme.

1. The first thing we need to do is create a new folder in our themes directory to hold the child theme. You can do with using cPanel or via FTP. The themes directory is wp-content/themes.

It’s important to name the folder without any space in the name, and it’s common practive to use the name of the parent theme folder with “-child” added on the end.

So for this example, we’ll be calling our folder “twentythirteen-child”.

Child theme folder
I’m using Filezilla to login to my site and add the new child theme folder.

2. In the child theme folder, create a file called style.css. This is the only file required to make a child theme.

The style sheet must start with the following lines:

1
2
3
4
5
6
7
8
9
10
11
12
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child Theme
Author: WPMU
Author URI: http://wpmu.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

You can change each of the lines to suit your theme, but you must keep Theme Name and Template lines as well as the @import section. The template is the folder name of the parent theme, in this case twentythirteen.

3. Now we need to activate the child theme. Login to your WordPress site and go to Appearances > Themes. Find your child theme in the list of available themes and click “Activate”.

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

4. Your child theme should now be the active theme.

Child theme
Setting up a child theme is really easy.

Modifying Your Theme’s CSS

Our child theme works a treat and looks just like the parent theme because we’ve imported its CSS file.

If you want to modify the theme’s CSS, you can add any changes to the child theme’s CSS file below the @import line. All new CSS information is applied to your site after the original theme’s CSS is loaded, overwriting it.

Say we want to change the text in our theme so it is bubblegum pink. All we need to do is add a line to the child theme’s CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child Theme
Author: WPMU
Author URI: http://wpmu.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

p { color: #FFDFDD;}

This change to the child theme’s CSS overwrites the original CSS for the parent theme.

Now our site looks like this:

Twenty Thirteen

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

Editing the functions.php File

The functions.php file is where a theme’s main functions are usually kept. If you need to add custom functions to your theme, you can do so by creating a new functions.php file within your child theme folder.

Unlike style.css, the functions.php file in a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to – and right before – the parent theme’s functions.php.

You child theme’s functions.php file should start with a php opening tag and end with a php closing tag. You can add your functions in between.

1
2
3
4
5
<?php

// Stick your php code in here

?>

Editing Other Theme Files

Unlike the functions.php file, the functions for your theme’s other PHP files aren’t imported automatically. Other PHP files are edited by replacing the file with a copy. The theme’s original file is then ignored and the new one is used instead.

For example, if you’re planning to make changes to Twenty Thirteen’s 404.php file, you would need to first make a copy of the old file and paste it into the child theme.

Once the file has been copied into the child theme, you can make any changes you like, safe in the knowledge you can revert back to the parent theme any time you want.

Conclusion

That’s all you need to know to create a child theme.

Have a great weekend!

Comments (16)

  1. I think perhaps there are some themes that this process won’t work with? I tried previously creating a child theme of a premium theme I purchased because I wanted to make amendments but the child theme would not load. Are you aware of issues with some themes being incompatible with child theme protocols?

    • You can override/customize the CSS used in any plugin being used by your theme right from your child themes style.css file. Just make sure your specificity is correct or use the !important rule and whatever customization you add will be stored in your child themes style.css so it is not overridden when you update your plugin.

          • Hi Matt

            No plugins spring to mind specifically but just one you think is representative of usual plugins.

            thanks it would be really helpful to see and i look forward to seeing it thanks so much

            Grant

  2. i’m just thinking outloud here on a good way to approach this and to find out if you can predict any problems with it?

    ……….could you basically do a full copy duplication of the original theme folder, and obviously then rename it with -child extention to the folder name.

    then go into the new child folder and change the style sheet to the above recommendation in the article.

    this way in the future you will have no problems at making changes even to funtions.php or 404.php files and the like within that new duplicated folder because they will all be duplications and also have piece of mind knowing you have a backup in the original theme folder?

    thanks for your help

    Grant

  3. Hello, Raelene. Thanks very much for this informative guide. I have one question, however.

    I’m using WordPress 3.9.1 (latest version) with Twenty Fourteen installed. I created the child theme and I see that in my Themes section in the Dashboard. When I activate it, the navigation menu I created for the parent theme disappears. Do you know why this is?

    Also, the header image I added for the parent style doesn’t show up. I’m quite certain it’s because Twenty Fourteen doesn’t include one by default, however.

    Finally, I see that you mention the functions.php file. Is that something I really need to worry about if I’m using Twenty Fourteen?

    Thanks for everything you do!

  4. Thanks for this – it’s fairly straightforward, but I found I also had to redo the following:
    - add the background image and header
    - update the custom css
    - select the menu (I think this is why kevin_mcminn had an issue)

    ..otherwise the original theme’s default settings kick in.

    Thanks
    Yorick

  5. This article helped me out a lot, up to the point where I have to apply changes to the functions.php.

    I installed woocommerce and want to remove the h2 header from the single-product-reviews.php, additional-information.php and description.php, but found no way yet to address this correctly.

    For example ‘Description’ is the tab title, and ‘Product Description’ is the h2 header. You can see it here at the site I try to get this work right. http://jointfactory.com/product/x-haze-feminized-seeds/

    When I remove the code in question directly from those files in the parent theme location it works, but when I try to address it in the child theme functions.php, everything I tried out so far failed.

    I could only remove the breadcrumbs so far with this line of code.
    remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 );

    Any idea on how to address this correctly?
    I tried cheating by copying over those 3 .php files to the child theme folder and removed the code lines in question, but only the single-product-review.php works, the other tabs still show the h2 header. But this is not the right way to do it, and rather address it correctly in the functions.php file.

    Any help is appreciated. Thanks!

Participate