HostGator Web Hosting

Save your Site Modifications with Child Themes

The vast quantity of available themes is a big reason why WordPress is the platform of choice for so many people.  A theme provides an excellent starting point for your WordPress site.Install Child Theme  However, not all themes are as customizable as you might need.  You may have to alter your theme files in order to get the exact look and feel that you desire for your WP site.

Tweaking the CSS or functions of your site is easy enough.  Even people with no coding experience can find snippets of code to add to their site from all corners of the always-helpful WordPress community.  However, a mistake that new WordPress users often make is editing their themes files directly.  Editing your theme files directly works short-term, but if the author of the theme issues an update, the updated version of the theme may vary well overwrite all of your customizations.

Directly altering your themes files also increases your chances of making a mistake that could break your site and be difficult to recover from.  To avoid this pitfall, it is a WordPress best practice to install a “child theme” before making any alterations to your theme.

What is a WordPress Child Theme?

The definition below comes directly from the WordPress.org Codex:

“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”

In other words, all that a child theme needs to be is a single CSS file.  Or, a child theme can be expanded to include as much as a full fledged WordPress theme including a functions file and template files.

Creating A Child Theme for your WordPress Site

All that you need to create a child theme is access to the directory in which your WordPress site is stored and a text editor (Notepad++ for Windows works great, as does Text Wrangler for Mac.)

For the purposes of this tutorial, we will show you how to create the child theme by uploading the files to your Cpanel. (If you are hosting the site yourself, or your host doesn’t use Cpanel, the process will be essentially the same).  Using an FTP client is a faster method, but configuring FTP is a topic for another article.  If you already have FTP access, feel free to use it.

Specific Steps for Creating a Child Theme…

Step One:  Create a directory (folder) in your WordPress themes folder.  The standard location for your themes directory is sitename > wp-content > themes.  Create a new folder and name it “yourtheme-child.”  For the purposes of this tutorial we will be creating a child theme for the standard “twentyeleven” theme.  So we create a folder named “twentyeleven-child.”

Step Two:  Open your text editor and copy/paste the following text into it.

/*

Theme Name: Twenty Eleven Child

Theme URI: http://example.com/

Description: Child theme for the Twenty Eleven theme

Author: Your name here

Author URI: http://example.com/about/

Template: twentyeleven

Version: 0.1.0

*/

This is the standard head for a WordPress CSS file.  However, the only required information is Theme Name and Template.  The template field must match the name of the parent theme.

Step Three:  Find your original themes CSS file / parent theme files.  (This can be found a few ways, including from within the WordPress admin under Appearance > Editor > Stylesheet, or in your themes directory at, sitename > wp-content > themes > twentyeleven > style.css.)  Copy and paste everything under the head into your child theme’s CSS file.

Any time you see text in between symbols like this /*example text */ it is what’s referred to as “commented out” this text is only there to give information about the code to users and does not affect the code.  In this case, copy and paste everything under the comments (head) at the top of the CSS file.

Note:  You must place this code in the new file because WordPress will load child theme’s CSS file instead of the parent theme’s.  The other files will load normally, and any changes can be made by inserting new code into a blank file.

Step Four:  Save the file as “style.css” and upload it to your child theme’s directory.

Step Five:  Activate the theme.  In your WordPress admin go to Appearance > Themes and activate Your Child Theme.

Step Six:  Visit your site.  Since no changes have been made yet, the site should look and function exactly the same as before.

Step Seven:  Make your changes to the CSS file in your child theme’s directory.  You are now free to alter your theme’s style with out fear of losing your alterations after an update.

Making changes to your functions and template files follows a similar process, but that’s a topic for another article.

That’s all there is to it.  A simple and fool proof way to preserve your customizations while keeping your theme up-to-date.  Thanks for taking time to view this Upload WP tutorial and please feel free to leave your comments below.

HostGator Web Hosting

54 COMMENTS

  1. Hi Adam,
    I’ve done 6 sites using WordPress and haven’t used the Child Theme approach you discussed here. Can I go back and create a Child after the site is deployed? I haven’t edited any code only populated existing fields with content. I haven’t created any Custom Fields either. Just added content where appropriate and specified by the theme.

    Thanks for your help

    • Hi Kevin,

      Yes, you can always add a child theme after a site is up. Even if you had changed any template files, they would remain until an update to the theme was issued. Adding a child theme will not affect any of your content currently in place.

  2. Hi Adam

    I tried what you described here, but when I want to upload the child theme, wordpress classified it as broken theme, (template missing). I don’t know maybe I’ll have to upload the template file just like the css file.

    thanks

    • Hi Yusuf,

      It’s most likely a problem with the top of your CSS file. Make sure it looks like this:

      The template name has to match the directory name for the parent theme.

      Be sure to switch away from the child theme to edit this line, then you can reactivate it.

      Let me know if you have any questions or if this doesn’t work.

  3. Hello Adam,
    I’ve followed your tutorial and created a child theme for my woostore theme.
    But when I activate the child theme it generates a problem with the navigation menu. The main menu that I’ve created desapears and is replaced by all the pages. Have an idea why?
    Thanks a lot

    • Hi Amelie,

      Hmmm – It’s difficult to say for sure what might have caused the issue with your WooStore child theme. I just created my own WooStore child theme, installed it on one of my sites and it’s working fine. My recommendation would be to install our WooStore child theme and see if that solves the issue. Here’s the download link to get our WooStore child theme as well as child themes for the following WooCommerce specific themes… Artificer, Coquette, Mystile, WooStore and Wootique… Here’s the link to download the zip file…

      http://uploadwp.com/wp-content/uploads/WooCommerce-Child-Themes.zip

      Let me know if this helps.

      • Thanks a lot for your reply. I found the solution by recreating a site from scratch. So here what happened:
        I had created a menu before activating my child theme. Once activated my menu had desappeared. I just needed to go again into Appearence > menu and set Primary menu to the one created previously.
        That was it!

      • You have just saved my life. Was about to jump out the window after hours of trying to create a theme, can finally go to bed. THANK YOU!!!

  4. Hi
    I have done as directed. However, when i go into themes, it shows up under broken themes stating that “TEMPLATE IS MISSING” what did i do wrong?

    Please help.
    (copy pasted below)

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    mystile Child Template is missing.

    • Hi Iris,

      Did you upload a zip file of the Mystile child theme or did you upload it via FTP? Also, did you make your own Mystile child theme or did you use the one we created? What is the URL to your site. Please let me know and I will take a closer look.

      Adam
      p.s. please feel free to contact me by using the Contact page form (in footer) and I can upload it for you.

  5. hi
    i uploaded the zip file.
    i made my own mystile child theme, through your directions… but for the top part i copy pasted what was on your site. i changed the theme part to mystile as directed
    thanks soooo much~~~ i have literally been watching all of your videos and using your site to create my website~~~ i really appreciate the help and response! <3

  6. Hey there.

    Was wondering if you could shed some light with creating a settings page for a theme. I quite like the idea of some of the themes available which offer you the ability to easily add a header image, banner, slideshow, colours etc.

    There seem to be a few articles to do with it, and might make a good idea for a tutorial?

    Regards
    Rob

    • Hey Rob,

      Thanks for the suggestion. I think it’s a great idea for a tutorial, however it’s a little beyond the scope of this website at the time. Creating a settings page to a theme requires some pretty advanced PHP and JavaScript coding, to which we only kind of dabble with on this site. Down the road though, who knows!

      Thanks again!

  7. Hi Adam,

    At first it told me “Broken Themes” – need a style sheet and template, as people have mentioned already here. So I figured what I did wrong was somewhere in the header of my child theme file and rectified it and deleted the old style.css and uploaded my new corrected one. But now I am getting this:

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    Sommerce Child The parent theme is missing. Please install the “Sommerce” parent theme.

    So I am unsure where I am going wrong. In my directory I noticed in the themes directory and in the ‘Sommerce’ theme folder there was already a folder called ‘Sommerce-child’. I opened it and looked at the style.css in that folder and it was blank (well it had a header but no script below). It also had a jigoshop folder and woocommerce folder, as well as functions.php and screenshot.png.

    I initially created a ‘sommerce-child’ folder in the themes directory, uploaded the style.css file as instructed. I’ve begun playing around with it and observing my Appearance>themes are where the new child theme would come up to see the changing status. I have currently moved the ‘sommerce-child’ folder from the ‘sommerce’ directory into the theme’s directory now to see if there was any difference, and i got rid of the one i created via your instructions and replaced the empy style.css file with the one you helped me create. Yet i still get the above “broken theme” notification.

    Please help. I hope i made sense there.

    • Hi Nadia,

      It sounds like the style.css of the parent theme was deleted which is probably what’s causing the issue. Try reinstalling the Sommerce Parent theme. Anytime you use a child theme, the parent theme must first be installed in order for the child theme to work. Please try doing that and let me know if it solves the issue. If you still have trouble with it, contact me (via our Contact Us page) and I’ll take a closer look at it.

      Thanks,

      Adam

  8. hi Adam//
    using mystile woocommrece template//have problems with creating a child theme for it// message WP/ template is missing//how to solve this??
    followed y r instructions and tried som others/
    still message comes up/template missing/
    what i am doin wrong here??
    kind regards
    Luc

    • Hey Luc,

      Be sure all the information at the top of your css file is correct. And that the template name in that info matches the name of the parent theme exactly. Errors with child themes are almost always because of a misconfigured .css file.

      Thanks,

      Adam

  9. Hi Adam,

    You’ve some great tutorials. Thanks for sharing.

    One question about child themes, as I’ve never used one before – once created and in place, do I then have to do all my WP work in that child theme and never use the parent theme again, or do I simply use the child only for php modifications and use the parent as I would normally for everything else (adding content, changing menus, setting theme options, etc.)?

    Thanks,
    Steve

    • Hey Steve,

      First things first make sure your child theme is activated. If it’s activated, your day-to-day stuff is handled independently of the child theme. You only need to worry about the child theme when changing your theme’s files.

      Anything you normally do through the WordPress dashboard will be handled properly on it’s own (most of that is going into wp-content/uploads or is stored in the data base so it has nothing to do with the theme.)

      Thanks for reading and let me know if you have any more questions!

      -Adam

  10. Thanks for your help, this tutorial seems very useful, unfortunately, I am still getting a:

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    Template is missing.

    I have tried various style.css files and template names but can't seem to get it right.

    /*
    Theme Name: Artificer Child Theme
    Description: A child theme skin for Artificer
    Author: Upload WP
    Author URI: http://uploadwp.com/about-upload-wp/
    Version: 1.0.0
    Template: artificer
    */

    @import url(../artificer/style.css);

    /* All child theme styles go here.
    ———————————————– */

    thanks for your help

    austin

    • Hi – Make sure that the parent theme is installed first. The parent / main theme must be installed in order for the child theme to work. Let me know if you're able to get it fixed. Thanks,

      Adam

      • Adam, thanks for the help – the parent theme was installed, I used the pre-setup child style.css file you guys created and that worked. I don't see a difference between what I was using but it works now.

        I posted another question below, if you have a chance – thanks again.

  11. After copying the artificer setup you created it worked, I have compared the files and can't see the difference but anyway it worked!

    Is there a clean way to make the shipping address fields all occur UNDER the billing fields rather than in two columns?

    Great tutorial helped a lot, thanks

    • Austin,

      Glad you got the child theme working. Sometimes things just glitch and it's tough to know why! Please repost your question under the artificer article. My associate did that one and I am not familiar with the theme.

      Thanks for reading!

  12. Hi, first of all, great website and great tutorials.

    But i don't know why, it does not work very well.
    I uploaded the .zip child theme, and I'm using it for another theme:

    /*
    Theme Name: Harmony Child Theme
    Description: A child theme skin for Harmony
    Author: Upload WP
    Author URI: http://uploadwp.com/about-upload-wp/
    Version: 1.7
    Template: Harmony
    */
    @import url(../Harmony/style.css);
    /* All child theme styles go here.
    ———————————————– */

    It works, I mean, I can use it.
    But the template is just… not the same.
    Huge difference and problems….
    Is it possibly that I need do import something more, not only che style.css?

    Kind Regards

    • Hey thanks! Glad to be of help. As far as the child theme goes there's a few things you can try:

      Make sure the template field matches the parent theme exactly.
      Remove the following from your child theme's CSS file: "@import url(../Harmony/style.css);
      /* All child theme styles go here.
      ———————————————– */" and copy/paste the entire text from the original theme's CSS file into the child theme's CSS file.

      Clear your cache and visit your site again.

      Let me know if this doesn't work and we can try something else.

      -Adam

  13. I was having the same exact issue as Nadia above… where it was telling me
    ——————————————
    Broken Themes
    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    Wootique-Child The parent theme is missing. Please install the “Wootique” parent theme.
    —————————————
    I kept checking and rechecking the template name to make sure I had it correct and it was the same as the original style.css from the parent theme.

    When I opened the parent theme css file, the Theme shows as "Wootique" with a capital 'W' so that is how I wrote it in the new child theme css.

    Nothing was working, even after I reinstalled the parent theme as described above. Finally I got the Child theme to show as an available theme when I changed the template name to all lower case letters 'wootique'.

    As soon as I did that, the child theme became available to activate it.

  14. Nvm, figured it out, folder was "wootique" and I named the template "Wootique"… Should've known it's case sensitive, rookie mistake, sorry bout that!

  15. The child template "Wootique" doesn't align correctly, there's a gap between the main menu and the listed products below and the cart which is normally located in the top right is now near the middle of the menu.

    Can you please let me know what I'm doing wrong?;

    <strong>head:</strong>

    /*
    Theme Name: Wootique
    Theme URI: http://www.woothemes.com/
    Version: 1.2.2
    Description: A free <a href="http://woothemes.com">Woo Theme</a> designed for use with WooCommerce.
    Author: WooThemes
    Author URI: http://www.woothemes.com
    Tags: woothemes
    Template: wootique

    Copyright: (c) 2009-2011 WooThemes.
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html

    */

    I decided to use the entire style.css code from the parent because I wanted to minimise the chances of error, I also tried it with your settings as well and got the same results. Is it possible that certain themes are not "child-able"?

    • Hi Vee,

      I just tested the Wootique child theme and it seemed to work properly. I'll try it on a couple additional test sites and see if I have any issues with it. If so, I'll try to fix it myself or find someone that can fix it.

  16. Hi, thank you for this! I have wootique and when previewing, the css seems way off, (like no navigation background and I followed the instructions to the tee. Not sure what's going on.

  17. Thanks for the tutorial. I've added mystile-child and activated it. First I had issues with the primary menu but found out I just needed to reactivate the proper menu. My current issue is that the cart icon all the way at the top takes a long time to load, and when it does it is replaced by a GBP emblem (£). There is also an icon loading improperly in front of "checkout". Any idea how to solve this issue?

    I've made some changes in the mystile theme php files and would like to use the child theme instead – however with these issues I may need to continue editing the original mystile theme…

  18. Hi..

    I just started making a little eshop for an artist friend of mine.
    I created a child theme for Mystile…but i have this issue with the cart icon at the top bar menu that has disappeared (and the sterling :before content appears instead).
    When I change back to the parent theme it appears in place.

    Any advice on what is causing this or how to resolve it?

  19. Hello!

    I followed instructions to make a child theme for woostore. I had no problems except it slowed down the response of slider images when refreshing the site. In other words the slider images took a lot longer to initialize after the refreshing the child theme. I have gone back to the mother template and refreshes quickly.

    Is this a caching problem?

    Thanks,

    John

  20. I don't know if you guys realize you have a typo in your code example above:

    /*
    Theme Name: Twenty Eleven Child
    Theme URI: http://example.com/
    Description: Child theme for the Twenty Eleven theme
    Author: Your name here
    Author URI: http://example.com/about/Template: twentyeleven
    Version: 0.1.0
    */

    "Template: twentyeleven" is on the same line as "Auther URI", when people use this code the dashboard tells them that the template is missing. You give the correct code in the comments after people ask about this problem, but for some reason you haven't fixed it in the tutorial itself. This would seem imperative to me.

    Corrected version:

    /*
    Theme Name: Twenty Eleven Child
    Theme URI: http://example.com/
    Description: Child theme for the Twenty Eleven theme
    Author: Your name here
    Author URI: http://example.com/about/
    Template: twentyeleven
    Version: 0.1.0
    */

  21. I looked through all the posts here but didnt see one with my particular issue. I too created a child theme using Adam Barndt’s tutorial but when I go to activate it it is broken. What makes my theme different is that it is an upgrade from a free site. Both the free site and the upgraded site are installed and I copied my style.css file from the upgraded version. Should I have used the original version for the child theme. Sorry Im a bit confused.

    • Hi Meeca,

      Sounds like could be related to the free upgrade. Please go to our forums / “Upload WP Forums” and start a new thread. We’ll be able to help you solve it there. Thanks and hope to see you there.

  22. Hi Adam,
    I created a child theme by following the steps mentioned here. However, the child theme does not show up on my Wrodpress backend. Any idea why?

    Best,
    Dhrubaa

  23. Hi,

    The current recommended practice to enqueue the parent and child theme stylesheets dosn’t work on Mystile:

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

    It only works by the @import method.

    FYI

LEAVE A REPLY