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.
Update: WordPress has recently updated their recommended method for creating a child theme since this tutorial was published. The old method will still work, but is not considered the best option. Here is the official explanation from WordPress:
Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load.
Again, the old method will still work but the new method only requires one extra step. For future compatibility, I would recommend using the new method:
New Method
Open the child theme folder and create a new file: “style.css”. Open this file and add the following lines:
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Yourtheme-child Theme URI: http://www.elegantthemes.com/gallery/yourtheme/ Description: Child theme for the Yourtheme theme Author: Your Name Author URI: http://www.elegantthemes.com Template: Yourtheme Version: 1.0.0 */ |
Go through these lines and replace “Yourtheme”, “Yourtheme-child”, and “Your Name” appropriately (if using Divi, just copy the text below – 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 line is the Template line. 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 this line as well.
If you’re using the Divi theme, you can paste this exact code below:
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Divi-child Theme URI: http://www.elegantthemes.com/gallery/divi/ Description: Child theme for the Divi theme Author: Elegant Themes Author URI: http://www.elegantthemes.com Template: Divi Version: 1.0.0 */ |
After saving the file above. Create another file in the child theme folder: “functions.php”. Open this file and add the following lines, replacing “divi” with the name of your theme if not Divi:
1 2 3 4 5 6 7 |
<?php function my_theme_enqueue_styles() { wp_enqueue_style( 'divi-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'divi-style' ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?> |
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.
I have noticed since using the new method, sometimes I have to update the version of the child theme in the style.css file every time I make a CSS change before those changes show up on the site. If you make a change and don’t see any change on the site, try incrementally increasing your child theme’s version number 1 digit at a time like this:
1 |
Version: 1.0.1 |
Keep in mind if you have any kind of caching on your site, it may prevent or cause long delays in any changes to your child theme from showing up. Any of these culprits may be serving a cached version of your website and prevent immediate changes: caching plugins, managed host caching, server caching, CDNs. It’s always a good idea to disable these while developing or making changes to your site so you can see your changes as you make them.
Old Method
Open the child theme folder and create a new file: “style.css”. Open this file and add the following lines:
1 2 3 4 5 6 7 8 9 10 |
@import url("../Yourtheme/style.css"); /* Theme Name: Yourtheme-child Theme URI: http://www.elegantthemes.com/gallery/yourtheme/ Description: Child theme for the Yourtheme theme Author: Your Name Author URI: http://www.elegantthemes.com Template: Yourtheme Version: 1.0.0 */ |
If you’re using the Divi theme, you can paste this exact code below:
1 2 3 4 5 6 7 8 9 10 |
@import url("../Divi/style.css"); /* Theme Name: Divi-child Theme URI: http://www.elegantthemes.com/gallery/divi/ Description: Child theme for the Divi theme Author: Elegant Themes Author URI: http://www.elegantthemes.com Template: Divi Version: 1.0.0 */ |
style.css
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.
functions.php
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:
<?php
// 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.
35 Comments
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.
Natallie
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
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;}
January 26, 2015
Ops! You’re right: the import is required.
Maybe the parent css file was cached when I tried.
Thank you.
January 27, 2015
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?
Thanks.
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: http://winmerge.org/
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.
March 23, 2015
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.
April 19, 2015
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.
Tony
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.
April 20, 2015
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
http://divi4u.com/divi-children-plugin/
hope it helps 🙂
May 4, 2015
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.
Thanks!
November 5, 2015
Hi Nicholas. Did you activate the child theme? Until the child theme is the active theme, it will not override anything.
November 6, 2015
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
Modules require a lot more effort to overwrite:
http://www.eleganttweaks.com/divi/change-replace-modules/
May 19, 2016
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!
Thanks
Ella
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
May 19, 2016
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.
June 21, 2016
Brad, thank you for sharing your knowledge. Just curious, WordPress has been saying for a while now that child themes should pull(enqueue) from the parent theme via the Functions.php versus the Style.css
(Per WP: Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. Source: https://codex.wordpress.org/Child_Themes).
So, i’m interested in your input. Is there an advantage to sticking with the “old” child theme set-up with DIVI? Should we indeed go with the new way? Or is there no particular advantage to doing it one way versus the other?
The reason I ask, Is EVERY child theme tutorial I read specific to DIVI always refers to the way that WP states as: “this is no longer best practice”
Your thoughts?
July 26, 2016
Thanks Dean. I’ve updated the tutorial to match the recommended new method. You should definitely use the new method. It’s not critical and the old method will still work, but if the people developing WordPress are telling you to move away from the old method, it’s probably a good idea as the old method may not be supported in the future. Besides that, the new method loads faster.
You’re probably seeing that EVERY child theme tutorial is referencing the old method simply b/c people like me are lazy and have not updated their tutorials 🙂 Thanks for the nudge. I needed it!
November 19, 2016
Thank you for this article,this is exactly i am looking for.
October 30, 2016
Thank you for the detailed explanation of the new method of creating a child theme from an Elegant Theme Template.
I am unclear if we remove the @import line on the style sheet
my extra-child CSS style sheet:
/*
Theme Name: Extra-child Theme
Theme URI: https://www.elegantthemes.com/gallery/extra-child/
Description: Child Theme for the Extra theme
Author: my name here
Author URI: https://www.elegantthemes.com
Template: Extra
Version: 1.0.0
Template and @import sections identifies the parent theme imports the CSS from the original
*/
@import url(“../Extra/style.css”); (DO WE DELETE THIS LINE?)
Here is my functions.php:
get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘extra_enqueue_styles’ );
?>
December 31, 2016
Hi Patricia. Yes, with the new method you want to remove the @import line. This is the old method and created a small delay as opposed to importing the parent styles using the functions.php method.
March 20, 2017
Hi Brad,
I didn’t have any luck overriding Divi style.css with your code above, but I modified it as below to load the child-theme CSS after the Divi parent theme CSS (hope this code with paste here):
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
Some of your readers were looking for a copy-paste method, so if they followed your Divi child theme instructions then this should work.
January 3, 2017
Hi Kevin,
I was indeed trying to copy paste it without any success. Thanks a lot for your help!
Works like a charm now.
March 9, 2017
This one works. Thanks!
May 31, 2018
Hmm I’m trying to override main-modules.php and portfolio-single.php — i maintained same file paths but it does not override. Am I missing something?
March 23, 2017
Hello
Thank you very much for this tutorial, it got me set up ready with a child theme in minutes. Very well explained!!
Keep up the great work!!
Dee Masuku
April 13, 2017
Hi,
Thanks for the tutorial, not sure what is different on my side, I’m trying to create a child theme for an Evolution template. I’m using Cyberduck on a (Sierra) mac, when I create the Folder before doing anything else the folder is completely populated with what I believe are the contents of the main theme.
Any suggestions on what to do to stop this happening?
April 19, 2017
Pls ignore my eaelier post, i tried creating the child theme folder via my hosts website directly and didn’t have the problem re-occur.
Thanks
April 20, 2017
Thanks – updating the version in style.css is a technique that was new to me and has saved me a ton of time and frustration when trying to get new styles to appear.
April 25, 2017
I’ve determined that it is the functions.php code you give above that throws my UpdraftPlus warning:
“”Warning: Your WordPress installation has a problem with outputting extra whitespace. This can corrupt backups that you download from here. Please consult this FAQ for help on what to do about it.””
When I deactivate the child theme and just use the parent theme, the warning goes away.
I copied the raw code exactly with no typos anywhere.
October 10, 2017
Hey Elegant Tweaks, thanks for posting the update to the recommended best practices for creating child themes. I am certain other will also find this post really useful. Our team sure did!
December 18, 2017