Creating a child theme

When making changes to any WordPress theme, there are two methods that will get you the same results. However, one method is preferred and could save you a lot of time and headache down the road. First the improper method:

Editing files within the theme folder

There are times when this is inevitable and we’ll show you what to do in those cases. But in general you should not edit any files within your theme folder. The reason for this is that it creates problems if and when you install an update to your theme. If any files you have edited are updated in the theme update, your changes will be overwritten and permanently lost. The proper method is to create a “child theme” folder and make your edits within that folder. It’s easy and we’ll show you how to do it.

Creating a child theme

Before we begin, the rest of this article assumes you have WordPress installed on a home or remote server, Elegant Themes (or other theme) installed in WordPress, and that you are familiar with editing PHP and CSS files in a text editor or using the built in WordPress Editor. It is highly recommended that you follow the steps below and for all tweaks on this site on a test installation of WordPress on your home computer. You should not “practice on” or “tweak” on a live WordPress site, especially if you already have traffic coming to it. It is much easier, safer, and less time consuming to make changes on a home computer and upload changes to your website once you know for sure everything works.

Locate your WordPress folder on your home or remote server. Your theme folder should be located in /wp-content/themes/. Create a new folder in the /themes/ folder and name it “Yourtheme-child”. For example, if your theme is called “Nova”, the folder you will create will be called “Nova-child”. You should now have within your /themes/ folder the default WordPress themes (probably twentytwelve and twentythirteen), your current theme, and the theme we just created.

Open the child theme folder and create a new file: “style.css”. Open this file and add the following lines:


If you’re using the Divi theme, you can paste this exact code below:


Go through these lines and replace “Yourtheme”, “Yourtheme-child”, and “Your Name” appropriately (if using Divi, just copy the text above – no need to replace anything). Continuing our example from above with the nova theme: “Yourtheme” would be “Nova”; “Yourtheme-child” would be “Nova-child” and “Your Name” would be your first and last name. The only critical lines are the @import and Template line. The import url needs to be the location of your original theme and the Template is the name of your original theme. These are CASE SENSITIVE. If your original theme is Nova with a capital “N”, make sure the “N” is capital on these lines as well.

Almost done. Before any edits we make in our child theme to take effect, it must first be activated. Save the new style.css file we created in your child theme folder in the steps above. Log into your WordPress dashboard and go to Appearance->Themes. You should see that your current theme is activated but below that you should now see the option to activate the child theme we just created. Click Activate. Your child theme is now active and ready to go. Now let’s make a change.

Open the style.css file we created in your /themes/Yourtheme-child/ folder and add this line to the bottom:

body {background-color: black;}

Save the file and refresh the homepage of your site. If the background has changed to black, everything is set up correctly. Obviously if your background was already black, change it to another color. Most but not all themes use the body background color so you might not see a change. If not, try changing something else like header background color.


The style.css file is unique in a child theme in that it is able to reference your theme’s original style.css file and either add new styles that have not been set or overwrite styles that have already been set in the original style sheet. The child style sheet acts as a “in addition to” file but also as a “in place of” file for any styles that you want to overwrite. If you do not overwrite a style already set in the original theme’s style sheet, that style will still be carried over from your theme’s original style sheet and applied to your pages.


The functions.php file is similar in that it acts as a “in addition to” file but will not overwrite existing functions.  If you want to add a function to your theme, create an empty functions.php file in your child theme folder and add the new function or functions. If the function already exists in the original functions.php file, you will get an error that the function cannot be redeclared. You can change this behavior by adding a conditional statement to the original functions.php file in the parent theme folder:

if ( ! function_exists(‘example_function’)){
function example_function() {
//do something

*Update: Divi now has most of its functions already wrapped in an if statement. For most functions, you should be able to simply add the function to your child theme as described below and it will automatically supersede the parent function. If you’re looking to overwrite a divi module, check out this tweak for a full tutorial.

In this example, you would find the function you want to change the behavior of, example_function, and surround it with a conditional if statement. Now you can add the function to your child theme functions.php file and change what the function does. Since the child functions.php file is loaded first, the if statement will see that and ignore the function in the original function.php file. You could also simply delete the original function but it’s a good idea to keep the original in case you want to revert back to it. Keep in mind that if your theme is updated, you might have to go back through and add the conditional if statements to any functions that are duplicated in your child theme. Don’t forget to surround your functions with PHP tags in your child themes function.php file:


// new function code


Other files and subfolders

Every other file you place in your child theme folder will act as a “in place of” file, overwriting the entire contents of the original file. For example, if you place an empty file in your child theme folder called page-full.php, WordPress will not look for the original page-full.php file in your theme’s folder. It will assume this is the correct file even though it’s empty and your site will break. For this reason, when you edit any files from your theme other than the style.css file, you will want to copy the original file from your theme folder to your child theme folder. You will then make edits to this file.

If the file you wish to edit is located within a sub folder like includes, you will need to maintain the folder structure. So if your original theme contains a file /themes/nova/includes/header.php, you would need to place your new header.php file within a folder called includes in your child theme. The end result would look like this /themes/nova-child/includes/header.php.

* Not all themes function the same. At the very least, every theme should allow you to create a child theme and also allow you to use a style.css file to overwrite and add new CSS code. You may have to add !important at the end of some of your CSS styles if they don’t seem to be working. You may also not be able to overwrite certain files, especially if they are in subfolders. The default theme may reference other files in a way that makes this nearly impossible or more trouble than it’s worth to overwrite. In these cases, you’ll just have to edit the original files within the parent theme. Make sure you back up these files in case they are overwritten and keep notes on what lines of code have been edited so you can quickly fix them in case they are overwritten.


  1. Hi there,

    I followed the steps above and reached the point where I activated my child theme. After activating I went to my home page where the layout had been lost – images were huge etc. So I reactivated my standard theme.

    I am using Divi.

    Thanks for your help.



    January 26, 2015

    • Hi Natallie. I just tried copy and pasting the code and for some reason the quotation marks in the first line are incorrectly encoded. Try deleting and replacing those in this line:
      @import url(“../Divi/style.css”);
      Let me know if that solves your problem. It worked on my end so if not, something may be filled out incorrectly on your end. Sorry for the troubles.

      * I have fixed the problem for anyone else reading so copy and paste away


      January 26, 2015

  2. I create a new style.css in child theme *without* importing parent style.css file.
    It works. Is that import still required?

    I’m using Divi.


    January 26, 2015

    • If the child theme style.css file does not have any styles and does not have the parent theme import line, your website should not have any CSS applied to it and should look very wrong. Did you remember to activate the child theme? Insert the following into your child theme style.css file. Most if not all of your website should disappear. If it doesn’t, it is not active:

      body, article, head { display: none;}

      Brad (admin)

      January 26, 2015

  3. Ops! You’re right: the import is required.
    Maybe the parent css file was cached when I tried.
    Thank you.


    January 27, 2015

  4. If I am trying to implement a child theme after the fact because I don’t want to lose my customizations, how does that differ from the instructions you give in your post? Would I copy the Style.css of the parent them into the child theme and also the functions.php of the parent them into the functions.php file in the child theme?



    March 19, 2015

    • Hi Michele. It depends on where you made your previous customizations. If made in the parent style.css file, you would have to find the changes you made and add just those changes to the child style.css file. You would NOT want to copy everything over b/c there are just too many styles. If you have the original style.css file for your version of Divi, you could use a program called Winmerge to compare the two files and find your changes:

      If made in the CSS section of the Epanel, you can simply cut and paste your changes from there to the child theme. You cannot duplicate the functions.php file in your child theme b/c it will cause errors. If you’ve made changes to this file, you’ll just have to make those changes again every time you update Divi.

      Brad (admin)

      March 23, 2015

  5. Hi Brad, everything went well and I was very pleased with myself ( since I am a designer and no a developer I am not really good at these things ;-)). But, my website is displayig like Natallie above: totally wrong with everything too large and just wrong. I have activated my child. Divi231 is there also. I have made some css changes to the parent. I don’t know how to get things right and after I do, no idea how to implement the changed css from parent to my child.


    April 14, 2015

    • Hi Tanja. Sorry you are having such trouble. I’ve updated the tutorial to include the EXACT text you would copy and paste for the Divi theme. As far as copying the changes you’ve made from the parent theme’s style.css file, there is no easy way. If you read the comments above (Michele), you’ll see the easiest method I can think of for finding the styles you’ve changed. You’ll have to get the original style.css file from the zipped Divi file, and then compare it to the file you currently are using on your site using Winmerge. Any lines that are not identical will be highlighted in yellow. And you’ll just have to compare and see what you changed in each line and add to your child theme. I know it doesn’t sound fun, but it’s the easiest way I can think of. In the future, obviously just make sure you install the child theme first thing and work off of those changes.

      Brad (admin)

      April 19, 2015

  6. Hi Brad,
    I’m new to things so please forgive me. I started using the divi theme and made a couple of minor changes to the css.styles file and a couple of tweaks to the app ( I know, shouldn’t have).

    Then I become aware of child themes. So, created a child theme using the plugin and now working on that.

    Do I need to copy the php and css files from the divi folder or is it ok to click on the ‘ this child theme is using Divi’ (underlined) which, when clicked, all the files appear. Is this safe to edit and part of the child theme? And so not affect the Divi files?

    Also, should I re download divi to revert to the original settings? If so, will this affect the amended child theme if I didnt copy the original Divi files I used?

    Sorry for all the questions, but as I say, a novice.

    Thanks for any help.



    April 19, 2015

    • Hey Tony. I’ve never used a plugin to create a child theme so I’m not exactly sure what you’re talking about. If you used a plugin, I would ask the plugin developer what the appropriate actions would be to take. If you create your own child theme using the steps I outlined above, you would NOT want to simply copy the entire style.css file over. Follow the steps above and add only the changes you want to make. They will overwrite the styles from the original style.css file. If you edit a page template, you would want to copy the entire file.

      Brad (admin)

      April 20, 2015

  7. Hi everyone
    Just reading through the comments of this post, I know this works to create the initial divi child theme. The plugin called is divi-children and free to download from

    hope it helps 🙂


    May 4, 2015

  8. Styles in my child theme are not overwriting the parent Divi theme. I even put the !important hack inside. Not sure whats up. Any tips would help.



    November 5, 2015

    • Hi Nicholas. Did you activate the child theme? Until the child theme is the active theme, it will not override anything.

      Brad (admin)

      November 6, 2015

  9. hey i am using a divi theme i created a child theme called divi-child everything works perfectly except that if i wanted to override a fie in a subfolder it doesnt work for example
    i want to edif /includes/builder/main-modules.php i created the same path and a file with the same name but nothing happens the file is not overriding the original one in the parent’s theme any help ?
    Thank you,


    January 28, 2016

  10. Hi

    I’m new to child themes.

    I’ve created one and now populating it with my parent theme modifications is really scary!

    Do I copy the entire php and css files over or just the parts I have modified and how do I tell the child theme what they are and where they came from. I need to update Divi theme and wordpress but really scared i’m going to loose everything!

    help please!



    Ella Wood

    May 17, 2016

    • Hi Ella. Child themes are supposed to take the “scary” out of modifying your theme 🙂 You don’t need to copy any files. Just create the child theme folder add the style.css file with the information above, and start adding your own styles. The only time you want to copy a php file from the parent theme over is if you want to overwrite a template file or make changes to the header or footer. For example, to change the footer text you would copy the entire footer.php file over to your child theme folder and make your changes. If you make a mistake, you can always copy the original file back to the file in your child theme. The only risk is if you edit the actual php code and make a mistake. You could lock yourself out of the WordPress editor and have to fix it using FTP or Cpanel. Otherwise, you have nothing to worry about changing the style.css file

      Brad (admin)

      May 19, 2016

  11. I’m creating child themes for my clients on my production server when I send them to my clients the say they are not getting what I showed them in the demo no images the layout is different how can I fix this I also include the divi parent theme with the image folder with direct links to the images


    June 12, 2016

    • Make sure your clients are activating the child themes. If that’s not the issue, make sure you delete any caches stored by caching plugins.

      Brad (admin)

      June 21, 2016

Post a Reply

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