STEP 1Understand Child Themes
To answer the question “Why should I use a Child Theme?” you must first know what a Child Theme is. Any Theme can become a parent Theme from which a Child theme can be developed. The Child Theme is an inheritor of the functionalities and design of the Parent Theme. And here comes the big difference – 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 hassle and have a 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.
STEP 2Create a Child Theme
To create a Child Theme, you might want to try using this plugin first.
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: 1.0.0
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. For more information about the reasoning behind this, please visit our How to avoid CSS @import tutorial.
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_template_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 Admin Dashboard>Appearance>Themes. You should see your child theme listed and ready for activation.
STEP 3Modify the 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:
<?php
function wpbeginner_remove_version() {
return ''
}
add_filter('the_generator', 'wpbeginner_remove_version');
and save the function.php file.
Congratulations. You now know how to create a basic Child Theme for your WordPress based website.
