How to Create a Child Theme

In this tutorial, we will talk about Child Themes, how to create one and what are the components needed for the task.

Create Child Theme

What Is Child Themes?

Any Theme can become a parent Theme from which a Child theme can be developed. The Child Theme is an recipient of the functionalities and design of the Parent Theme. The big difference is – you can work on and change the child theme’s functions according to your needs while keeping the Parent Theme unchanged and turn to it at any point. As most popular Themes are frequently updated with security and other patches. If you just work on the main theme of your website, you will not only have to find the changes made by the developer and apply them to your version, but also be very careful not to mess up the entire theme and then having to lose more time in order to fix it.

By using a Child Theme, you can avoid all of this irratation. Safe working environment where your changes will not be detrimental for your website if something goes wrong with your code. The only possible downside of using Child Themes is the amount of time you will need in order to learn the Parent Theme. However we believe that you will gain this back once you start cutting on the development time due to all of the positive sides of using a Child Theme. We recommend using Child Themes in almost all cases of Theme modification with the only exceptions being an overly complex or a very simple project.

Create a Child Theme

If your version of WordPress is not supported you will have to do it manually. Select a Parent Theme (in our case we will use the Twenty Fourteen Theme). Afterwards you will need to create a new folder for the child theme and name it. This folder must contain a style.css file and populate it with the following data:

• Theme Name: Twenty Fourteen Child
• Theme URI: http://yourwebsite.com/twenty-fourteen-child/
• Description: Twenty Fourteen based
• Author:
• Author URI:
• Template: twentyfourteen
• Version: 2.7
• Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
• Text Domain: twenty-fourteen-child

The Name, URL, Description and Author data is not essential and depend on your choice. The most important are the Template sections which is used to identify the Parent Theme. That is why you must be sure that the information is correctly typed. It is recommended not to use the @import for any .css files.

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php – a file which you must create in your child theme’s folder.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() .'/style.css' );
}

Note that, if the Parent Theme of your choice has more than one style.css file for holding the data you will need to maintain all of the dependencies for that theme.

Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Dashboard→Appearance→Themes. You should see your child theme ready for activation.

Modify the Theme Files

To modify files other than the stylesheet, simply add the new files with the same name in the child theme directory. This will override the file in the Parent Theme and apply the change. To add new features, you will not need to override anything, just add the newly created files in the child theme directory.

The functions.php file is different from the .css style not only by nature but also for the fact that it does not override its equivalent in the Parent theme but instead loads in addition to it. There is no limit and you can put as many functions as you need. For example to remove the version number of your WordPress from your website you will need to write the function:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() .'/style.css' );
}

And save the function.php file.

Congratulations. Now you know how to create a basic Child Theme for your WordPress based website.