Using a Child Theme

When you choose a theme for your WordPress site, it’s a good idea to create a child theme. When the original theme has an upgrade, especially for security fixes, you can install the upgrade without any worries for preserving your customizations because they will be part of the child theme, not the original parent theme.

So how do you set this up? You’ll need ftp access to your site, or access via a File Manager option in your web host’s admin console; but other than that, it’s pretty easy. You need two files with some pretty standard code. There are a lot of web resources describing the process. For more details, start with the WordPress Codex , the official WordPress documentation. Here’s a summary:

Configuring a Child Theme

Make a directory

Create a subdirectory for the child theme in the wp-content/themes directory. Give it a name that associates the child theme with the parent. The standard pattern is parentthemename-child.

Create and configure the child theme’s style sheet

Create a new file and name it the required name of style.css.

There is a standard header for the main child-theme style sheet that tells WordPress what it needs to know about the child theme. The most important value is Template, which names the parent theme, connecting the child theme with the parent.

The following header establishes a child theme for the Twenty Fifteen theme provided with WordPress. You must change the value for Template to name your parent theme. You may change the other italicized items to describe your new theme.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       your-name-here
 Author URI:   http://your-url.com
 Template:     twentyfifteen
 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:  twenty-fifteen-child
*/

Create functions.php and enqueue the parent style sheet

In the child-theme directory, create a new file called functions.php.

You need to add code to functions.php to tell WordPress to load the parent theme’s style sheet. The enqueue code shown here replaces the former, less efficient method of using @import. In a simple case like ours, you can use this code as is, without changing any of the quoted strings.

<?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 }
 ?>

Activate your child theme

In the WordPress dashboard, select Themes, find your new theme in the list, and activate the child theme. The child theme’s image will be blank, because we haven’t provided any image for it. We don’t have an example of how it will look yet!

child-theme

Troubleshooting

If you can’t find your theme on the Themes page, your new files may have errors. Make sure you’ve created the directory in the right place. Then check your typing in the two files, style.css and functions.php.

If you see the dreaded blank white screen, save your files outside of the WordPress directory, remove the child-theme directory, and refresh your browser. WordPress should come back to you. Then check the files for errors before you try again.

Develop your child theme, as needed

Now you can customize any part of your theme. The basic procedure is: 1) find the appropriate PHP template file in the parent theme; 2) copy it to the child theme directory; 3) make your changes. Some themes have specific directions on where to put files in your child theme so that they override the parent. More on that later.

For more information about child themes, start with the WordPress Codex.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.