Theme Hybrid

Child Themes

All themes available on Theme Hybrid are one of two types of themes:

  • Parent theme
  • Child theme

In this tutorial, I’ll cover what to do when you’re using one or another and why it’s important to be using a parent/child theme system.

What are parent themes?

Nearly all WordPress themes are parent themes. Any theme (except those that are child themes) can be a parent theme. So, basically, a parent theme is just any ol’ WordPress theme. For the purposes of this site, we simply say “parent themes” just so we can make a dinstinction between regular themes and child themes.

What are child themes?

A child theme is a theme that inherits most of its functionality from a single parent theme. Child themes are meant to extend (note that this does not mean completely overwrite) the parent theme in some way. So, think of child themes as a way to build on top of whatever already exists within the parent.

The reason Theme Hybrid takes a parent/child theme approach is for upgradability. Most people make custom changes directly within their WordPress theme. This makes it extremely hard to upgrade the theme. Instead of making changes directly in the theme, you’d make them within a child theme. That way, when the [parent] theme is upgraded, you won’t lose any of your changes.

That’s the really beauty of child themes. They allow you to upgrade your parent theme (for bug fixes, security updates, and new features), but they also allow you to make modifications that won’t get lost because they’re safely housed within your child theme. Child themes aren’t touched on upgrade because they’re separate from the upgrade process.

Putting parent and child together

Now that you know what parent and child themes are, how do they work together?

In order to have a child theme, you must have a parent, which makes sense because children can’t exist without parents. On this site, there’s several parent themes to choose from.

Once you install a parent theme, you’d install a pre-made child theme or create a custom one. Rather than activating the parent theme in WordPress, you’d activate the child theme. It would inherit all its parent theme’s functionality.

Working with child themes

If you make any modifications to any themes from Theme Hybrid at all, these customizations should be from a child theme.

Child themes are pretty simple. They can be as basic as a style.css file or as complex as a full theme (the latter isn’t a great option). You upload them in the same place as any other theme (/wp-content/themes).

Downloading a child theme

If you’re not a developer or designer, this option is probably best. Head over to the themes page, and browse through the available themes. There may be something that works for you.

If you find a child theme that suits your needs, install it like any other theme. Just make sure you have the parent theme installed too. The parent theme will be clearly noted on each child theme page.

Creating a custom child theme

If you want to go the DIY route, follow along. Let’s make a folder named my-child. Place this folder within your /wp-content/themes directory.

Now, you need to create a style.css file to go within my-child. At the top of that file, add the following code.

/**
 * Theme Name: My Child
 * Theme URI: http://link-to-your-site.com
 * Description: Describe what your child theme should be like.
 * Version: 0.1
 * Author: Your Name
 * Author URI: http://link-to-your-site.com
 * Tags: Add, Whatever, Tags, You, Want
 * Template: parent-theme
 */

The most important line is this:

Template: parent-theme

The parent-theme part of the code must match exactly (case-sensitive) the folder name of your parent theme. So, if you are using the Hybrid theme, this would be hybrid. Or, if you are using the My Life theme, it would be my-life.

Now, you can activate the My Child theme you just created. It won’t look like much at this point though.

Styling your child theme

Note that you don’t have to perform this step with most of the newer themes. The best way to check is to see if your child theme is styled correctly after activating it. If you don’t see styles, you’ll need to do this step. Otherwise, skip it.

Just below your theme information code, add the following line.

@import url('../parent-theme/style.css');

Again, you’d need to change parent-theme to match the folder name of your parent theme. For example, if your parent theme is Hybrid, the code would look like the following.

@import url('../hybrid/style.css');

After that code, you’re free to make any design modifications you want. It’s completely up to you.

Creating a functions file

I won’t dive too much into working with functions files in this tutorial because it’s just a primer on creating child themes. But, you should go ahead and create a functions.php file and place it within your child theme folder.

Within that file, place the following code.

<?php

add_action( 'after_setup_theme', 'my_child_setup', 11 );

function my_child_setup() {

	/* add_action(), add_filter(), or *_theme_support() calls go here in the future. */
}

All you’ve done with the preceding code is create what’s called a “child theme setup function.”

You can read more about using this in other tutorials and you’ll often see it referenced in the support forums. For now, just have the file with that code in it.

Modifying theme templates

Generally, child themes should consist only of CSS modifications in your style.css file and some PHP customizations in your functions.php file. However, there are times when you need to overwrite an entire template.

To overwrite a template, don’t just make changes to the file in the parent theme. First, copy it and place it within your child theme folder. This will save it from being overwritten when the parent theme is updated.

Suppose you wanted to make a change to the archive.php template. You’d copy archive.php from your parent theme folder into your child theme folder and make your modifications there.