It’s surprising how many WordPress site owners who use themes do not know what a child theme is or how to make one. I’m going to show you why a child theme will save you the frustration when you decide to make custom changes to your website without one.
Why is a Child Theme So Important?
Even though most themes of today give you a ton of options from within the Customizer, there are times when that is not enough when you need to change things that requires you to modify a theme file.
Child themes allow you to make such changes without affecting the parent theme which then makes it easy to receive updates without losing your custom changes. By creating a child theme, you are actually creating a separate theme that is inheriting all the features and functions of the parent theme. From here, you can then proceed making any modifications you want without physically affecting the parent.
For example, let’s say you are using the Twenty Seventeen theme, but you decide you want to add new sidebars. This is where the child theme can be utilized, much like I did with the Delect Pro theme I offer. So whenever you get an update for Twenty Seventeen, you can easily update without losing all the hard work you put into creating new sidebars for your website. This is because the custom changes you made were done in a child theme — separate from the main theme (Twenty Seventeen).
What Does a Child theme Do?
To take a snapshot from the Developer’s guidebook to Child Themes at wordpress.org, this is how they break it down:
- Make your modifications portable and replicable;
- Keep customization separate from parent theme functions;
- Allow parent themes to be updated without destroying your modifications;
- Allow you to take advantage of the effort and testing put into a parent theme;
- Save on development time since you are not recreating the wheel; and
- Are a great way to start learning about theme development.
When Not to Use a Child Theme
Child themes are generally used for limited changes and customization of a parent theme. With the child themes I offer here at childthemestyles.com, I made moderate changes while keeping them within reason.
However, If you are making extensive customizations – beyond styles and a few theme files – creating a parent theme might be a better option than a child theme. Creating a parent theme will allow you to basically build a whole new theme and have more flexibility without limitations that a parent theme might give you if you pursue a child theme.
Before you embark on a new customization project, you may need to consider the possibility that building a parent theme is the better solution.
How to Create a Child Theme
Let’s go with another example by creating your own child theme for Twenty Sixteen. I will use a similar method that I used when I created the Transference free theme. If you want to install this theme, you can download Transference.
Create our Child Theme Folder and our Stylesheet
First thing that we need to do is to create a new folder for your child theme where your other themes are in WordPress. We will name this folder as “twentysixteen-child” which is where we will put our files into.
You can name it anything you want
The location where this child theme folder will go is where you will find your other themes:
/wp-content/themes/twentysixteen-child/
Within your new theme folder, we now need to create a file called style.css with the following information based on our child theme name. This file is important and must be named style.css
/* Theme Name: Twenty Sixteen Child Theme URI: http://example.com/twentysixteen-child/ Description: Twenty Sixteen Child Theme Author: John Doe Author URI: http://example.com Template: twentysixteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentysixteen-child */
Now we can start adding our own CSS code right after the last line that shows the closing “comment” tag of */
Create a Functions File
We now need to create a functions.php file so that we can bring in the parent theme stylesheet for our child theme. This will inherit all the styles from Twenty Sixteen. When creating this file, this will be placed in our child theme folder, right where the style.css file is found. We will name this file as:
functions.php
To make a blank functions.php file, we will start with this:
<?php // Your php code goes here ?>
NOTE: Not too long ago, the common method was to import the parent theme stylesheet using
@import; this is no longer the recommended method
WordPress recommends we now enqueue the parent theme stylesheet with enqueue action by using wp_enqueue_style() in your child theme’s functions.php file. Here is an example:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
If you plan on adding your own CSS styles to your child theme, then we can change the above code to be:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentysixteen-style' for the Twenty Sixteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
Activate Your Child Theme
Your child theme is now ready for activation. Log in to your site’s Administration Screen, and go to Administration Screen > Appearance > Themes. You should be able to see your new child theme showing among the other themes installed. From here, you can now activate your child theme.
Modifying Theme Template Files
With a child theme, you can modify any file from the parent theme, in our example, the Twenty Sixteen theme.
To do this, you will copy and paste the Twenty Sixteen’s original file into your child theme folder while ensuring that the file name and location is kept exactly the same. For example, if we want to modify the the twentysixteen/template-parts/content-page.php, then we would copy and paste this file to /twentysixteen-child/template-parts/content-page.php. From here, you can now make whatever changes you want to make to that file.
When our theme is active, WordPress will now use that file and will show whatever changes you made instead of the one located in the Twenty Sixteen theme folder.
Get More Child Theme “How to” Guidance
If you need more information on how to take advantage of child themes, I recommend checking out the official WordPress Developers guide for Child Themes