The Anatomy of a Child Theme

When it comes to WordPress theme customization there are two main approaches. Traditionally, because WordPress is open source you’d just make your edits directly to the theme itself.

Very early on the WordPress core developers added the ability to use a child theme. A child theme inherits all of the templates and functionality of the parent theme while allowing you to modify the parent theme output because the child theme files supersede the parent theme files.

Advantages of Using Child Themes

Making all of our customizations in a child theme instead of directly to the parent theme has some distinct advantages.

• Protection – Theme developers regularly push out new releases with improvements, bug fixes and the like. When you modify the theme directly upgrading the theme with a new release from the developer will overwrite your customizations. When your customizations are in a child theme then they are protected and they aren’t lost when the parent theme is upgraded.
• Speed – Working with child themes can speed up website development time. This is especially true with a theme framework system like Genesis. Because much of the heavy lifting on the back side for things like search engine optimization features, widgets and layouts, etc. is already done in the child theme, you don’t have to recreate the wheel every time you start a new project. And then theme frameworks like Genesis stepped that up a notch by including hooks and filters throughout their code to make modifying what the code does even easier.
• Education – Customizing via child themes is a great way to get started learning how WordPress works while minimizing your risks. One of the best ways to start learning WordPress is to dig into the code itself and see what effect changes have. When you make all of your changes in a child theme, you have the safety net of being able to fall back to the parent theme functionality if you get stuck or break something that you have to undo.

What is Required for a Child Theme

In its most basic form, a child theme can be simply a folder that contains a CSS stylesheet. (A stylesheet is simply the style.css file. Those terms are interchangeable.) When you look at the header of the style.css file you will see a top section inside comment marks with some information about the child theme. Here’s an example from the current version (as of this writing) of our Kathryn theme:

/*
  Theme Name: Kathryn
	Description: Katheryn is a clean professional theme especially for accountants built on the <a href="https://web-savvy-marketing.com/go/studiopress/">Genesis framework</a>.
	Author: Web Savvy Marketing
	Author URI: /
	Version: 1.0.8

	Template: genesis
*/

The only two parts that are required are the theme name, which is what the child theme is called, and the template reference. The template reference must be the exact folder name of the parent theme and not the parent theme’s name.

Including that key line template: genesis tells WordPress that this is a Genesis child theme. When that happens, WordPress will use all of the template files from Genesis that aren’t duplicated in the child theme folder.

Of course because the one required file in the child theme is style.css, that means that file completely replaces the style.css file from the parent theme. So the child theme doesn’t automatically pull in the styles of the parent theme.

There are two ways to overcome this. You can use an @import line at the top of your stylesheet to include the Genesis styles. This can be quicker in some instances, but can lead to unexpected results.

The other option, and what you see with most Genesis child themes, is to include all the styles the child theme needs without pulling in the parent styles. If you are starting your own child theme you can simply copy all the styles from the Genesis stylesheet and start modifying them in your child theme.

Duplicating the parent’s style sheet rather than importing it has the advantage that all the styles for your child theme are in one place. Also it reduces the likelihood that changes in the parent theme styles will alter your site when you upgrade.

Additional Child Theme Files

Once you get past the minimum requirements, a child theme can include any of the files from the Genesis theme as well as additional WordPress template files.

Most of the time you will see a functions.php file. This file is the first place WordPress looks to see what PHP functions to execute in your theme and it’s the one exception. The functions.php file is the one file that does not get overridden in the child theme.

Depending on how complex the child theme is, the functions.php file may reference other files. And that’s how you can work through what the child theme does and how it does it. Look at the functions.php file first. Then follow the code through the referenced files.

In it’s most basic form a child theme can be very simple. Our custom design and stock themes have a bit more going on so you’ll find a dozen or more directories with scores of files.

Yet even with that complexity they still boil down to the child theme basics.

Customizing Your Child Theme

At this point there is no good way with WordPress to create a “grandchild” theme, or a child of a child theme. There are some work arounds. But they tend to be clunky and a bit confusing for folks just getting started.

Later in this series I’ll be sharing how to manage your own customizations. For now though the place to start, where most of your own tweaks and changes will take place, is in the style.css file and the functions.php file.

Now it’s your turn. What is your biggest child theme customization question?

---

This is the second in our series of articles on Best Practices for Genesis Theme Customization.