If you’re serious about maintaining a WordPress blog, then it’s essential that you know how to create a child theme and use one yourself. A child theme is merely an extension of an existing theme that you can modify safely. Why not modify the parent directly? Because theme developers release updates of their software regularly, which replaces all the files and folders. So any changes you make to say, the CSS of a theme will be overwritten as soon as the theme is updated.
To recap, you need a child theme because:
- You can make changes safely
- You won’t interfere with the intended functioning of the parent
If you don’t make any changes to a child theme and leave it “as is”, it will simply look exactly like the parent them. In this tutorial, I’ll show you how to create the child theme and install it on WordPress.
Step 1: What’s the Folder Name of your Parent Theme?
If you have FTP access to your WordPress installation, you can simply go to the following folder:
Here, you can get the name of the folder containing your existing them.
But what if you don’t have FTP access to the backend folders? In that case, refer to my previous tutorial on how to get the theme folder without FTP access. In my case, the name of the folder is “write” as shown here:
So now we’re going to create a child theme of using “write” as the parent.
Step 2: Create a New Folder on the Desktop with a “style.css” File
On your desktop, create a new folder with a name like “[parent-theme]-child“. Since my folder name as seen in Step 1 is “write”, I name my new folder “write-child”. Inside that folder, create a file and name it “style.css” as shown here:
Note: Make sure you change the extension of the file name. It should be “style.css” and not “style.css.txt”!
Step 3: Import the Parent Theme into style.css
Open the empty style.css file that you created in Step 2. Now paste the following into it:
@import url("../[parentfoldername]/style.css"); /* Theme Name: [Child Theme Name] Template: [parentfodlername] */
There are two things you need to customize. Replace “[parentfodlername]” with the name of the theme folder you got in Step 1. And replace [Child Theme Name] with whatever name you want for the child theme. I personally just use the parent theme’s name followed by the words “Child Theme”. So my code looks like this:
@import url("../write/style.css"); /* Theme Name: Write Child Theme Template: write */
Now save style.css and we’re done. This is our child theme.
Step 4: Create a Compressed Zip File of the Folder
Now we need to compress the folder with the style.css inside it into a zip folder. To do this, simply right-click on the folder, go to “Send to -> Compressed (zipped) folder” as shown here:
This will create a compressed file with our folder inside it.
Step 5: Uploading the Child Theme to WordPress
Now go to the WordPress dashboard and click “Appearance->Themes”. Then click the “Add New” button at the top:
The next screen will allow us to upload a file manually. Click “Upload Theme” as shown below:
Now use the “Choose File” button to select the zipped folder we created in step 4 and click “Install Now”.
This will begin the installation process of the child theme. If all goes well, you should get a message like this:
As you can see, WordPress recognizes that we’re installing a child theme and verifies that the parent theme is already installed (not necessarily active). To activate the child theme, click “Activate” and you’re done.
You have successfully created a child theme using a parent theme as a template!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
I’m trying to make a child theme to edit the footer but I get the following message:
The following themes are installed but incomplete.
[Ashe Child Theme]\ The parent theme is missing. Please install the “[Ashe]\” parent theme
What can I do to trouble shoot? I am using the ashe theme and it is currently installed so I’m not sure what the message is referring to.
Bhagwad Park says
Are you sure you used the correct “parentfoldername” in the code above?