Create a child theme for WordPress – a Foolproof Guide

By | March 15, 2015

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’.

Child-theme-wordpress-text-file

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]
Description: [description-for-your-child-theme]
Author: [your-name]
Template: [parent-template-name]
*/

@import url(“../[insert-theme-file-path]/style.css”);

/* =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’.

Wordpress-child-theme-File-manager

In your file manager, navigate to the themes folder to find the name of the folder for your Parent theme:

Wordpress-child-theme-file-manager2

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.

Done!

For example, this is what my completed stylesheet.css file looks like:

Completed-stylesheet-css-wordpress-child-theme

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’.

Zipping-your-child-theme2

Now, select the ‘ZIP’ format, and click ‘OK’.

Zipping-your-child-theme2

You’ll now have a .zip file of your folder. This is the theme you can upload to WordPress.

Child-theme-zip-file

Uploading the child theme to WordPress

Go to WordPress, and click ‘Appearance’, and then ‘Themes’.

Installing-a-theme-wordpress

Now, click ‘Add new’

Installing-a-theme-wordpress-add-new

Then click ‘Upload theme’.

Installing-a-theme-wordpress-add-new-upload-theme

Now, click ‘Choose File’, navigate to your child theme ZIP-file, select it, and click ‘Open’.

Uploading-your-wordpress-child-theme

Click ‘Install now’ to install your child theme. Once installed, click ‘Activate’, to activate your child theme.

Activate-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’.

Accessing-stylesheet-css

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’.

Child-theme-example-use

Your theme is now customized!

Before: After:
Iconic-one-menu-bar-before Iconic-one-search-bar-after

(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 */

 

5 thoughts on “Create a child theme for WordPress – a Foolproof Guide

  1. Melvin Stewart

    Hi Guido,
    I came across your site via the Wealthy Affliate March blog and was very glad that I did as I have been trying to find out about this “Child theme” without much success.
    Thanks for the tutorial as it is very helpful, however you refer to it as “foolproof guide” and I know some of us must seem like fools when compared to the amount of knowledge that you have on certain subjects in the time it takes you to acquire it.
    A query that I have is that when you suggest for instance to acces the ‘file manager’ you do not state whether this is on WordPress, Windows or as my site is on WA how I get to this website file manager and this makes people like me feel foolish when we cannot find it.
    I have even used the Q&A’s on WA and got another blog telling me to “Google file manager or ftp” which I did and got explanations as to what file transfer does.
    I find your tutorial great up to the point where I cannot find the ‘file manager’ on my WA site.
    I would be grateful if you could assist me as I have several others whom I could recommend to you as this is a very useful site.
    I would even like to add your link on my ‘Training page’ on my siteif you were willing.
    Thanks again for the tutorial, which I have not completed because of this ‘File Manager’ issue and the fact that I do not want to mess it up before I am comfortable with the process of changing the styles.
    All the best,
    Melvin.

    Reply
    1. GuidoGuido Post author

      Hey Melvin!

      Thanks for your question. I can definitely help you out here.

      I access the file manager using cPanel, a control panel that most webhosting companies use. As far as I know, WA sadly doesn’t have an easy way to acces your files; you have to use an FTP client. I didn’t include how to do this in this article, as it could be an entire article of itself. I’ll try to reword this part of the article to be a bit more clear.
      There are other options to access your website files, such as a plugin, like https://wordpress.org/plugins/wp-filemanager/screenshots/.

      But I’ve got an easier solution for you.

      I checked out your website, and it seems you’re using the same theme as me. Just use “iconic-one” for ‘Template’ and ‘import-url’.

      As a matter of fact, I can give you the exact text you could use for your stylesheet.css:

      /*
      Theme Name: Demo child theme Iconic one
      Description: Child theme for the Iconic one theme – demo
      Author: Guido
      Template: iconic-one
      */

      @import url(“../iconic-one/style.css”);

      /* =Theme customization starts here
      ——————————————————- */

      Hope this helps. If you have any further questions, let me know!

      Guido

      Reply
      1. Melvin Stewart

        Thanks Guido,
        I have done as you said, but stiil do not understand why WA makes it so difficult to access the files and no tutorials for this.
        I would appreciate linking with you via email to discuss further.
        Best wishes,
        Melvin.

        Reply
  2. Jason

    Hi Guido

    All I can say is wow, this is a great post! But more so your site is awesome and definitely bookmarked. I am in love with your start page and think it is just absolutely brilliant! You have an incredible site here which will help so many people. My hope is as many people find it as possible!! Anyone beginning, or continuing, in online marketing and online business is going to love this site. Well done
    Its incredible
    Jason

    Reply
    1. GuidoGuido Post author

      Thanks for the kind words, Jason! I’m constantly working on improving the site and creating new content. Comments like this definitely help me keep motivated!

      If you want to keep up-to-date with new content, make sure to follow me on social media.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*