How To Create A Child Theme In WordPress

How To Create A Child Theme In WordPress

There are several reasons why one would want to create a child theme in WordPress. The main reason for most would be that you want to make some small changes but don’t want them overwritten if and when there is an update to your theme. This reason alone should have you following these very simple steps. Who wants to go back and repeat work every time a new update comes out?

Listed below is a step by step instruction on how to get a child theme set up so you can make CSS changes that will persist after an update.

What you will need

  1. You will need access to your WordPress Installation. Most people will be hosting their installations with a hosting provider, and these instructions are for them. This will include the connection information: the host, the username, and the password.
  2. FTP Software. I use Filezilla. It’s free, and it works, and it’s reliable. If you’re clicking on the link to download, you want to select the CLIENT, you do not require the SERVER.
  3. You will need a HTML / Text Editor of some sort. You don’t require anything fancy, notepad will do.
  4. Fearlessness. If you have never worked with code, you will see some. Don’t worry, it’ll be ok.

 

Step 1

Using your FTP software, make a connection to your WordPress installation. You may go right into the wordpress installation or you may be outside of it, depending on your hosting provider. What you are looking for is the following directory structure:

child-theme-step-1

 

Step 2

Open the wp-content directory. You will see the themes directory, open that one up as well. Inside the themes directory are all your installed themes.

child-theme-step-2

 

Step 3

Identify the theme you want to make a child of and create a directory in the themes directory with the exact name but add “-child” to it. In the picture above you can see that I created a child theme of “wpex-pronto“. I did this by adding a new directory in themes named “wpex-pronto-child“.

 

Step 4

Next, we need to create a new stylesheet in our new child theme folder. Using whichever program you are using, create a new document and name it “style.css“. We need to add a few comments this file as well as one line of code to bring in the existing style of the parent theme.

child-theme-step-4

 

Here is a quick explanation of these lines of code:

  1. Theme Name: This is the name of your child theme. You should name it with the word “child” in there somewhere to keep it straight from your other theme installations.
  2. Theme URI: This is the URL that you’re working with.
  3. Description: Just add a brief description.
  4. Author: Your name
  5. Author URI: Put the same URL
  6. Template: This needs to be named the same as the directory that you first set up. It should be the same name as the parent with ‘-child‘ added to the end.
  7. Version: Just give it a version number, no big deal

The last line in the image is where you will be importing the existing style into your new child theme. You should type this exactly the same but instead of ‘wpex-pronto’ you should put in your parent directory name.

Here is another example if I was working on a child theme for twentyfifteen:

@import url('../twentyfifteen/style.scc');

That’s it. Save your file and upload it into the folder you just created in the last step.

 

Step 5

Now, if you go back to your WordPress backend and look under Appearance | Themes you will see your new child theme. When you activate it, everything will be the same but now you are free to edit the style.css file in your child theme directory and your changes will not be overwritten when you update the theme.

child-theme-step-5

 

This is the first few steps to really customizing your WordPress theme. You can also create new templates from existing templates, have pages function differently, etc. I urge you to go to Youtube and watch some videos on child themes, you will be surprised on how easy it is to really change the look and feel of your WordPress theme.