Wordpress, WordPress Child Theme, Website Development, Web Development, Website

If you’ve been a theme developer for any length of time, you will know how important it is to use a child theme when building upon an existing theme. 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? 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.

The WordPress platform is a magnet for those who want to take matters into their own hands, who want complete control over their websites and want to be independent in running them. WordPress does make it really easily to completely customize a website. If you have a bit of knowledge of HTMl, CSS and/or PHP, there is nothing you can’t change.

What is a Child Theme?

Child Themes are themes which inherit and override the styles and templates of their parents. Just as in life, without parents, there are no children. In WordPress, Child Themes cannot exist without parent themes. A parent theme is any theme that is created as a stand alone theme. Every single default theme that WordPress is shipped with (Twenty Fifteen, Twenty Fourteen, etc) are parent themes. They do not depend on any other theme in order to work and function.

A child theme, on the other hand, depends completely on it’s parent. For example, if you tried to activate a child theme on your site and you didn’t have the parent theme, you’d get an error and the theme wouldn’t activate at all. This is not true for parent themes.

Creating a Child Theme

Now that we know what a Child Theme is, let’s build one. As always, the Codex is your go-to guide for this. There you can see that there are only two things required to have a child theme:

A new directory in your themes folder with your child theme name.
A styles.css file in that new directory with specific header information.
The only tricky part about that is the header information in the styles.css file. Here’s the sample from the Codex:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.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
*/

You’ll notice that this theme is just called Twenty Fifteen Child. You might also notice that it has all the same information as a typical parent theme has. The one thing it has in addition to a parent theme is the “Template” tag.

Things to Do with Child Themes: 

Add New Options to the Customizer. Check out my Twenty Fifteen Child Theme and you’ll see I’ve substantially expanded the Twenty Fifteen Customizer. All the Customizer options can be added in addition to what the parent theme already creates.

Add New Post Type Templates. If you are using WooCommerce, for example, you might want to add some custom product templates. Adding those into a Child theme would ensure you don’t lose them when the parent theme has updates.

Override the Layout of your Parent theme. You can override the layout of any template in the parent theme. The easiest way to do that is to simply copy the template from the parent theme into your child theme and begin your customizations from there. You’ll notice in my child theme that the Archive page is significantly different from the Twenty Twelve parent theme.

Related Post