How To Create A Child Theme
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:
wp-content->themes
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!
