Table of Contents
- What is a wordpress child theme? And why use one?
- How to make a Child Theme
- Uploading the child theme to WordPress
- Making customizations using your child theme
What is a wordpress child theme? And why use one?
A child theme is a WordPress theme that inherits the functionality from the ‘parent theme’, and allows you to make changes to the look of your theme without making changes to the parent theme.
The child theme consists only of a ‘stylesheet.css’ file. The child theme is a blank by default, other than having a stylesheet header, and code stating to use the parent theme’s stylesheet.css code. However, any CSS code you add to the child theme, will override the CSS code in the parent theme. This means this code will be used over the CSS code in the parent theme.
You want to use a child theme because the ‘parent theme’ stylesheet.css will reset every time you update your theme.
Note: You need to install your Parent theme first, and keep it installed, when using your child theme.
You can easily make a child theme from any WordPress theme. This article will go into making a child theme for ANY WordPress theme, and how to use it.
How to make a Child Theme
In my example, I’m going to make a child theme for the Iconic One theme. You can find the full instructions for making a child theme in the video below. For additional information, read the rest of this article.
Making the child theme folder
First, make a folder on your computer. Right-click the desktop, and click ‘New’, and then ‘Folder’, and enter a name for your folder. The name of the folder will be the name of your child theme. You can use any name, but I like using a descriptive name, for instance “Iconic-one-child-theme”.
Making the stylesheet.css for your child theme
Now, make a text file inside of your folder. The fastest way usually is by rightclicking the desktop, and clicking ‘New’, and then ‘Text Document’.
Your text file MUST be named “style.css” for it to work. This file is going to be the stylesheet of your child theme.
Now, open your text file. To make a child theme, the minimum information you need to enter in this text file is the following:
Theme Name: [Child-theme-name]
/* =Theme customization starts here
Simply copy the above information to your text file. Alternatively, click here to download the above as a template style.css file (right-click, and select ‘save link as’).
Now, add in all the information:
Theme name: Here you can choose a name for your child theme. I like using the name of your parent theme, and then just adding ‘child theme’ to it. In the case of my example, I use “Iconic One child theme”.
Description: Here, add the description for your child theme. You can use something generic like “Child theme for the Iconic One theme”, or for instance, describe the css changes you made in the child theme; “Iconic one theme in orange”.
Author: You can use your own name as you’re the author of the child theme.
Template: You HAVE to use the name of the folder of your parent theme here! Usually, that’s just the name of the theme in lowercase, and without spaces, or using dashes (-) instead of spaces.
To be 100% sure about this, open the File manager of your website.
To do this using cPanel; login, and scroll down to the ‘Files’ menu. Here, click ‘File Manager’.
In your file manager, navigate to the themes folder to find the name of the folder for your Parent theme:
In my case, this means I have to use “iconic-one”.
@import url(“../[insert-theme-file-path]/style.css”); : Here, replace “[insert-theme-file-path]” with the folder name of your parent theme; the same as used in the previous step. In my case, that’s “iconic-one”, so I use:@import url(“../iconic-one/style.css”);
This line of code makes sure the the CSS of your parent theme is used, unless you add additional CSS to the child theme to override it.
For example, this is what my completed stylesheet.css file looks like:
Zipping the theme
You now have to Zip your child theme folder (not just the style.css file), because themes you upload to WordPress have to be in the .zip format. I like using WinRAR for this purpose. If you don’t have WinRAR, you can dowload it here.
Right-click your folder, and select ‘Add to archive’.
Now, select the ‘ZIP’ format, and click ‘OK’.
You’ll now have a .zip file of your folder. This is the theme you can upload to WordPress.
Uploading the child theme to WordPress
Go to WordPress, and click ‘Appearance’, and then ‘Themes’.
Now, click ‘Add new’
Then click ‘Upload theme’.
Now, click ‘Choose File’, navigate to your child theme ZIP-file, select it, and click ‘Open’.
Click ‘Install now’ to install your child theme. Once installed, click ‘Activate’, to activate your child theme.
Done! You now have your child theme installed, and can make changes to the stylesheet.css file from WordPress.
Note: when activating the child theme, things like your sidebar widgets, and the menu you’ve been using in the parent theme could be reset for the child theme.
Making customizations using your child theme
You can now acces your child theme’s stylesheet.css file by clicking ‘Appearance’, and then ‘Editor’.
Anything you’ll add to the child theme will override the stylesheet in the parent theme. Add any modifications you want to make below the following:
/* =Theme customization starts here
Example stylesheet CSS edits
For example, I want to the change the light blue colors in the free Iconic One theme to orange. Add the CSS code that does this, and click ‘Update File’.
Your theme is now customized!
(You can learn how to make these CSS edits in this article: Customize the Iconic One theme).
Adding comments to the stylesheet
I like adding comments to every CSS snippet in the child theme, to remind myself what it is for. A comment in CSS starts with /* and ends with */. Example:
/* Current menu item in orange */