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

Do you get The Useletter?


Comments

  1. says

    Hi Amy

    I’m a big fan of ElegantThemes too. I had tried to use a child theme with ET some time ago with no success but I’m trying again now. The one part I can’t figure out is how to make changes in css and php files that are below the root of the theme. For example, “themenane/epanel/page_templates/page_templates.css” and “…/page_templates.php”. Any thoughts?

    Thanks

    Mike

    Thanks.

    • says

      Hey Mike, I’m not sure if it varies from theme to theme, so I would definitely login to the Member section and ask in tech support!

  2. says

    I successfully created a child theme for Twenty Twelve (just changed the elevens to twelves in your code). Thanks so much for helping people who aren’t super computer-literate like me to figure this kind of thing out! If I can do this, anyone can! I’m wondering if you’ve done any other videos for how to make customizations for the child theme. I don’t know anything about code. If you haven’t, what resources would you recommend? Thanks!

  3. says

    I’m very new to this blogging world. I’ve tried to set up a blog many different ways, but after I came across your blog I started to figure things out! I’m trying to install the child theme. When I followed these directions, it says that the theme is broken and the stylesheet is missing. What does that mean?

    Thank you!

      • Tiffany says

        I had same issue. Deleting & starting over didn’t work, refreshing didn’t work . . . A WP support thread said that when using Notepad it will save style.css as a .txt file & will cause this error. If you go into FTP on the server side, open the child theme directory you created & double click on the file there, it’ll tell you if it’s a .txt file. If so, simply rename by deleting the .txt extension (leaving only style.css) and it should work – did for me!

  4. says

    Amy,

    I am having trouble with the ftp. I downloaded the filezilla, and am following your video, but I have no folders on either side of the filezilla. I know there must be a step I have not done. It says not connected to any server. I’m so confused.

  5. Emily K says

    Will this same process and code work for other themes?
    I need to create a child theme but I don’t use twenty eleven I use Admired.
    Thanks in advance for answering my qustion.

  6. Chris says

    I’ve been looking at Elegant Themes for a site I’m working on (I’m brand new to WP). I can’t figure out if Elegant Themes comes with a Child Theme like Genesis does… do you know if it does? Or do I need to create one using similar steps as you’ve outlined in this post?

    On a side note, what is it about Elegant Themes that you like so much? It’s definitely appealing to me as for $39 I get 80 themes and some kind of framework (I believe -“Page Template” = Framework?) which is significantly cheaper than most single themes. At this point I’m not sure exactly how the site will turn out, and I’d hate to pay a bunch of $ for a single theme and then not have options…

    Thanks!

  7. Emily K says

    Can you use this with theme twenty twelve?
    After you activate the child theme, will both the original theme and the child theme appear as active?
    Can you tell I am new. lol

  8. Jay says

    Hi Amy,

    I watched your video and created a chhild theme for twenty eleven but I have a question, why is the only file on the child theme style.css? What if I want to make modifications on the header.php or the footer.php files for example?

    Thanks!

    • says

      Hi Jay, you can copy the other files you want to edit as well. I would open your files via FTP and then drill down to the TwentyEleven theme. Then, select the header.php (for example) and then click the “copy” option. It’ll ask you where you want to copy it to. (If you aren’t sure how to do it, I would call your host and ask them to walk you through the process of copying a file from one folder to another.)

      • Jay says

        can I just open the header.php file from the Editor in the Dashboard, copy everything and paste it into notepad++, save it as header.php and upload it to my child theme?

  9. Allison says

    Hi Amy,

    I am working through all of your steps, but have come to a snag. I have copy and pasted the info into Textedit, but when I save it I can’t find the file on FTP. Help?

    • says

      When you log into FTP, make sure you drill down in the menu (on the server side). It could be you aren’t seeing all the files because you have to select them from the dropdown menu. You want the public_html file –> wp-content –> themes –> etc. Does that help?

  10. says

    I’m not sure I can do this ( techy challenged). The only ftp i use is Filezilla and its for saving backups. Since i do use elegantthemes though, this would be useful. Trying to type w/ stitches in mythumb…(errors).

  11. says

    Hi Amy. I am very intrested in using a childtheme. I followed Your steps exxactly, the childtheme appears in my wp and I can actiavate it but the background doesnt change,,, so I guess its not working. I really cant figure out why bcz i copied your stylesheet excactly and wp also confirm its active and running.

    Is there any way else I can try to see if the childtheme is in command or do You have any suggestions?

    Thanks for Your great blog :)

    /Noa

  12. Paula says

    Amy-

    When I open my FTP, am I doing that through Bluehost? If so, when I open it, there is nothing there. No folders on the right side. Is there a step I am missing? I have never had a blog before and am very computer ILLiterate! I looked for an answer on Bluehost. It said something about needing to upload my website but when I go to do that it wants me to search for where I saved my website to my hard drive. I don’t think I have done that and don’t know how. Please help! shedding quit a few tears of frustration right now.

    • Jess says

      Paula, Yes, you want to open your FTP through Bluehost. Have you installed WordPress with simple scripts? On your C-panel there is a WordPress icon that you can click on to install. All of your WordPress files should then show up in the right side of your FTP. Hopefully that helps, I am having different issues of my own. :)

      • Paula says

        Hi Amy –

        I just wanted to let you know that I got it figured out. I guess it helps if you actually open folders! LOL. Any way, I have successfully created and activated a child theme! I am so excited! Thank you for all of you help!

  13. Beth Michaels says

    Does the wordpress updates apply to other themes as well? I think I’m understanding your rationale for all this, but if I’ve chosen a theme other than 2011 (Canyon) is there any reason to create a child theme? Thanks : )

    • says

      If your theme uses a two-part system (i.e. child theme) then you are good. If not, creating a child theme is a great idea!

  14. Jess says

    I just tried this exactly as you explained. I see “Twenty Eleven Child Theme Description: Child theme for Twenty Eleven Author: Amy Lynn Andrews Author URI: http://BloggingWithAmy.com Template: twentyeleven” in my WordPress themes and when I preview or activate it I have a completely blank screen. Nothing at all showing. I can change it back to twenty eleven and it is all there again. Any suggestions? Thanks!

    • Jess says

      I tried again, and now I am getting a message that tells me “Broken Themes

      The following themes are installed but incomplete. Themes must have a stylesheet and a template.” Just as Lisa above.

      If anyone has figured out how to solve this, please let me know. I have tried reinstalling several times.

    • says

      Hey Jess,

      Hmmm…without looking at it, I’d say make sure both the TwentyEleven theme and the child theme are present, but only the child theme is activated. I’d also recommend you look at the code and make sure you have every dot and tittle copy and pasted (even a missing apostrophe will break everything). I’m so sorry it’s not working!

  15. says

    Hi Amy! I’m in the process of transferring my blog from blogspot to wordpress and your blog has been a great help! For now, i was planning on using the TwentyEleven default theme. Since a child theme does not exist and you have to make one, does that mean all of the customizations i have to program in myself? I’m not that great in programming everything into my website. For instance, when you go to edit the twentyeleven theme, you can change and add a bunch of things to modify your site. For a child theme created, will i have to manually program it all in myself? Also, is it easy to start off using twenty eleven without a child theme and then create one later if i need to? Thanks!

    • Amy says

      Yes, you can most certainly start using it without a child theme, however, the benefit of a child theme is that you won’t have to redo all your customizations whenever WordPress is updated (which is often). The child theme just allows you to create customizations using CSS if you want. You shouldn’t have to update the installed WordPress options like header, background, etc. each time. I hope that helps!

      • says

        Thank you that definitly helps…but just to clarify, if i start using the default theme as is to get my website up and running, is it easy and seamless to purchase a theme and child theme later and transfer over? Or will it take more work and do you recommend just purchasing a theme and child theme right now? I am new to wordpress so i’m not quite sure what I want. My main concern right now is to also get my bloggspot transferred over to wordpress without loosing anything. But at the same time I do not want to create more work for myself down the road if it’s hard to switch over to a purchased theme/child theme…thanks again!

        • Amy says

          Well, any time you switch to a new theme, it takes a bit of work, but I think if I was in your shoes, I’d just go with the default theme for the time being until you get familiar with WordPress.

  16. Lisa says

    This is what I copied:

    /*
    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;
    }

    • Amy says

      OK, I wonder if it didn’t upload all the way for some reason. I’d still try reinstalling. I hope that helps! So sorry it gave you trouble. :(

    • Jess says

      Did you ever figure this out? I am having the same problem now. Copied it and followed exact dirrections! Just wondering if you had a solution. Thanks!

  17. Lisa says

    I have the gray background now but my themes page says:

    Broken Themes

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

    What do I need to do?

    • Amy says

      It sounds like you might not have copied the entire snippet of code? (Hard to tell from here, but that would be my guess.) I would try again.

  18. Patricia says

    I am diligently going through your steps on how to set up a self-hosted WordPress blog. I greatly appreciate your guidance! I got stuck on #6 here. When I went to save the file in plain text format as “style.css”, I got the following message… “You cannot save this document with extension “.css” at the end of the name. The required extension is “.txt”. You can choose to use both, so that your file name ends in “css.txt”. I’m using TextEdit. How do I proceed now? Thank you!

      • Patricia says

        Thank you for your quick reply! The only thing I was uncertain about was what unicode format to choose. I just randomly picked one and hoped it would work, and it did work. I now see a dark gray background and am ready to move forward to the next step. Thanks so much!

  19. says

    Thanks!! I successfully created and activated a child theme for Atahualpa. The only thing I’m having a problem with is trying to figure out why, under the child theme the menu is showing every single category I have, instead of my standard menu I’ve set up. I tried googling it a bit and can’t find a way to fix it. Do you have any suggestions?

  20. says

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

  21. Jerminal says

    Hi Amy,

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

    Thanks,
    J

  22. says

    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

    • Amy says

      Make sure the Menu settings (Appearance –> Menus) are correct, or try creating a new menu altogether to see if that works.

  23. Jerminal says

    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

  24. Elizabeth says

    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) :-)

  25. says

    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!!!!! :)

  26. says

    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 :)

  27. says

    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.

  28. says

    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!

  29. says

    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.

  30. says

    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.

    • says

      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 says

        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!!

  31. says

    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