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:

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:

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:

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:

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:

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

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.