How to Create a Child Theme

This site is built using the Genesis Theme Framework which consists of two layers: the main "parent" theme (Genesis) underneath and the "child" theme (Midnight) on top. The "parent" theme provides the main functionality; the "child" theme allows design customization without touching (and potentially messing up) the framework underneath.

parent and child themesPhoto by wwarby.

A good theme consists of this 2-part system and I recommend everyone use a parent/child theme combination. If you don't, and you make customizations to your main theme instead of a child theme, not only do you run the risk of messing up the functionality, you will also have to re-do your customizations every time you update or upgrade. Not fun.

An Analogy to Explain Child Themes

Not to beat a dead horse, but if you don't understand the concept of a child theme, I hope this analogy will help.

Image you want to paint a beautiful piece of artwork to display in your living room. You have two choices. You can paint directly on the wall, or you can paint on a canvas.

Painting directly on the wall would be risky, wouldn't it? Because if you make a mistake, you would have to redo the whole wall. Also, if you move to a new house, you would have to repaint the artwork on your new living room wall.

However, if you paint on a canvas, a mistake would only require a new canvas, not a new wall. Second, if you move, you can simply take the canvas with you and rehang it on your new wall. Easy peasy.

It's the same with parent and child themes. Making customizations to your parent theme (i.e. a theme without a child theme) is like painting directly on your living room wall. But customizing a child theme, is like painting on a canvas. With a child theme, there's less to mess up and you won't have to "repaint" (i.e. make your customizations all over again) when you upgrade. And plan on upgrading because there are new updates for WordPress all the time.

The bottom line is, I recommend using a child theme. But not all themes come with a child theme. Atahualpa, Genesis and Thesis do. The default WordPress theme, Twenty Eleven, for example, doesn't. Twenty Eleven is a handy theme to use for something basic and straightforward. It's nice because it comes pre-installed with WordPress. The good news is, you can create a child theme easy peasy.

How to Create a Child Theme for Twenty Eleven

Can't see the video? Watch it here.

Video Notes

1. Fire up FTP. Here's how to use FTP.

2. Navigate to your "themes" folder on the server side. Your themes folder is located in "wp-content."

3. In your themes folder, create a new folder called "twentyelevenchild."

4. Now create a style.css file to put into your twentyelevenchild folder. Do this by opening up your basic text editor application on your computer. This might be TextEdit, Notepad or something similar.

5. Open up a new document in your text editor and paste the following code into it (grab everything including asterisks, brackets, etc.):

/*
Theme Name: Twenty Eleven Child Theme
Description: Child theme for Twenty Eleven
Author: Amy Lynn Andrews
Author URI: http://BloggingWithAmy.com
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

body {
   background: #333;
}

6. Make sure the file is in plain text format and save the file as style.css and save it in a folder on your computer where you can find it.

7. Go back to your FTP. Navigate on the left side of your FTP screen ("your side") to the style.css file you just saved.

8. Click and drag that file into the twentyelevenchild folder you created above on your server side.

9. Go back to your WordPress Dashboard –> Appearance –> Themes. You should now see your Twenty Eleven Child Theme listed as an available theme. Activate it.

10. View your site. If you kept the code above as I wrote it, you should see your site refresh with a dark gray background, indicating your child theme is active and working.

Congratulations, you did it!

Further Reading:

If you'd like more technical details and explanation, check out Creating a Simple Child Theme Using Twenty Eleven.

Disclosure: I am compensated for purchases made via the referral links in this post. Read my full disclosure policy here.

Other posts in this series

  • How to Create a Child Theme

Comments

  1. This sounds really interesting, I guess I can't do this in Blogger?

  2. Hi Amy,
    I learn something new from everyone of your posts! I use TwentyEleven right now and am going to add the child as you suggested above. I have a question, though. Do you know why my sidebar shows up at the bottom when I view my blog on my iPad. It's normal on my desktop. My guess is that it's automatically going into some kind of mobile mode, but I don't know how to change it.
    Thanks!
    –Gena

  3. Well, I tried to change to the Twenty Eleven Theme and then create a child them. However, when I returned to the themes page, it had renamed Twenty Eleven as Twenty Eleven Child with you as the author, and Twenty Eleven does not appear anywhere. It didn't ask me to activate it, instead it had that (child) theme listed as the current theme. So…figuring I messed up somewhere, I switched back to Atahualpa (for the time being), went back to the FTP folder and deleted the twentyelevenchild folder, thinking that I could just start over. When I went back to my themes page, however, Twenty Eleven is still missing and Twenty Eleven Child is still in place (but as I said, it never changed the background color). I think it's too late tonight for me to figure out what I did wrong. If you have any ideas, please let me know. Maybe I'll be able to see it in the morning. Or maybe I'll just have to stick with Atahualpa. It's not that your directions weren't perfectly clear, it's just that I don't understand the ramifications of every little thing I change, and I can't reason my way out of my error.

    • Hey Michelle, I can't be sure, but what it sounds like to me is that your Twenty Eleven Child theme replaced the Twenty Eleven theme on the server. A couple places to start: 1) How did you upload the theme? Did you transfer using an FTP program or did you use the WordPress dashboard and 2) what is the folder name of your Twenty Eleven Child theme? When you name it in the stylesheet in the header section, it wont change the folder name, so when you upload a new folder to your server, it will replace the old folder with the new one. This might not be the case, if you created a folder directly on the server with a different name than the original theme, then it shouldn't have over rode it. Same with if the folder name of the child theme is different than the original. In that case, I don't know? Sorry, but I hope that helps :D

      • Amy :

        Yes Michelle, like Amber said, it looks like you have replaced Twenty Eleven with the child theme. You can reinstall the original just as you would any theme via your Dashboard. If you see a prompt that asks you if you'd like to "replace" or "rewrite" go ahead and cancel. You'll have to make sure you have different file names.

        Amber did a great job of walking you through here. Thanks, Amber!!

  4. Thanks Amy! This is an awesome post. It is really helping me out. I've been a wordpress mod'er for a while now, but I've always tried to avoid child themes like the plague, I guess because I thought it would much more complicated than this. Your post has helped simplify it for me. Thanks again.

  5. Hi Amy! I have been using a premade theme that did not allow much customization. I decided to switch to 2011 and make a child theme. I'm stuck in the middle of the steps, number 9 to be exact. I have Go Daddy hosting and had no problem getting into my FTP File manager and making a new folder. I saved the code in Notepad and put it into my child theme folder but I do not see it in my themes in WP. I called Go Daddy and they confirmed it is in the right place in the server. Do you have any suggestions why I do not see it in WP??? Also I just wanted to say I refreshed and logged out and back in to WP thinking that might solve the problem. Thanks so much for posting all your helpful info!

  6. Ok, Now looking closer I have done the same thing as Michelle. I have replaced my 2011 Theme with the child theme. Michelle did you fix this or does anyone know how? I have switch back to my old theme till I have more time to fix this.

  7. Okie Dokie I was able to create a child theme. Here is the part I am having trouble with. I put the style.css file in my child theme folder on my server and it shows in manage my themes on wordpress dash board. When I preview it the formatting is off. Looks like the templates are not coming through from the parent theme. I included the @ import url("..twentyeleven/style.css"); Any ideas on what I am missing here? Thanks so very much :)

  8. I got it. Simple stupid mistake. I named the folder on my server incorrectly. I went back and did it over and over until I found that error. You make me feel like a technology genius! I am your new biggest fan!!!!! :)

  9. Elizabeth :

    Very helpful post. But I want to clarify that the developer of Atahualpa does not provide a child theme for it. A child theme for Atahualpa has to be made by the person who wants to use Atahualpa, and they won't find any support for how to do that on the Atahualpa forums either (which is a bad reflection on the developer). I have searched high and low for info on how to create a child theme for Atahualpa by simply cloning the parent theme, and there's nothing out there (except the sound of crickets) :-)

  10. Jerminal :

    Hi Amy,

    I came across your site while looking for a tutorial for creating a child theme for weaver II . What a great find !! Now I am reading almost everything forgetting my main purpose of being here ; ) …

    My Wpress site under construction as I am new and learning when I have time. I mostly learning via youtube. Unfortunately not many of the video tutorials give step by step instruction, or some important details are missed, etc. So when I found your video I was glad to find an easy to follow instruction .

    I watched and followed your steps in creating child theme and when I went to wp-content I saw another weaver-ii child theme already preinstalled . I opened it and there was a basic top information as you were giving in your video, but no other coding, just some advice which were not clear whether I should copy the code .

    So my question is what to do next, should I copy the coding from my weaver-ii editing page and paste to that preinstalled child theme , or there is another way to create the rest of coding? Perhaps you have a video on that subject, if so , could you please give a link to that, it would be helpful.

    Thank you for you time ,
    Jerminal

  11. Amy,

    I am in the process of developing my website using the twenty eleven theme. I had been working on my site for a while when I discovered about using the child theme. I created the basic child theme, but when I activated it, my menu bar became very messed up, instead of showing the menu and sub-menus it is show everything. I though that when you created a child theme it was supposed to mirror the main theme until you made changes in the child theme style.css. I know I can revert back to the twentyeleven theme, but I don't understand what has happed.

    Thanks for any assistance you can provide. I am a complete newbie at this and am struggling to understand everything.

    Debbie

  12. Jerminal :

    Hi Amy,

    I understand you are busy, and still hope you answer my question which is above Debbie Blair's message.

    Thanks,
    J

  13. Thanks so much! I needed to set this up to create a sidebar in my posts as well as on my pages. Great tutorial!

Leave a Comment

*