How to create a Child Theme in WordPress

Categories WordPress
Create Child Themes in WordPress

Child Themes are a very handy and useful thing in WordPress to customize the design of your website. In this article I will explain you when it is necessary to create a Child Theme and furthermore how to do this.

First of all I have some good news for you, if you want to make small changes in the design of your website, let´s say you want to increase the font size of the H1 tags, then there is no need to create a child theme. Many WordPress themes have methods to add custom CSS code. To check if your theme has such methods go to the Appearance section in the WordPress dashboard and look for Theme Options. In case your theme does not offer such methods you can install a plugin like Simple Custom CSS. In any case you should not change any of your theme´s code directly in its files! The changes you make will all get overwritten at the next update.

But now let´s go back to the part where you want to create a child theme. In some cases you possibly want to make more modification than only changing the font size. For example you may want to place the menu at a different spot or you need some extra widget areas. That´s when the child theme comes in! The functionality behind this child theme thing is a parent-child theme hierarchy, which says, if the necessary file does not exist in the child theme, look in the designated parent theme. So for example, if you want to modify the header.php file in the parent theme, you simply have to copy the file, place it in the child theme folder and make your changes.

Now let me finally explain how you actually create a child theme. First of all you need a new folder in the wp-content/themes directory. For example, if you want to create a child theme for the WordPress theme Twentyfifteen then simply name your child theme folder twentyfifteen-child. So it´s pretty obvious what´s inside this folder.

The next thing you need is a new style.css file. Place it in the child theme folder and put the following content in it:

How to prepare the style.css for your child theme
How to prepare the style.css for your Child Theme

The first line must start with the /* to tell the system that the following lines until the */ are a comment and no part of the style sheet. In the second line you should write the name of the parent theme. So in this example you should write there Template: twentyfifteen. The important thing here is to write the name in lowercase. The name you write here has to be exactly the same as the parent´s directory name. This line tells WordPress where to look for the parent theme. So be really sure to make this step right.

The next thing is to close the comment area with the */ characters in line 3. And finally you have to tell WordPress to load the parent stylesheet. It´s in line 4. In this example it´s the path of the stylesheet of twentyfifteen. Of course when you want to make a child theme of another parent theme you have to replace the path by the one your parent stylesheet has. When you forget this line you will basically have no stylesheet at all until you write your first CSS classes in the new one. An important thing to mention here is that there can´t be any other line between the @import and the */. If there is, the import function won´t work!

Now you are finished with the setting up of the stylesheet. There is only one thing left. You need to create a new file in the child theme directory called functions.php. This is necessary to load the styles properly in your new child theme. After you created it, write the following code in it:

How to prepare the functions.php for your Child Theme
How to prepare the functions.php for your Child Theme

Now the set-up of your child theme is finished and you can start working with it! You should now be able to choose the new child theme in the Themes section of your WordPress dashboard. In any case you should try the child theme first on a local installation. There is always the possibility something went wrong. You can read this article about installing WordPress on XAMPP if you don´t have a local version of your website yet.

Assuming everything works fine, you can now put new CSS classes in the style.css of your child theme to modify the design of your website. It is even possible to put already existing classes from the parent stylesheet in there. When you do this you can modify the attributes of the classes and WordPress will take the information of your child theme´s stylesheet. This is a good way to make many small changes in the existing design.

Title Image courtesy of AKARAKINGDOMS at FreeDigitalPhotos.net (edited by wpressmag).

How to create a Child Theme in WordPress
Rate this post

3 thoughts on “How to create a Child Theme in WordPress

  1. I have read so many content about the blogger lovers
    except this post is really a pleasant post, keep it up.

  2. Pingback: Homepage

Leave a Reply

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