How to Create a Child Theme in WordPress

How to Create a Child Theme in WordPress

If you’ve been a theme developer (or even a tweaker) for any length of time, you will know how important it is to use a child theme when building upon an existing theme (rather than creating your own from scratch).

The issue is mainly with updates. If you make changes to a theme’s files (i.e. anything within the “/themes/yourthemename/” directory), those changes are likely to be overwritten when you next update the theme. A child theme allows you to set up a standalone directory in which you can make create copies of a theme’s files and tweak away, without fear of your work being overwritten by any future updates.

It may sound a little unusual, but it is extremely common (and best practice). In fact, an entire market has developed for child themes of popular frameworks, such as Thesis and Genesis.

Creating Your Own Child Theme

Fortunately, creating a child theme is a piece of cake – all you need to do is create one folder, and one file.

You will need access to your website via either FTP or your hosting provider’s file manager application. I would recommend that you get yourself set up with an FTP account (using software such as Filezilla), as it is easier to add and edit files and folders that way.

1. Creating Your Child Theme’s Folder

Once you have logged into your website via your chosen FTP client, navigate to “/wp-content/themes/”. This directory will contain one or more folders, each of which represents a theme installed on your site.

In this directory, create a new folder. You can name it whatever you like, but I would recommend that you use a descriptive name such as “parenttheme-child” (where “parenttheme” is the name of your active theme).

Here’s an example:

Child Theme

As you can see, my active theme is “twentyeleven”, so I created a “twentyeleven-child” folder.

2. Creating Your Child Theme’s style.css File

Once you have created your folder, you need to add the one and only file that is required to create a valid child theme – style.css. As you have no doubt guessed, this file will work as an addendum of sorts to your parent theme’s style.css file.

You’ll need to place some vital information inside of this file, so open up your favorite text editor and paste the following into a blank file:

/*
Theme Name: My Child Theme
Theme URI: http: //mysite.com/
Description: This is a custom child theme I have created.
Author: My Name
Author URI: http: //mysite.com/
Template: parenttheme
Version: 0.1
*/

Obviously a lot of the information above is generic, and you can change it to suit your needs. There is only one variable that you must alter in order for your child theme to be valid – “Template”. This variable is required in order to tell your child theme which parent theme it is related to, and must be changed to match the folder name of your active theme.

There is one other thing of vital importance that you must do. If you were to upload this file in its current state and activate your child theme, WordPress would look to your child theme’s style.css file as the default style file, and see nothing. As a result, your theme would render with absolutely no CSS styling. Therefore, you need to call the parent theme’s CSS file within your child theme’s style.css file, with the following line of code:

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

As with the “Template” variable above, you need to change “parenttheme” to match the name of your parent theme. If the default stylesheet is not style.css (it almost certainly will be), you will also need to change that to suit as well.

Now when your child theme is activated, WordPress will know to import all of the CSS from your parent theme’s style file before executing any CSS stored in the child theme’s style.css file. Because the CSS contained in your new file will be the last thing WordPress executes, it will take precedence over any preceding CSS.

Once you have added in the above two snippets of necessary information, save your new style.css file to your child theme’s folder. Finally, check out our guide to styling your website with CSS.

3. Activating Your Child Theme

All that is left to do now is activate your child theme.

Navigate to “Appearance > Themes” in your WordPress admin area. At the top of the screen you will see that your parent theme is active, but you should also see your new child theme listed below:

Child Theme

The information you included in your child theme’s style.css file (such as “Theme Name” and “Author”) will be displayed on this screen.

Just hit “Activate”, and your child theme will go live! Your child theme will then be shown as the active theme:

Child Theme

At this stage, you won’t notice any changes to your theme’s design, because you haven’t actually made any. However, any future additions to your child theme’s style.css will have an effect upon your site. And as intended, any future update to your parent theme will not affect your child theme’s style.css file.

4. Making Further Alterations and Additions

At this point, you may be thinking, “Changing my theme’s CSS is all well and good, but what if I want to make changes to my parent theme’s PHP files?”

Fair question, and the answer is remarkably simple. If you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory. Any changes you make will go live. This is perhaps most applicable for adding additional functionality via functions.php, but the same process applies to all available PHP files.

The same process also applies if you want create new PHP files, such as page templates. Just create the new file in your child theme’s directory, include the relevant information, and you’re good to go.

One thing you must bear in mind is that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/parenttheme/includes/external/php/example.php”, you should place it in “/childtheme/includes/external/php/example.php”.

Wrapping Up

As you can now see, creating a child theme is extremely simple, and you have no excuse not to do so.

Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme so that you don’t get any nasty surprises when your theme’s next update rolls around. Enjoy!

Creative Commons image courtesy of Vince Alongi

Tom Ewer

Tom Ewer is the founder of WordCandy.co. He has been a huge fan of WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not working, you're likely to find him outdoors somewhere – as far away from a screen as possible!

213 Comments

  1. Eve Hunt

    When talking about child themes, we first have to talk about parent themes. A theme only becomes a parent theme when someone builds a child theme for it. Until then, it is just a theme, such as the ones you find in the WordPress directory. Every theme that includes all of the files required in order to be considered complete can be a parent theme.

    Yet, while any such theme can be a parent theme, some are better suited to this purpose than others. For example, frameworks such as Genesis by StudioPress are specifically made to be customized by child themes.

    What is a child theme, then? Well, from the WordPress back end, a child theme doesn’t behave any differently. You can find and activate it under “Appearance” → “Themes,” just like you would with any other theme.

    The big difference is that a child theme depends completely on its parent in order to work. Without its parent theme present, it will not do a thing and cannot even be activated.

    That’s because a child theme isn’t a standalone entity, but instead modifies or adds to the files of an existing theme. It uses everything present in the parent theme and changes only those parts that you want to be different.

    This allows you to alter styles, functions, layout, templates and more. In fact, you can customize the parent theme beyond recognition. However, without it being present, none of it will work.

  2. Joe Mezzanini

    Thanks you so much. Your info about adding @import url(“../parenttheme/style.css”); solved my issue.
    Other web sites leave that critical information out. THANKS

    1. John Kenney

      try no to use the @import anymore there are a few reasons, check out WP
      https://developer.wordpress.org/themes/advanced-topics/child-themes/

  3. David Ellenberger

    Why wouldnt I see changes in my parent theme when I make them in my childs theme? And which theme am I supposed to keep “active”?

  4. Kimberly

    I was in the process of creating my first child theme based on a custom WordPress theme I’m using to build a client’s website (see http://soul2soulhealer.wsbydesign.com) and I’ve run into a bit of glitch. I began creating my style.css file for my child theme and then checked the parent’s css directory to make sure I had the correct file name and ending as directed in your blog. I found not one but several .css files. They were: buttons.css, ie.css, mobile.css, superfish-navbar.css, superfish-vertical.css and superfish.css. But, when I am in my WordPress Admin Dashboard and go to Appearance>Editor only two .css files are listed. One is style.css and the other is nivo-slider.css neither of which are listed as such in the parent’s theme css directory. Do I need to create six individual .css files and call each of them individually e.g., @import url(“../wellness/buttons.css”), @import url(“../wellness/mobile.css”),etc. or can I create just one style.css for my wellness-child them and then call in all of the .css files using multiple @import url commands within the same file? Lastly, where would you expect me to find the nivo-slider.css since it doesn’t appear in the parent’s css folder? Any direction you can provide is greatly appreciated. Thanks so much!

  5. darknote

    Hi,
    the new method
    https://codex.wordpress.org/Child_Themes
    more @import but code in functions.php line

  6. Tasos

    Extremelly useful, thanks for the article.

  7. Dan

    Fascinating!
    I navigated here from your page, “How to customize a WordPress theme”.
    Most helpful!
    Thanks

  8. Doraemon Games

    Doraemon Games: Play the best Doraemon Games online free for everyone! We update Nobita games, Doraemon Dress Up games, Doraemon Fisshing games, all Doraemon games online. Go DoraemonGamesPlay.com now

  9. jen

    Hi! I got these steps to all work and activated my new child theme. But when I switch between my parent theme and my child theme, I lose some of the changes I made working from the defaults in the parent theme. So I get the banner and color scheme of the demo back again. When I switch back to the parent theme, my work is still there. It’s not carrying over somehow to the child theme. Can you help me decipher what went wrong? Thanks!

  10. Dion O

    Wow! This is really simple. Can it be applied to any theme? I am curious to try it now. Thank you for this simple tutorial, Tom.

    1. Nemanja Aleksic

      It can be applied to any theme.

  11. Pam

    at appearance/themes i do not see a place to activate, this is what i see
    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    Marina The parent theme is missing. Please install the “marina” parent theme. Delete

    help, plez n thank you

  12. Robert

    Are you sure you created two files function.php and style.CSS in your child theme folder..

  13. Aïleen

    Absolutely great tutorial! Cristal clear, to the point. My child theme is alive and working. Thank you so much!!

  14. Jiya Rizvi

    I created my child theme’s folder and CSS file but I still don’t see my child theme on my WordPress theme dashboard.

    1. akshay

      Can any one bother to reply for this comment, even I am getting the same error, after creating child theme and CSS I am unable to see child theme on appearence–> themes…….. I am using suits theme..

  15. Bilal

    Thanks for nice way of describing.
    I just want to know that after activating our child theme. Should we use child theme or parent theme active? and because once themes update comes, So which theme should we update parent or child? Every time which theme should be active ? Thanks in advance.

    1. Nemanja Aleksic

      If you want to use the child theme, activate the child.

      If you created a child theme, you’ll never see a child update, only the parent. Feel free to update the parent, but always double check your theme after the update.

  16. Nelia

    It tells me that the theme template is missing!
    how do i fix this?

  17. ouzounis

    That solves a lot of problems. I ve been working with wp a lot an always used ready themes to tweak. Thanks.

  18. Nate

    Where does one find “/wp-content/themes/”? I’ve seen about 15 of these tutorials now and they all talk about how simple it is to update something in this folder, without offering where this folder can be found. In other words, I got stuck at the first sentence in step 1.

    Keep in mind I’ve just started to try to make a wordpress site and am thus in the very first step of selecting a theme – so I don’t mind being talked to like a novice, as I am. I did download filezilla but am unsure exactly what to do with it.

    Thanks!

    1. Nemanja Aleksic

      Hey Nate,

      The website needs to physically exist on a server, somewhere in the world, as a set of files and folders. FileZilla allows you to access that server and browse its files and folders, just like you browse your computer.
      Your hosting provider has given you FTP access address and credentials, use them in FileZilla. You will then be able to find the files and folders of your website, including the /wp-content folder.

      Cheers!

  19. Gary

    Sorry for the double. What if applying a child affects aspects in your interface. I have 1 issue with the post template option dropdown box going inactive when applying any child themes. “” goes empty when child themes are applied running WordPress 4.3.1

    1. Gary

      select name=”_wp_post_template” id=”post_template” class=”dropdown” /select

  20. Gary

    What if applying a child affects aspects in your interface. I have 1 issue with the post template option dropdown box going inactive when applying any child themes. goes empty when child themes are applied running WordPress 4.3.1

  21. Carl

    Thanks. This was super helpful. Just migrating over to WordPress from Movable Type and wasn’t quite sure whether creating a new content.php file in the child would override the one in the parent, yet have the child still pick up all the other .php files. It did. Works perfectly and let me get rid of a weird issue in the SmartAdapt theme that created a thumbnail from the “featured image” on the main page, therefore duplicating images.

  22. Martin

    Works fine for style.css but how about shop.css
    I can’t get this to work in the same way and am wondering what I’m doing wrong.

    Any ideas? Am using wordpress with woocommerce and a themify theme called flatshop

    Thanks,
    Martin

  23. John O'Brien

    I have successfully created the child directory and the new style.css file. I then activated the child theme. Upon doing so, I seemed to have lost all the customization I had originally made in my parent theme. What is happening? Can you tell me what may be wrong?
    I need help.
    Thank-you

    1. Nemanja Aleksic

      It’s unlikely that the child activation did this. Do you have a security plugin like Wordfence that could have rolled back the change? Did you update the parent theme?

  24. Chris Kautz

    Thanks Tom. Super clear explanation. You are a born teacher!

  25. Malik Mati

    Very informative and easy to understand. Thanks for sharing

  26. Kevin

    Excellent post! I have a variety of WordPress Twenty Fifteen child themes at http://ithemify.com if anyone’s interested. Simply install & activate. 🙂

  27. Courtney Hall

    Hi Tom! Thank you for the screenshots, it really helps a bunch.

  28. mike

    Hi there – thanks for the post

    I have created a test classipress site at http://www.alimikemike.com to build my site before i migrate to a preferred url. anyhow i created a classipress child theme folder and style.css, then activated it. I have now lost the Home button on the aqua stripe (same stripe as the post an ad button).

    i didn’t make any style changes to the file etc just set up the child theme. very strange any ideas would be greatly appreciated!

    thanks in advance

  29. Santi Navarro

    Thanks for post, very useful and easy explanation to create child themes.

  30. Anindya Ghosh

    I am already created my customize template but it’s not working….. SO please help me…. Tell me what i have to do……

  31. Anindya Ghosh

    I am creating my customize theme as its shown on then list theme selection but it’s not working properly….. So what i will do?????? Please help me its very urgent……..

  32. web hoster

    Awesome, this was my fourth article on how to add a child theme lol, I finally got it thanks to you. 🙂

  33. Tony Styles

    It’s really heart warming to find people like you who are prepared to share their expertise for the benefit of others rather than use it to destroy what others have done. Well done and many thanks.

    One tiny little tip I learned the hard way. When specifying the name of the parent theme in the child style.css file, bear in mind it’s case sensitive. Otherwise, worked first time, so simple and no excuse for not using it.

  34. Rachel

    Yep downloaded Filezilla as you suggested and got infected with two lots of Malware!!!!!
    Be careful folks!

  35. Shell

    Great Article!!! I think concept of creating child theme has been in use no popularly. Since WordPress give the freedom to change theme anytime, its better to make again a new theme. The advanced theme generators like TemplateToaster making it more easy for users.

  36. Bill Brown

    You said; “but what if I want to make changes to my parent theme’s PHP files?”

    “Fair question, and the answer is remarkably simple. If you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory.”
    “One thing you must bear in mind is that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/parenttheme/includes/external/php/example.php”, you should place it in ”/childtheme/includes/external/php/example.php”

    Now my question is this:
    WHY? do I have to; “…just make a copy of it, and paste that copy into your child theme’s directory.” It is a parent PHP file. Why add it to the child theme. If I edit a specific parent PHP file and then save it, why do I need to add it to the child? Their are other parent PHP files, but I don’t add them to the child.

    1. Nemanja Aleksic

      If you update the parent theme you are likely to lose the customization (it will revert to the original PHP file) and break the child theme.

    2. John O'Brien

      Bill, this is because your parent’s theme, if ever updated, may overwrite the code you changed in the parent’s php files. The whole purpose of the child theme is to preserve your changes so they never get overwritten when the theme gets updated or modified.

  37. Samy Fahmy

    Hello Tom,
    Many thanks for this awesome tutorial… this the first time I understand child themes and apply it correctly.

    Just one question: when I make some modification in say: functions.php, should I make a copy of the whole original functions.php or i need only to make a copy of the file containing only the modified code? sorry for my bad language

    Thank you

  38. RJ

    Hi Tom,

    Thanks for this easy to understand tutorial. I do have 1 quick question for clarification…

    When creating the child theme, should I start with the entire style.css file from the parent theme, and only modify the lines that I need to change?

    Or should the child theme only include those few lines that I am looking to change?

  39. Dan

    Awesome explanation. You just saved me from a major repeating headache. Thanks!

  40. Kyle V

    Awesome explanation Tom, I was able to successfully create the Child Theme. I created a YouTube video the even more visual learners: https://www.youtube.com/watch?v=bIC7Fidy7GY

  41. serge

    Hello there, I’m trying to get the hang of this, but there is something in the concept of child themes that I can’t really understand: If I’m using some default theme (21014 for instance) and want to add some plugins that wil be extensively used (like visual Composer, or Wp-Courseware)… then what should I do? Install them on the Parent theme, and then make a Child theme for all subsequent tweaks, or should I leave the Parent Theme with just 2014 (and “default Plugins…askimet etc…) and Create a Child theme to Install those Plugins and any subsequent Tweak?

    sorry for the so basic, maybe stupid question, but as I said, it’s a bit confusing for me, whether child themes are more designed for purely “esthetic” safe tweakings / Customisations (Stylesheets etc…) or should be created whenever you add ANYTHING other than the Original Parent theme?

    thank you so much for answers! (It’s been bugging me for a while and can’t seem to have this doubt solved anywhere… So it must be me being stupid).

    1. Tom Ewer

      Author

      I’m not totally sure Serge. I’d recommend that you ask on the WordPress.org forums. 🙂

  42. sparkywalk

    Silly question #1,000,0001: 🙂
    I made a lot of changes to my parent theme style.css sheet prior to creating my child theme. I created the style.css sheet in my new child theme and just want to make sure that I am not going to lose anything I customized prior to creating the child theme. Or, is there something additional I need to do, like copy the parent css to the child…? Also, i copied over my complete functions.php file and page-homepage.php files to the child theme as well, as I had made significant changes to them.
    I appreciate your help. Thanks.

    1. sparkywalk

      Please help? 🙂
      thanks

    2. Golok

      You won’t lose anything as long as you keep the original files in the parent theme directory. Your child’s .css and .php files overwrite original files only temporarily and only if same style names or function names are similar.

      1. Tom Ewer

        Author

        Thanks for helping out Golok!

  43. Michelle

    I tried your method to create a child’s theme for the “Magazine Basic” theme, but it doesn’t work without copying and pasting all the codes from the style sheet to the child’s theme. I guess maybe it is just this theme. I will give it another try for a different theme and see. Thanks for the tutorial.

  44. James

    That’s a solution to all my problems! I was trying to make changes real time to the main domain, and sometimes things didn’t work fine.

  45. Anonymous

    Just a bit of a worrying thought. I am using the ‘Naked’ theme as my parent theme to customize. I am a little concerned about having a child folder on my computer now named ‘naked-child’. Nevermind, if you’ve got nothing to hide.. 😉

  46. Helen

    Hi the theme I’m trying to create a child for has this at the bottom of their style.css file:

    /**
    * The styleheets of Customizr are located in inc/css. Each skin has its own stylesheet : blue.css, green.css, …
    *

    Do I need to copy each of the stylesheets for the skins into my child?

    Thanks

  47. Matt

    Thanks! It works great!!

    The only concerning thing i have found is after activating my child theme i get the following error:
    “Cannot write cache folder. You may try setting the folder cache folder permission to 755 or 777 to solved this”

    I have set the permissions and it hasn’t made the error go away.
    The child theme is working ok, so should i be concerned?

    1. Tom Ewer

      Author

      Hm…I’m not totally sure to be honest Matt. Might be a good question to ask on the WordPress.org forums.

      1. Matt

        Thanks for replying Tom, and thanks for the article, was really useful.

  48. Jason L

    Wow, piece of cake! Thanks for the instructions, much easier than those on the WP site. 🙂

    1. Tom

      You’re very welcome Jason!

  49. Banyu Wicaksono

    Thanks for the tutorial. I’ve been wondering about how to make a child theme a long time and finally decided to google how to do it. Much easier and handier than I thought.

    1. Tom

      You’re very welcome Banyu!

  50. Carthage

    Hi Tom,

    Another great post from you. I am having a little problem with my site and I was wondering if setting up a child theme might help.

    I have set up an SSL and it is not working because all of the theme files seem to be fixed with a http beginning.

    I was thinking that if I set up a child theme, as you outline above, I could make all references agnostic e.g. //parenttheme.css and this might ensure that all files are fethced via http on http pages and via https on pages where SSL is forced.

    Can a child theme be used for this?

    1. Tom Ewer

      Author

      Hello Carthage,

      I’m afraid this is above my head – I don’t know! I’d recommend that you ask on the WordPress.org forums.

      Cheers,

      Tom

  51. Tone

    I had already created the child theme with a plug in, but could not for the life of me figure out how to get the php files to it to edit. thank you so much for this!

    1. Tom

      You’re very welcome!

      Cheers,

      Tom

  52. Amber Dixon

    Great instructions, thanks so much! Worked like a dream 🙂

    1. Tom

      Happy to hear it!

  53. Deborah

    I followed your instructions exactly, and though the child theme I activated contains no code (yet) below the header information (/* Theme customization starts here*/), everything in the appearance of my site shifts once the child theme is activated.

    The menus look wonky and the fonts are all different. I’m not sure what I’ve done wrong. Any thoughts?

    1. Tom Ewer

      Author

      Hey Deborah,

      All I can say is that you must have got something wrong along the way. I’d recommend going back through the steps in detail to make sure you didn’t miss anything out / add anything / change anything.

      Cheers,

      Tom

  54. Cynthia

    Very straightforward instructions…saved me a lot of time. Thank you!

  55. Lee

    Thanks for this. It was straight forward and very easy to follow. I really appreciate the help.

  56. Matt Tyrrell

    Tom,
    Very straight forward instructions. But, when I preview or activate my child theme, there is no structure to it. I just get a long list of menu items, not header, etc. I plan on trying it out again, but if it sounds obvious, let me know!
    Thanks,
    Matt T.

  57. Lexi

    Thanks, this made it possible for me to create my first child theme successfully!

    1. Tom Ewer

      Author

      Great Lexi! Glad it was helpful 🙂

  58. Gary

    Question, please: some of themes I use, like Cold Theme from ThemeForest.com, allow you to add CSS tweaks but in a special box in one of theme options pages. If I use a child theme, should that CSS really go in there, instead, or?

    thank you!
    gary

  59. Jeanie

    Hi I have a question I am so new at all of this. On the edit page you see on the right side of the page a different format then you do if you look at the editor page. I am not which one I am to use. I have the twenty Fourteen theme. I am not sure how to find what I am looking for to even change my child them. HA HA I am so new to this.

  60. diwaker

    hi tom,

    Great article and it is really very helpful for me. Here i want to ask one thing tom can i edit framework file directly ? i mean is it safe ?

  61. Jason Coleman

    Great article although I am not sure my CSS file is being pulled in correctly. When I look at a preview of the child theme, everything looks all jacked up. Any tips for cleaning up my install of a child theme.
    Using Stark theme, created stark-child, used new css file, changed the info in the file…..no dice.
    (Administrator edit: link removed) is the site I’m testing this on. Although If I can nail it down I’ve got many installs that need to be converted to child themes.
    Thoughts???

    1. Tom Ewer

      Author

      Hi Jason,

      I’m afraid that with limited information (i.e. your CSS being “jacked up” ;-)), I can’t really help.

      What I can say is that if you follow the instructions to the letter, you shouldn’t have any issues.

      Cheers,

      Tom

  62. Steve

    Tom,

    Great tutorial. Just one question. I have created the parent site and all is well, but if I want to start making changes, say to the page.php or sidebar.php file, are you saying that I need to FIRST copy over the file to be edited, from the parent theme folder to the child theme folder, save it, then do my editing?

    1. Tom Ewer

      Author

      Yep 🙂

  63. sachin walvekar

    Thanks a ton. Great tutorial.

    1. Tom Ewer

      Author

      My pleasure Sachin!

  64. sinethembagayiza

    Hi.

    I have done all the above and on my WP Dashboard-Appearance-Theme, the them does show but says it is broken with no stylesheet.

    Please assist

    1. Tom Ewer

      Author

      I’m afraid you must have got something in the process wrong, it is 100% correct.

  65. Juha Matias Lehtonen

    Thank you! Very well-written and clear article. I learned everything I needed and now I’m in control of my wp theme 🙂

    1. Tom Ewer

      Author

      Great Juha! Glad you found it helpful 🙂

  66. Manuel Ferreira

    Hi, thanks this was really helpful. One thing i didn’t understand is i managed to create my child theme, and create the style.css and some other .php files i need, but do i copy all the lines of code from the parents files to the child ones? I did that with the style.css one and my website stoped working, as soon as i delete all the coding from the child style.css it works again. Do i only write the lines i want to alter in the child files?

    1. Tom Ewer

      Author

      No — just do what it says in the guide 😉

  67. Forrest Nicholas

    I would just like to echo this
    Thank you!
    After seeing again and again how important a child theme is, it’s a huge relief to find someone who explains it clearly and directly!

    1. Tom Ewer

      Author

      Glad to help Forrest 🙂

  68. Mike Babbitt

    Thank you!
    After seeing again and again how important a child theme is, it’s a huge relief to find someone who explains it clearly and directly!

    1. Tom Ewer

      Author

      My pleasure Mike 🙂

  69. Wittman

    Keeping on topic with the “twentyeleven” theme… What if you want to make changes to a file that is NOT at the theme’s root level, but in a sub-folder instead?

    For example “widgets.php” is located at “twentyeleven/inc/widgets.php”. How do you include a “widgets.php” file in the child theme that will be loaded instead of the parent theme’s “widgets.php” file?

    1. Tom Ewer

      Author

      Hi Wittman,

      That’s a good question, and not one that I am 100% confident in answering. Does anyone else know for sure? My suggestion would be to experiment and see what happens — presumably you need to match the folder system.

      Cheers,

      Tom

      1. Wittman

        Yes, presumably. 😉

        …but so far it’s not working for me.

        1. Tom Ewer

          Author

          Sorry I can’t be of any further help — it’s not an issue I’ve had to deal with before…

    2. Vishu7

      exactly!

      did you find anything wittman to share?

      Thanks
      Vishal.

  70. Angel

    Hi Tom,

    Thanks for the post. I now have a child theme and it’s activated… but how do I edit or customize it? The only code in the file is the style.css file that is in the new child directory.

    Do I copy and paste the files from the parent theme?

    Thanks,
    Angel

    1. Cynthia

      Angel, if you go back and actually read his whole post, you will learn everything you need to know to customize your new child theme.

      This is a very helpful & clear post. Thank you, Tom.

      1. Tom Ewer

        Author

        Angel: what Cynthia said.

        Thank *you* Cynthia 😉

  71. Mike

    I have done it slightly differently with a plugin, however it’s always nice to learn to do things the way they were supposed to be done, so thumbs up mate for this tutorial.

    1. Tom Ewer

      Author

      Thanks Mike!

  72. Shemul49rmc

    Thanks for the post. I have just created my first child theme of Twenty Thirteen theme.Its just simple, only 2 KB

  73. Stacey

    Hi, I created a child theme as stated above and now my menu won’t show. I go into the menu options, tell it to save the menu and it will not work with the child theme. I am using the WordPress theme ‘Customizr’ and I would like to add a tockify calendar to the site. I have tried adding the tockify calendar where they say to, both through the CSS and through the Child theme and it will display the code at the bottom of the screen, but not the button.

    I am creating the site only on my laptop to show to my volunteer group…then if they give the go ahead, I’ll have to transfer the files to our actual hosting company. How can I resolve these issues?

  74. Claudiu

    What about getting child theme language pack witch is not present in parent theme folder. I put in folder lang in child theme and it’s not loading the language pack, but if I copy the same files in parent theme lang folder it’s working.

    I have the same problem with files from deeper folder not in theme root (I mention that I respected the folder path). If I change in parent theme files it’s working but if I put those changes in child theme files it’s not working.

  75. Sonja M. Parham

    If you have a site up and then want to put in a child theme, how do you maintain the website as you have it because to my understanding the ‘changes,’ photos, slider, etc won’t be in the child theme.

    Please advise.

  76. movie2k

    how to add extra sidebars in new wordpress default theme?

  77. V Hamilton

    I am totally new to this website creation and want to ask (probably a dumb question) but why do we need to make a child theme?

    1. J Soungie

      Well you covered yourself already with saying it is a dumb question. He explains why in the first two paragraphs.. Did you read the article? Making a child theme holds the changes you’ve made to your website if you choose to update your theme. When you update your theme it will overwrite any customizing you may have done to your theme.

  78. Luke

    I think the line about the template variable needs to be clearer, it’s worded poorly, and although it makes sense to someone who knows what’s happening, if you are unfamiliar with wordpress it would cause a lot of confusion. May I suggest adding the line

    “Please note the “Template: parenttheme” in the text above that you just added to your new style.css file. parenttheme needs to be renamed to match the directory of the parent theme.” Or something similar.

  79. Mike McGarry

    I found this paragraph needing some clarification:
    “You’ll need to place some vital information inside of this file, so open up your favorite text editor and paste the following into a blank file:”
    At first it seems to indicate I need to add the vital info in the css file then it says to paste it into a blank file, which is it? if a blank file does it matter what I name it??

    Thanks.

  80. mosy

    Not working
    i Add in it .. but i do not see my new child theme listed below: this warrining is end of the listed themps

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    My Child Theme The parent theme is missing. Please install the “parenttheme” parent theme.

  81. salem

    Great tutorial I read it instead of WP Codex Guide .
    I just advice every one who create wordpress themes
    To Use Netpad++ to make everything on the theme .
    I just navigate to my server folders using NppFTP Plugin
    create new folder ….. crate new file call style.css and continued the tutorial ..simple as that .
    All my themes I make in this way and things never been easier .
    Regards Salem Al Fituri .

    1. maninder

      hi plz help me i read all about to create a child themes but my English is not much good so can any one plz explain with step by step pic it will be really appreciate if any one can do that

    2. Peter

      I have followed your instructions and have pasted the following code in to the new child file but the “style sheet is still missing”:

      /*
      @import url(“../customizr/style.css”);
      Theme Name: Customizr Child Theme
      Theme URI: http: //anyinternetmarketer.com/
      Description: This is a custom child theme I have created.
      Author: Peter Marks
      Author URI: http: //anyinternetmarketer.com/
      Template: customizr/style.css
      Version: 0.1
      */

      My theme is “customizr” and my child directory is “customizrtheme-child” .

      Please advise how to correct.

      1. CHS

        I believe you need the template to be:
        Template: customizr

        without the style.css on the end.

      2. Jeff

        Peter –

        The line that imports your original css file:
        @import url(“../customizr/style.css”);

        must be outside the last */
        As posted above, you have it inside the comments so WP will never see it. If you follow Tom’s example exactly, except put the name of your parent theme’s directory as the template, all should work fine.

        jeff

  82. Debbie

    Excellent walk through! No more excuses for not setting up a child theme. With all the theme updates out there, it’s imperative to stay current and this is the best way to do it. Kudos for making the process so transparent.

  83. Cecilia Svensson

    Hello Tom!
    Thanks for going through this child-them-process.
    I did it exactly as you said and it worked, i.e. my new child theme was created and I could activate it.
    How ever, when I activated the new theme my adjusted menu from Twenty Twelve did not show, instead the default one was published.
    I quickly changed back to my old theme, don’t even dare to think what might have happened to all my plug ins and settings.

    My question is: Can you explain to me why this happened and if there is a way around it.
    To create a new menu is easy and I can fix that in a minute, if it’s not possible to take care of.
    I get a bit insecure though, are there any other things that might happen that wasn’t suppose to?
    Above you write: “At this stage, you won’t notice any changes to your theme’s design, because you haven’t actually made any.”
    Well, I disagree with you a bit here. Maybe menus are not considered as design, and if that’s the only thing that changes then I can live it. Would like to know though, if I can expect more surprises.

    /Cecilia

    1. Tom Ewer

      Hi Cecilia,

      Your original customizations were assigned to the parent theme, so when you switched to the child theme they were overridden.

      Cheers,

      Tom

      1. Jeff

        Tom –
        This doesn’t make sense and contradicts what you said at the very beginning of this article.
        If modifications have already been made to the parent theme’s style.css, and a proper child theme style.css is created, those modifications will be included with the import of style.css from the parent theme into that of the child theme. Yes?

        jeff

    2. Jenny

      Hi Cecilia,

      I’m having the same problem with the menu not coming out correctly. Did you solve your problem?

  84. Charlie

    Thanks Tom!

    I just walked through the steps you mentioned. Works perfectly.

    I’ve been doing some tweaking of my templates lately, and REALLY needed to get a child theme going before I get too much more involved.

    Thanks again…

  85. Domaine

    created everything as described, but it does not work.
    after activation of the child theme, I see the site almost in the very beginning stage…
    have checked all at least twice…

  86. Alison Riley

    Hi Tom..

    I followed this and did as instructed…and everything seemed to go well, however,when I published my child it gave me this message..

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

    Also…my widgets in side bar are missing.

    Help would be so appreciated!!
    Thanks!

    A.R.

    1. Tom Ewer

      Author

      Hi there,

      If you follow the process to the letter then it should work fine, so there must either be an error in the process or something wrong with your theme. Either way, I’m afraid I can’t help (although I would suggest that you check over your process carefully). Sorry!

      Cheers,

      Tom

      1. APalmer

        I’ve followed the instructions to the letter and double-checked all the information, but the template isn’t showing up in my list of templates.

        This is my CSS file:
        @charset “UTF-8”;
        /* CSS Document */

        /*
        Theme Name: Prana Child
        Theme URI: (Administrator edit: link removed)
        Description: This is a custom child theme I have created to alter the colors on the navigation bar.
        Author: APalmer
        Author URI: (Administrator edit: link removed)
        Template: prana
        Version: 0.1
        */

        @import url(“../prana/style.css”);

        My child CSS file (style.css) is saved to a folder called, “prana-child”.

        I’d appreciate any help.

        Thanks for your time,
        Amy

  87. mike

    Thanks for the tutorial. I have learned a lot and going to implement this.

  88. Carlie

    I have followed the directions but I am getting a error say “The following themes are installed but incomplete. Themes must have a stylesheet and a template.” Also under description “The parent theme is missing. Please install the “Tiga” parent theme.” I have added the style.css to the child theme folder but I don’t know what else I’m missing.

    Thanks in advance for the help.

    1. Tom Ewer

      Author

      Hi Carlie,

      It’s difficult to say what’s gone wrong but it does sound like you’ve made one or more mistakes along the way. I’d go back through the process step-by-step and make absolutely sure that everything is per as my guide.

      Cheers,

      Tom

      1. Carlie

        I have gotten this to work once with one of my websites following these step. But when I try this with one of my other websites under the description it is saying “The parent theme is missing. Please install the “Tiga” parent theme.” I am doing everything the the same i did the first time but I am not sure why it is not working with this theme.

        Any help would be appreciated.

        Thanks for the help in advance!

  89. Misty

    Thanks Tom for creating this easy cheat sheet for building a child theme. It helped me out a lot!

  90. Giovanni

    Hi,
    I’m using MAMP, so I’m working locally.
    It’s strange: I followed all the instructions (and it’s not the first time I do it!) But this time, after activating the child theme, I receive this error message:

    Server error
    The website encountered an error while retrieving http://localhost:8888/wordpress/guestinnation/wp-admin/themes.php. It may be down for maintenance or configured incorrectly.

    And I can’t get in the CMS anymore… Any suggestion?

    thank you!

    1. Tom Ewer

      Author

      I’m afraid I’m not sure how it being a local site may affect the process…the above tutorial is for online sites.

  91. sydneyjbg

    Hi Tom,

    I feel like I’m just missing something obvious, but after activating my child theme for the Graphene theme, I have a new Home page that has my old Home page’s stuff on it but wrong name. It should be called Headquarters, not Home.

    Here’s how it happened: I had my site all set but then needed to change functions.php so created and activated child theme. The background image was gone and the default header was back, but the rest of the site looked ok. No big deal. I re-uploaded the background image and changed the header.

    Then I saw that the sample page and default home page were back in the nav pane. I deleted the sample page and I already have a home page called Headquarters instead of Home. Now, instead of being first in horitzontal nav pane, Headquarters is the last in horizontal nav. It is fine in the menus screen so there is no way for me to do anything to it. I don’t see a Home page anywhere to delete. The default Home page now looks like the old Headquarters and the Headquarters page is blank.

    I need the Home page to go away; the Headquarters page has to be first in the nav pane and have all the home page sidebars and posts on it. I had it all set up and now just don’t know what went wrong, but it only happened after I made the child theme.

    Here is the link to the website I’m working on: (Administrator edit: link removed)

    Thanks in advance for any assistance.
    Sydney

    1. sydneyjbg

      Tom, nevermind. I forgot to tell Theme to use the Main Menu as the header menu. 🙁 All is fine.

  92. Lori

    Hi there. I’m completely new to wordpress and stumbled across your site. I’ve been making changes directly to my theme’s files (style.css, woocommerce.css, etc) and started to worry if these changes would be overridden in the future once an update is required to worpress, a theme, etc.

    Can you tell me if this is something I should be worried about? I haven’t been keeping track of all the little changes to colors, etc, but do I need to create a child theme? If so, can I simply make a copy of my entire theme folder in its current state and rename it parenttheme-child, then activate the “child theme” and make changes to the child theme folder’s css files from here on out? All I really want to do is ensure that any changes I’ve made and will continue to make end up staying there, even after doing necessary updates in the future!

    Thank you very much for any advice you might have! I’m hoping to build a site that I can maintain and love for years without running into any major issues down the road.

    Best,

    Lori

    1. Tom Ewer

      Author

      Hey Lori,

      Presumably you’re using a WooThemes theme? You will need to create a child theme before running an update otherwise yes, your changes will be lost.

      Simply copying and pasting the theme files won’t work in itself — you should only duplicate the files that you have made changes to and create the correct link from the child theme’s CSS file as instructed above.

      Cheers,

      Tom

      1. Lori

        Thank you, Tom! I will be sure to reference this when creating the child theme and duplicating the files needed for that. Appreciate the help!

        Best,
        Lori

  93. whitespace

    creating child theme – in theory yes but having it work in practice is a different story. i want to use the parent theme skylark and create a child theme from it. in my directory wp_content/themes/skylark-child i have created a style.css file and place the following:
    */
    Theme Name: skylark-child
    Template: skylark
    */
    @ import url(“../skylark/style.css”);

    i went to my dashboard – and selected themes and activated the child theme skylark child (it actually showed i do not know how i got it do show in the themes window) and when i activated the skylark child them and selected visit site this is what appeared
    straight text ….

    My site/Blog (in purple letters)
    Just another WordPress site (blue letters etc)
    Menu
    Skip to content

    Home
    Contact
    Find Us
    Sample Page
    Blog

    Home

    Home
    Post navigation
    Archives

    January 2013

    Meta

    Site Admin
    Log out

    Proudly powered by WordPress Theme: Skylark by Blank Themes.

    what do i need to do to get the child theme to work? thanx in advance
    and a general question… i wanted to use the wordpress theme canonical and make a child theme from it – it indicates that it has a parent theme responsive. can a child theme be made from a theme that already has a parent theme?

    1. Tom Ewer

      Author

      It’s difficult to say what the problem might be — it could be the location of the CSS file or it could be that the theme is relying upon another CSS file that is not mentioned within the style.css file. I would recommend that you contact the theme developer to see what the problem is.

      As for making a child theme of a child theme, I’m not sure, I’ve never tried it!

  94. jack.reed

    Hi, Tom

    I’ve made the *.css file you said was necessary, but it’s still not working. Is it also necessary to copy and paste all of the source folders from the parent theme’s folder into the child theme’s folder?

    1. Tom Ewer

      Author

      Hi Jack,

      The only thing you *need* to duplicate is the CSS File — anything else is optional. If it’s not working then there’s likely a problem with the code you’ve included in the new CSS file or the location of the CSS file relative to the parent theme.

      To change styling you only need to duplicate the CSS file. To add and amend some functionality you need to duplicate the functions.php file. To change the layout and structure of particular parts of your site (say the single post page) you will need to duplicate the relevant file (e.g. single.php).

      Hope that makes sense!

      Cheers,

      Tom

  95. Mrinmoyee

    I am getting error message like this..
    Fatal error: Cannot redeclare inkthemes_wp_enqueue_scripts() (previously declared in D:\projects\phpsite\wordpress\wp-content\themes\themia-lite-Child\functions.php:11) in D:\projects\phpsite\wordpress\wp-content\themes\themia-lite\functions.php on line 20

    Please, let me know the solution for this.Thank you.

    1. Tom Ewer

      Author

      Looks like you’re redeclaring a function that has already been declared in the parent theme’s functions.php file. Remove the copied function from your child theme’s functions.php file and it should work fine.

  96. ramzye4

    i have responsive theme and i have this message in mangage theme i hope to ride this message thanks
    Name Description
    BuddyPress Colours The parent theme is missing. Please install the “bp-default” parent theme.
    Simple WP Community Theme The parent theme is missing. Please install the “bp-default” parent theme.

    1. Tom Ewer

      Author

      Hello,

      I’m not sure I understand the problem but it sounds like you are referring to parent themes that don’t exist from within your child themes.

      Cheers,

      Tom

    2. JIll

      Sounds like you’re missing the import funciton in your child theme..

      IE:
      @import url(“http://innov8designworks.com/wp-content/themes/twentyeleven/style.css”);

  97. Sotexis

    Lisa Sabin-Wilson have add to her newest “WordPress for Dummies” a downloadable katern about multisites and networks.

    You can download it on http://www.dummies.com/go/wordpressfd5e This PDF is downladable without inlog but for the realy interesting parts you must buy her book to find the inlog codes for that section.

  98. jay

    Hi Tom

    Thanks for the post.

    This is the text in the style.css file I created….

    /*
    Theme Name: My Child Theme
    Theme URI: (Administrator edit: link removed)
    Description: This is a custom child theme I have created.
    Author: Innov8 Designworks
    Author URI: (Administrator edit: link removed)
    Template: twentyeleven
    Version: 0.1
    */
    @import url(“(Administrator edit: link removed)/wp-content/themes/twentyeleven/style.css”);

    It doesn’t work. The images disappear and the site is just a bunch of links. Any help would be great.

    Jay

    1. Tom Ewer

      Author

      Hi Jay,

      Everything looks in order…try this line instead:

      @import url(“../twentyeleven/style.css”);

      Cheers,

      Tom

  99. Diana

    I followed everything on here exactly. I created a child theme folder, I created a style.css that I put in it with the following code:

    /*
    Theme Name: Lugada Child Child
    Description: Child theme for the Lugada theme
    Author: Diana Rendina
    Template: Lugada
    Version: 0.1.0
    */
    @import url(“(Administrator edit: link removed)/wp-content/themes/lugada/style.css”);

    I saw the theme in my theme listing and activated it, and now my site looks like it disappeared. I can see my url and my favicon – but nothing else shows up – the page is completely blank. What did I do wrong?

    1. Tom Ewer

      Author

      Hi Diana,

      There’s a typo in your @import URL (an extra “h”).

      Cheers,

      Tom

      1. Donna

        Also, your template reference in your child theme’s style.css comment line is capitalized…but in the folder path, it is not. That template that is called should match the parent theme’s folder name “EXACTLY” …so if the folder is not capitalized, then reference it under child theme/style.css …Template: lugada; …otherwise it won’t find the rest of the files in the parent theme
        (I believe…but I’m new at this also. That’s the way I interpreted it though…)

        I’m having a problem with mine…my child theme is activated, and I have triple and quaduple-checked EVERYTHING …but my child theme puts the header on the right instead of the lh side of the page. I’ve done the @impurt url for not only the style.css, but also the rtl.css and the editor css files in the parent theme…but I’m still missing something. Good luck with yours.

  100. JIll

    Hi, Tom

    Like others, I’m having issues with the reference URL. This is the diretory that the style.css is stored in —

    public_html/wp-content/themes/widezine package/widezine

    — however, when I reference @import url(“../widezine/style.css”);

    I still get the parent theme missing message in WP.

    Would the fact that the dark version of the theme is active cause problems? It is located at the below link:

    /public_html/wp-content/themes/widezine package/widezine/lib/css/style_dark.css

    1. JIll

      I also noticed that this text is greyed out, as if it has been commented. Should that occur?

      1. JIll

        And by this text, I mean, the reference URL.

    2. Tom Ewer

      Author

      Hi Jill,

      You need to enter the whole URL for the stylesheet (i.e. http://yoursite.com/wp-content/themes/widezine/style.css).

      Cheers,

      Tom

  101. Mike

    Hi Tom,

    I tried to follow your instructions to a “T” but I must have missed something. I’m getting an error that says,the child theme is installed but it is incomplete because the “Stylesheet is missing.” Do you have any idea what I need to do to fix this issue?

    1. Tom Ewer

      Author

      Yes: create a stylesheet (i.e. the style.css file) 🙂

      Are you sure you’ve followed the instructions exactly?

      1. Mike

        I tried! I think I may have to change the name of the stylesheet. My default stylesheet must not be named “style.css.”

        But, how do I find out what the name of the default stylesheet is?

        And yes, I’m very much a novice! 🙂

        1. Tom Ewer

          Author

          The stylesheet in your child theme should be “style.css”. It should link to your parent theme’s “style.css” file as above.

          1. Mike

            Ok. But you said in your post that “If the default stylesheet is not style.css (it almost certainly will be), you will also need to change that to suit as well.”

            So, how do I know if my default stylesheet in my parent theme is “style.css?”

          2. Tom Ewer

            Author

            It’s 99% likely that it should be. You can check by looking in your parent theme’s directory (https://s42013.pcdn.co/wp-content/themes/parenttheme/) and locating the .css file.

            Cheers,

            Tom

  102. Hans

    What to do with child themes in a multisite install where I use the parent theme in several sub sites, but all subpages have different functionalities and subpage names, http://www.domain.com and http://www.domain.com/sub-a or /sub-b or /sub-…

    1. Tom Ewer

      Author

      Not sure I’m afraid Hans…

  103. Sue

    I have 2 dumb questions my theme has 3 styles folders style.ie7
    and style.ie6 do all three of these need to go into child folder
    and can I just copy the style folder and make changes or am I suppose to only have the 9 lines of code you have listed above?

    1. Tom Ewer

      Author

      Hi Sue,

      I don’t fully understand your question but you should include all style files in your parent theme as per the above instructions. You shouldn’t copy and paste anything.

      Cheers,

      Tom

  104. Kyle D

    I followed the directions exactly but when i go to the website there is no styling on the page at all. There is only text on the page. Ive checked that the css file has the correct code referencing the parent theme im using. Here is the code. What could be wrong?

    /*
    Theme Name: Expression Child
    Description: Child theme for the Expression theme
    Author: Kyle D
    Template: expression
    Version: 0.1.0
    */
    @import url(“../expression/style.css”);

    1. Tom Ewer

      Author

      Try using an absolute URL for your .css file (i.e. http://www.yoursite.com/wp-content/themes/parent-theme/style.css).

      1. Kyle D

        Ahhh got it! It was foldered wrong. The css file was correct. One other question. Now that i have it installed correctly…when i make changed to the theme color in the dashboard it doesnt change it on the actual site. can i still use the dashboard to make changes to the color and style?

        1. Kyle D

          Correction, it did work…just had to clear my cache. Thanks for your help!

  105. M R khan

    It was really helpful.Thank you.Now concept of child theme is clear to me.

  106. Tom Jamieson

    When I created only the style.css file into my child theme folder, I lost my headers, sidebars, and formatting. So as a precaution I went ahead and copied all of my theme files into the child theme folder, except the style.css. All of my formatting, etc. returned upon activation of my child theme, except my header image was gone and now I can’t get it back. Any suggestions?

    1. Tom Ewer

      Author

      Hi Tom,

      That all sounds very odd. Did you import the parent theme’s stylesheet(s) into the child theme’s stylesheet as per the instructions? If you followed the instructions to the letter there should be no problems.

      Cheers,

      Tom

  107. Lady M

    I tried this (using the zenon-lite theme) and it caused every page on my site to display a functions error. It happened right after I activated the child theme. I tried to get access back by deleting the child theme file but couldn’t. So I had to remove wordpress from my host just to get my site back up. Very frustrating.

    I’ve decided to try a simpler way and just save a copy of my style.css file in a doc. When upgrades come up, I’ll just copy/paste it back in.

    Glad it worked for everyone else.

  108. Ron

    Hi Tom,

    Great tutorial. This article is #2 on Google for “make a child theme.” I won’t ever have to learn how to make a child theme because I can always just come back to this article :).

  109. Corey

    Thank you so much for taking the time to write this guide up! It’s been extremely helpful for my constant forgetfulness! 😀

    1. Tom Ewer

      Author

      My pleasure Corey!

  110. Erika

    Therefore, you need to call the parent theme’s CSS file within your child theme’s style.css file, with the following line of code:

    @import url(“../parenttheme/style.css”);

    Sorry, dumb question, but I cannot figure out where to put that import line of code. Does it belong in the same file as the other 8 lines of text? If so, where does it go? I tried putting it above the theme name, below the version, and after the template line. In every case, the formatting didn’t carry over when I activated the child theme.

    I’m totally new to coding and your tutorial has been so helpful–I just can’t figure out this one thing!

    1. Tom Ewer

      Author

      Hey Erika,

      Just put it directly below the text that’s contained within /* */ 🙂

      Cheers,

      Tom

  111. Max Steinman

    Thanks so much for this post Tom. To build upon and marlita’s question. While I know I/we don’t need to bring over any of the parent theme’s CSS, I’m wondering which theme is being changed when I go into my child theme and use some of the customization available within the dashboard such as Title, Colors, etc.

    I guess I’m just not clear on the point of creating the child theme if it’s pulling from the parent theme but then adding new code into the child theme. Maybe I’m not clear on how the two interface.

    Also one other question. I’ve read elsewhere that when creating a new .php file, say to create a blank page template that you’re supposed to put in the parent template not the child. Which is true?

    1. Max Steinman

      Also now that I just checked, it doesn’t seem to be bringing over the CSS styling from the parent theme.

      1. Tom Ewer

        Author

        Hi Max,

        To be honet I don’t know the answer to your question. I think that most people creating child themes would not resort to using the theme customizer — they would code the changes with CSS (so as to have more control).

        The point of a child theme is to build upon an existing theme without affecting its files. I’m not sure if that’s what you were asking though…

        I’m not sure why you wouldn’t put a new PHP file in the child theme. Having some new features in the child theme and others in the parent theme seems to be asking for trouble.

        Cheers,

        Tom

  112. Tom Jamieson

    Hey, thanks for making this so simple! This will be very helpful for me since I make changes to my theme and have lost those changes before.

    1. Tom Ewer

      Author

      My pleasure 🙂

  113. Cody Burleson

    Thanks for laying this out so quick and simple. I only wanted to update my CSS in a non-destructive manner – perhaps evolving PHP pages someday also in the future. This got me in business fast!

    1. Tom Ewer

      Author

      No problem 🙂

  114. Paul

    Hi Tom,

    I read this with lots of interest as I have an existing WP Blog and have decided to start a new one from scratch. I have bought a premium responsive theme and gone through these steps. The child theme appeared and activated fine but I couldn’t then use the theme’s special edit sections within my admin panel – they just generate an error message. Do you think there may be other files that should be copies across to the child theme? I notice functions.php for example is quite a large file?

  115. surya

    thanks a ton TOM! u deserve a beer! Man! ist very easy the way u stated it

  116. Leo

    Tom,

    when you’ve already imported the parent theme css, you can only add certain id or class so it override.

    Sometimes I found certain framework theme has unnecessary css like button colors or certain css for use in shortcode, how do you remove them in order to save few bytes?

    Also, when parent theme use base and several css, how do you import them into child theme?

    1. Tom Ewer

      Author

      Hi Leo,

      I really wouldn’t worry about removing excess CSS to be honest — it’s not going to make the kind of difference that anyone would notice. Like you say, it’s literally just a few bytes — i.e. a few milliseconds (if that).

      I’m not sure what you mean by your second question I’m afraid.

      Cheers,

      Tom

  117. Liz

    I have an established blog and would like to know how to migrate that a child’s theme. Any suggestions.

  118. tbonix

    Hey there Tom;
    I am having some trouble with the CSS Variable

    @import url(“../parenttheme/style.css”);

    What file do I place the Code into?

  119. Tony

    Hey Tom;
    What file to I place the code for the Style sheet in?

    @import url(“../parenttheme/style.css”);

    I checked Header and I see: <link rel="stylesheet" type="text/css" media="all" href="” />

    Thanks man!

  120. Carlos

    I wish I did a little more research on creating child themes before I built my website. It’s about 3 years old and has a lot of pages on it.

    I am getting tired of having to redo all of my customizations after I update. I haven’t updated to the current version of wordpress because of this. Is there a way to create a child theme on a website that currently has about 40 pages on it?

  121. Bradley Anderson

    That was a lot easier than what I thought it would be. No more updating my custom codes after WP updates! Yes! Thank you, Tom.

    1. Tom Ewer

      Author

      No problem Bradley 🙂

  122. Andrew

    Thanks for the post, I thought it’s much more complicated. I never worked with child themes before, but now I’m definitely going to experiment with them…

    1. Tom Ewer

      Author

      It’s definitely worth it!

  123. Nick Nasty

    Tom,

    Very nice article. I started giving the link to clients who ask about child theme creation. The one thing you should clarify, is whether to place the parent theme files *that you modify* in the child theme and (a) drop them at the root; or (b) create a similar directory structure in the child theme to match the location of the file you moved from the parent.

    (damn that sounds convoluted)

    Just mention that ‘some-template-file.php’ taken from ‘parent-theme/includes/external/php/some-template-file.php should be dropped in /child-theme/includes/external/php/some-template-file.php and not in the root child-theme folder. The folder structures of substituted files should match. Oh those the words I was looking for, finally squeezed them out.

    Have fun!

    Nick

    1. Tom Ewer

      Author

      Hi Nick,

      You’re absolutely right — thanks for the heads up. I’ve edited the article.

      Cheers!

      Tom

  124. Molly!

    I’d like to make a business of creating custom child themes for clients. However, I don’t expect to always get FTP access to my client’s websites. Is there a way to create child themes from within WordPress backend, or is having FTP access to manually create folders and files required?

    1. Tom Ewer

      Author

      Hey Molly!

      The only thing I could think of as a viable alternative is access using the File Manager in their hosting account. But to be honest, any client should be willing to grant access to their site via FTP though…

      Cheers,

      Tom

  125. Tim

    The concept itself is a big help for me. I’ve been a theme developer for over 2 years. Never thought of “child theme”. This saves me lots of time.

  126. marlita

    Hello. Thank you for this post. It was so simple. I have one question. In the child theme css file, all we put is the @import url….

    Do we need to copy and paste all the parent them css into the child theme css, or do we just add changes into the childtheme css from that point forward?

    Thank you

    1. Tom Ewer

      Author

      Hey Marlita,

      You don’t need to add any of the parent theme CSS into the child theme’s CSS file — that is what the import function does.

      However, if you are editing CSS that is in the parent theme’s CSS file, it is best practice to copy and paste the relevant code block from the original file into the child theme file, then edit it accordingly.

      Cheers!

      Tom

Leave a Reply

Your email address will not be published. Required fields are marked *

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!

Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!