Unless you’ve created a child theme for your WordPress blog, nothing is more frustrating than to loose all your theme customization, whenever you update your existing WordPress theme. Every time, when we install a new theme on our blog, we are always keen to  add a change or two in the theme design or functionality. In my early days with WordPress I had little to no knowledge on how to create a child theme for my WordPress site, in fact I don’t even know what the heck is a child theme, and what it has to do with my existing theme.

I still remember the day, when a new update of the theme which, I was using on my blog, was released and I was more than excited to try it on my first WordPress blog, and as soon as I had installed the update, whoa! I had lost every single change that I had added to my blog design. Later the theme developer, told me, “you should have installed a child theme to save your theme customization.” That was the day, and since then I had always used a child theme for my WordPress sites.

WordPress Child theme : beginners guide

What is a child theme?

Child theme in simple terms is the baby theme of your existing theme, it inherits all the features of the parent theme and it’s where you should add all the changes that you had ever wanted to add in your parent theme. The child theme overrides your parent theme, and you can literally just modify anything in your parent theme, without modifying a piece of code in the main theme.

What are the requirements to create a child theme?

1. A WordPress blog

2. FTP access credentials, or Hosting providers file manager interface.

3. Filezilla or just any FTP access client.

How to create a Child theme?

It’s super easy to create a child theme, in fact all you need to do is just add a new directory, description and a single line to define the template in the new style.css in your child theme.

Let me show you how.

Child theme for Divi

I am using Elegant themes Divi theme on this blog, and as you can see I had created a new directory in the wp-content/themes, and named it as “Divi child.” Next, you’ve to create a style.css inside the child theme directory and save the following code in that file.

/*
Theme Name:     Divi child
Description:    This is the child of Divi
Author:         Pranjal Gupta
Author URI:     http://blogosense.com
Template:       Divi
Version:        1.0.0
*/

@import url("../Divi/style.css");

/* =Theme customization starts here */

Note: You can customize the Theme Name, URI, Description, Template and other details, as per your parent theme.

It’s compulsory to define a parent template name and the @import sections, it identifies the parent theme and imports the CSS. Be sure that everything is case sensitive here, for instance the directory name of Divi, starts with a capital letter, so it’s required for you to define it with a capital letter, “D“.

  • Theme Name: It’s the name of your child theme
  • Template: The name of your parent theme, in my case it’s Divi.
@import url("../Divi/style.css");

The above CSS rule imports the style.css from your parent theme, it’s Divi for my case.

TIP: Never add any customization before @import tag, or else you’ll mess up your theme layout.

 How to activate the child theme?

divi-child-screenshot

To activate your child theme, navigate to the WP-admin > Appearance > Themes. Your newly created child theme will appear alongside your parent theme, and all you’ve to do is just activate the child theme. Congratulations, you’re now using a child theme for your blog. That was easy, ain’t it?

 How to add customization to the child theme?

Once you’ve, activated your child theme, you won’t see any changes in your theme’s design, since you had not made any. However, any changes you add to the style.css in your child theme, will reflect upon your site design.

To add any changes in your child theme, open up the style.css in your child theme and add any CSS changes you want to apply, right after @import rule.

/*
Theme Name:     Divi Child
Description:    This is the child of Divi
Author:         Pranjal Gupta
Author URI:     http://example.com
Template:       Divi
Version:        1.0.0
*/

@import url("../Divi/style.css");

h2 {
    color: cadetblue;
}

And look, it adds a nice blue color to the H2 tag!

before-after-child-theme-change

Similarly, you can also apply any changes to your child theme, just make sure you’re using the right CSS class or ID and you’re good to go.

Editing functions.php?

The functions.php file holds the theme’s main functions and the parent theme functions are always loaded with the child theme. However, if you want to add more custom functions to your parent theme, then you can easily do the same by creating a new functions.php within your child theme directory. But contrary, to the style.css, the other files in a child theme will rather be loaded right before the parent theme’s functions.php file.

Be sure that you’re functions.php file should start with a PHP opening and closing tag. While, in between the PHP tags you can add any of the desired PHP code.

<?php

// Your php code goes here

?>

Can I modify other theme files in the child theme?

Absolutely yes! you can add any changes to the other files in your parent theme using the child theme. All you’ve to do is just make a copy of the specific file, and paste that copied file in to the child theme directory. Be cautious, while naming the new file in the child theme, it should be exactly, the same as of the parent theme, and the file should be placed carefully, in similar directory structure, of your parent theme.

Make sure to do this carefully, because once you copy or create a new file in the child theme then WordPress will completely ignore the parent theme’s original files and the respective child theme files will be loaded, instead.

In case if you want to add add any new PHP file, which is not even available in your parent theme, such as adding a new portfolio page or a new custom template for your site, then you can easily add that file without any issues.

Are there any easy way to create child theme?

One Click Child theme – If you don’t want to manually create a child theme and style.css, then this plugin comes handy. Just install the plugin, activate it and fill in the “child theme name,” “description” and “author name,” that’s it and it’ll create a child theme for your existing theme.

When should I use a child theme?

It almost depends on your requirements, if you just want to change a color of  link, or add some spacing to the design element etc then you should probably use the theme’s custom.css feature, or else use custom CSS editor, in case if you’re using Jetpack plugin. However, if you constantly add and remove custom functions or frequently change the styling of your theme, then you should better consider creating a child theme for your site.

Conclusion

Well, there’s nothing more left to let you know about child themes, and still if you’re looking some more information about child themes, then you should better head over to the official WordPress Codex. Additionally, if you got any questions or got stuck while, creating a child theme for your blog, then feel free to drop them in the comments below, I’ll be happy to reply your queries.

Share This

Share this post with your friends!

Share This

Share this post with your friends!