Blog

Creating a WordPress Child Theme

black laptop computer

WordPress is open source — meaning you can look up the code and see/improve how the CMS works. However convenient this may sound in theory, very few people would need to change the WordPress core. Themes on the other hand, require tons of tweaking and customizations. If some option isn’t part of the theme’s pre-built admin panel, you will need to make the modification in question manually. And this is where child themes come into play — as the recommended method for customizing any WordPress theme. In this article, we’ll learn how we can create a WordPress child theme by properly enqueuing parent theme styles.

Why You Need to Use a Child Theme?

The most important thing to understand about a child theme, is that it inherits all of the features and appearance from its parent theme. We can make changes to the parent theme — without affecting or changing its code. Why is this important? Because when you modify some files directly and the theme is updated, you may lose your customizations. By using a child theme, you will risk that our changes are deleted or overwritten — no matter how often the original theme gets updated.
Create a WordPress Child Theme — The Right Way
We’re going to create a child theme for the theme Twenty Sixteen. Every WordPress child theme needs 1 directory, and 2 main files: style.css and functions.php. So, let’s do exactly that.

1. From your WordPress root directory, go to wp-content/themes.
2. In the themes directory, create a new folder called twentysixteen-child (or any other name you find suitable). Make sure the name is in lowercase letters. If there’s more than one word, you can separate it with a dash (—).
3. Open your text editor, and within our newly created directory for the child theme, create 2 files: style.css and functions.php.

Now, let’s add a few required comments in our style.css, so that WordPress can detect the child theme:

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/child-theme-preview
Description: Lorem ipsum dolor sit amet.
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: lorem, ipsum, dolor, sit, amet
Text Domain: twenty-sixteen-child
*/

Although some of these comments are optional, it’s a good practice to include them all. WordPress will use this information to populate some fields in the Appearance section, and to detect the parent theme. Two lines are super-important: Theme Name and the template.

Theme Name is what WordPress will call your child theme throughout the admin panel. The template line is connected with the directory name of the parent theme. So please check your wp-content/themes directory, and see how your parent theme’s directory is named. If you don’t get the template line right, you won’t be able to activate the child theme.

There are two ways we can accomplish this. The first is to use @import in the style.css — which is easier, but with a significant downside. It increases the style load time, and it is no longer the preferred method. That’s why we will enqueue the parent theme styles more efficiently using functions.php.

Open functions.php and write the following code:

function import_parent_theme_styles() {
wp_enqueue_style(‘parent-theme-styles’, get_template_directory_uri() . ‘/style.css’);
}
do_action(‘wp_enqueue_scripts’, ‘import_parent_theme_styles’);

That’s it! Save functions.php, and activate your child theme. It should look exactly the same as your parent theme. But now, whenever you want to change the appearance, you can do that by writing CSS into your child theme’s style.css. Moreover, you can change entire template files in your child theme, and WordPress will know to load those, instead the template files in the parent theme.



Scroll to top