Wordpress Theme

What Is A WordPress Child Theme And Why You Should Use It

March 30, 2014

You have probably heard about child theme in WordPress. If you don’t know what it is, read the following scenario to get the idea. Despite what you might have heard it is actually very easy.

You have set up a new WordPress website, installed a new theme and made some changes to it. Those changes will most probably be in the css file. After a while a new version of the theme comes out, with cool new features and some security bug fixes. The next thing you do is of course, update your theme. To your surprise, all the changes you made are now gone.

This happens because when you updated your theme, the new css file has overwritten the old one, thus setting it to the default look. Now, if you didn’t made any changes, or the changes you did were minor, this isn’t a big issue. But if you made lots of changes then you can understand the seriousness of this. In any way, it shouldn’t happen and the way to prevent it, is with child theme.

There are of course other reasons for wanting to use a child theme. You can experiment leaving the original code intact, which is great especially if you are not experienced WordPress user or you don’t know html/css and php very well. Updating and development is also easier and safer.

Now, lets see how we can create a child theme for our WordPress installation. Create a new folder in your computer. If your theme’s name is ABC, then naming the folder ABC-child is a good naming convention. Inside the folder create a new file called style.css. In the css file you should have the following:

/*
 Theme Name:     ABC Theme
 Theme URI:      http://www.abctheme.com
 Description:    ABC Child Theme
 Author:         Name Surname
 Author URI:     http://www.abcauthor.com
 Template:       ABC
 Version:        Version Number
*/
 
@import url("../ABC/style.css");
 
/* Your custom css code goes here */

Now there are a few things to notice here. You could skip most of them without any problem. In fact the only two lines which are necessary are Template: and @import url parameters. Also keep in mind that case sensitivity matters. Use the theme name Exactly as it is. Template: is the name of the theme, and the @import is the path to the parent (original) theme’s css file. Path must be correct, so check your theme.

Now to use it, you have to save and close the css file, zip the folder, upload it to your WordPress website, install and activate it like any other normal theme. Now the custom css code we wrote, overwrites the original one and we can change it to our hearts desire, safely.

It wont take you more than 5 minutes to set it up. I hope you give this a try and adopt this technique.

0 comments