How to create WordPress Child Theme
October 19, 2015WordPress
According to the WordPress Themes Survey, 85% of our users (and even developers) customize their themes, and only 35% use a child theme when doing so. This may be due to a lack of understanding as to what a child theme is, or due to the difficulty of creating one. WordPress themes can be amazing but there are so many examples of little things we all want to change. A color here, a font size there, perhaps use a different call to action on the buttons?
What are the problems caused when you modify an original theme?
The problem is that modifying a theme even slightly prevents you from updating it to a newer version in the future, because if you do try to update, you lose all your changes.
Child themes solve this by allowing you to use all of the functionality of your chosen theme while allowing you to update it without the fear of losing your modifications.
In this tutorial, we will go over how to create and use child themes, and why using them is so important.
Why You Should Be Using Child Themes ?
Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.
How Child Themes Work?
Child themes are separate themes that rely on a parent theme for most of their functionality. If you are using a child theme, WordPress will check your child theme first to see if a specific functionality exists. If it doesn’t, it will use the parent theme. This is great because it allows you to modify only what you need.
Creating A Child Theme
Creating a child theme is extremely simple, so much so you can copy and paste my example below.To create a child theme for your theme, you will need to do the following steps:
- Create a theme directory in your WordPress install
- Create a stylesheet with information about your child theme
- Import the styles of your parent theme
Once these steps are completed you can activate your child theme and your website will look exactly the same as before, but it will be using your child theme.
So let’s go through the above steps in detail. For this example, I will be creating a child theme for the Twenty Fourteen default theme. You can do the same for any other theme.
1. First, go to your theme directory and create a folder for your new theme. You may name it anything you’d like. To make it simple and clear, I will name my theme twentyfourteen-child.
2. The next step is to create a stylesheet file. This must be named style.css. Copy and paste the following code into the file you’ve just created:
Theme Name: Twenty Fourteen Child
Theme URI: http://yourwebsite.com/twentyfourteen-child/
Description: My very first child theme
Author: Gaurav Panwar
Author URI: http://www.gauravpanwar.com
Tags: some, tags
Text Domain: twenty-fourteen-child
/* Theme customization starts here
The two necessary items in the code above are the lines starting with “Theme Name” and “Template.” The theme name tells WordPress what the name of your theme is, and this is displayed in the theme selector. The template tells WordPress which theme it should consider as the parent theme.
The difference between get_stylesheet_directory and get_template_directory
If you make your own themes there are a couple of guidelines you may want to follow to make child theme creation easier. The two most important ones are learning the difference between get_stylesheet_directory() and get_template_directory().
get_stylesheet_directory looks into the child-theme folder for the resources and get_template_directory looks into main theme folder.
When you are reached to this point, your child theme will be fully working as same as twentyfourteen theme do. Now let’s assume you have to modify the html for single blog page. So simply copy content-single.php file from twentyfourteen folder to twentyfourteen-child folder and start modify it. If in future any update comes to twentyfourteen, your changes won’t be lost.
If you need to modify any file, simply copy it from parent theme folder to child-theme folder and modify that. This is how child-theme is so easy and useful.
Using a few very simple copy-paste steps you can create a future-proofed environment for your theme, which will save you a lot of headaches. Take a few minutes to follow along the tutorial here and your website and your developer will thank you for it. Finally, If you have any great tips about child themes, do let me know.