How to Create a Child Theme in WordPress

By | August 10, 2013
Share and Comment

If you want to make changes to one of the pre-installed themes on wordpress (such as twenty twelve or twenty thirteen, or any self-installed theme AKA a “parent theme”) it is essential to create a child theme in wordpress. And we’ll see why in a minute. But first…

What is a child theme?

A child theme inherits, the functionality, layout, design and look of a parent theme. Once you create a child theme, you can make modifications to it and all changes will reflect in the parent theme. For example, if the parent theme generates a body text format using the Verdana font, you can override that to Arial font by making some modifications inside of the child theme. If the background color of the website is black inside parent theme, you can override that to gray color by making some modifications inside of the child theme. That’s the function of a child theme. But WHY not make these modifications directly to the parent theme? (Almost there…)

What is a parent theme?

A parent theme is any of that are pre-installed or self-installed themes in wordpress. You could say that a parent theme is the “stock” version.

Why create a child theme?

Let’s say that you just installed a brand new theme and want to make some changes to it. So, you go inside the template files and make all kinds of changes to suit your needs. Change the background color, change the font, re-position some of the sidebars, etc. The moment that main parent theme gets an official update, all your changes are lost. Frustrating, right? Now you have to sit down and redo all the work. This is where a child theme saves your very life. Here is what you do: You create a child theme of that new theme you installed. You make all the changes you please within the child theme. And once you get official updates to the main parent theme, you retain all your changes.

How to Create a Child Theme in WordPress

Login to your webserver using a FTP client. Navigate to wp-content/themes. Inside this folder, you will see all your themes. Find the theme for which you want to create a child theme and then right click on it and choose copy. Then simply paste the file into the themes folder too. If the name of the parent theme was “the-theme”, then rename the file you pasted to “the-name-child”. Appending “-child” to the end of the parent theme’s name is usually a best practice.

Child theme

Example: Child theme of twentytwelve

 

 

 

 

 

 

 

 

In the root of the child theme directory, create a file called “style.css”. This is the only file you will need to complete the creation of a child theme. Inside your “style.css”, copy and paste the following header code and make any changes to the Theme Name, Description, etc.

/*

Theme Name:     Insert Name of Child Theme Here (e.g. Child Theme for the-theme)

Description:    Give a Description to your Child Theme

Author:         Put your name or your websites name here.

Author URI:     Put your website URL here

Template:       the-theme

Version:        0.1.0

*/

Then add the following import code underneath the above header code text:

@import url(“../name_of_parent_theme/style.css”);

The above code will import the stylesheet of the parent theme into your child theme, however, any modifications you make inside the child theme’s stylesheet will override the parent theme. Just make sure to add any CSS code underneath the import code above. The import code must be right below the header code and above all other CSS coding which you will be adding.

After you have finished all the steps above, go into your WordPress Dashboard and navigate to “Appereance -> Themes” and you will see your child theme listed right there among the other themes. Go ahead and activate it. Play around and get a hang of it.

And that’s all. If you have any questions, leave them in the comments section below.

Thank you :)

 

Leave a Reply