WordPress Child Theme

January 15, 2018 9:44 am 0

In the terminology of content management systems, child theme is a helper theme that depends of the parent theme and allows its modifications. On the other hand, it doesn’t modify the code of the parent theme explicitly. Deletion of the WordPress child theme would simply restore the features of the parent theme. This tutorial will explain why usage of child themes is important and how to create a child theme from any parent theme.

WordPress is not the only CMS that allows usage of child themes. However, in WordPress, this feature is brought to perfection. At the same time, making a WordPress child theme from any parent theme is very straightforward. Regardless of the complexity of your project and regardless of the complexity of your parent theme, it’s strongly recommended to create a child theme before you start working on your project. It’s also advisable to use child themes rather than modify parent theme code, even for the smallest changes in parent theme code. Those “smallest changes” include changes in CSS code (in example, if you want to change text or background color).

Why it’s so important? Let’s explain this!

WordPress treats themes in a similar way as plugins. They are upgradable pieces of code that extend main WordPress features. They keyword here is upgrade! If you are using any theme from main WordPress themes repository or from any commercial providers, after a period of time, new version of your parent theme will become available. You would receive a notification in your Dashboard, and after few clicks, your there would be upgraded to the latest version. Simple and easy!

But is it safe?

Yes, if you used a WordPress child theme of your parent theme for making any modifications. However, if you were lazy and made modifications in the parent theme code, those modifications would be vanished! Therefore, let’s learn how to create a child theme.

How to Make WordPress Child Theme

I will repeat again, it’s very easy and doable in just few steps.

Let’s assume your parent theme is WordPress wedding theme which is located in folder /wp-content/themes/wp_hot_wedding. In the same folder (/wp-content/themes), make a new folder and name it as wp_hot_wedding-child.

Inside the new folder, using your favorite code editor (Notepad or TextEdit can do the job too) create two empty files: functions.php and style.css.

The first file (functions.php) can remain empty. If you need to add your custom functions or modify functions that come from the parent theme in your WordPress child theme, you can use this file.

The second file (style.css) can be used for adding your custom CSS code. It must start with this CSS comment:

/*
Theme Name: Hot Wedding Child
Theme URI: https://hot-themes.com/wordpress/themes/wedding/
Description: Child theme for the Wedding site
Author: John Doe
Author URI: https://yoursite.com/
Template: wp_hot_wedding
Version: 1.0.0
*/

You can use any theme name that you want (in this example it’s “Hot Wedding Child”). You can also change Theme URI, Description, Author, Author URI and Version. But be careful withTemplate. It must much the name of the folder where your parent theme is located. In this case, it’s wp_hot_wedding.

Below this comment, in the same file (style.css) you should import parent theme’s CSS. This is done with one line of code:

@import url('../wp_hot_wedding/style.css');

In this line, you should change wp_hot_wedding to match the name of the folder where your parent theme is located.

In the following image, you can see the structure of files and contents of style.css file:

WordPress child theme

Activate Your Child Theme

After you accomplish few simple steps explained above, your WordPress child theme should be ready. It’s time to activate it!

Open your WordPress Dashboard and go to Appearance > Themes. Beside your parent theme, you should see your child theme, under the name you entered in Theme Name line, in file style.css. You can activate it now. Although your new child theme is active, your site will remain unchanged. But, it’s now ready for adding modifications without changes in the parent theme code.

Also, you are safe to upgrade your parent theme in future. Modifications that you added in your child theme would not be overwritten.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.