A child theme simply inherits the functionality of any WordPress theme. Child themes enables you to edit or add new functionalities to main parent theme without digging inside its code files. The features added to a child theme overrides the features of main theme and hence it is the safest way for adding custom CSS, custom hacks and the best thing is that the code added to a child theme doesn’t gets lost after new updates.
Here are some reasons about using child theme:
- Child Theme Keeps Your Changes Safe: Suppose if you edit a theme active on your website and it gets updated, your changes will also be washed away. Whereas if you add those changes to a child theme, you are free to run parent theme update.
- Child Theme Speeds-up Development Time: Instead of evolving the code of a theme, you can create a child theme and add you hacks there.
- Child Themes are a great way to experiment new things when learning WordPress theme development.
Screenshot showing an example of Twenty Fourteen’s child theme:
How To Create A Child Theme?
Step-1 Creating Your Child Theme’s Directory
Open your website via FTP or your account’s File Manager cPanel then navigate to your website’s root directory. Visit wp-content/themes directory and create a new directory for your child theme. Suppose you want to make Twenty Fourteen’s child theme so give a name which you can easily recognize like twentyfourteen-child.
Step-2 Creating Style.CSS File (The Only Required Child Theme File)
Now the only required file to create a child theme is style.css so your next step is to create a file with name style.css in your child theme’s directory.
Your child theme’s style sheet must start with lines given below:
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: SANGKRIT
Author URI: https://sangkrit.net
Template: twentyfourteen
Version: 1.0
*/
@import url(“../twentyfourteen/style.css”);
/* =Theme customization starts here————————————————————– */
And yes, you can use your own theme name, author name, website URL etc. The most important part is Theme Name, Template lines and @import. The template is the folder name of the parent theme, in this case twentyfourteen. Now activate this child theme by logging in and visiting Dashboard -> Appearances -> Themes page.
It’s time to modify CSS: Your child theme will now be looking same as the main parent theme as we’ve imported its CSS file. You can modify the theme’s CSS by adding your custom CSS code after the following line
/*=Theme customization starts here
————————————————————– */
All custom CSS code automatically overrides the original i.e. parent theme’s CSS. For Example: You want your website’s text in red color then add the CSS to your child theme’s style.css file as shown below:
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: SANGKRIT
Author URI: https://sangkrit.net
Template: twentyfourteen
Version: 1.0
*/
@import url(“../twentyfourteen/style.css”);
/* =Theme customization starts here————————————————————– */
p {
color: #ff0000;
}
Step-3 Creating Theme Functions File For Activating Custom PHP Hacks (Optional)
Another important thing most bloggers need is adding hacks to theme’s functions.php file. You must have read articles about WordPress hacks asking you to add their PHP code to your theme’s function.php file for enabling some specific feature.
Function.php is an important theme file as all main functions of the theme are usually kept in this file. If you like adding custom hacks or you can say functions to your WordPress site then create a functions.php file in your child theme’s directory.
Unlike to style.css file, the functions.php doesn’t needs any specific lines to start with and this file of your child theme doesn’t override its counterpart from the original theme. It just activates all functions in addition to the parent theme’s functions.php.
You child theme’s functions.php file simply starts with PHP opening tag and ends with PHP closing tag. All custom functions are added in between:
<?php
// Stick your php code in here
?>
Step-4 Overriding Other Theme Files (Optional)
Other template files of main theme can be edited simply by replacing the file with a copy in your child theme’s directory. Unlike to functions.php file, other files of original theme are ignored if their copy is present in your child theme’s directory.
For Example: Suppose you want to make changes to Twenty Fourteen’s footer.php file then you just need make a copy of the old file and then add it to your child theme’s directory. As soon the file is added, you can make the changes and also you can safely revert back to the main theme any time.
Also read our tutorial on New WordPress Child Theme Wizard To Generate Child Themes In One Click.