"I highly recommend"
— Michael Dexter What They Say
Home / Guides / Developer / Child Theming

Child Theming

Child theming is a feature of WordPress for advanced users who want to change a theme’s code to make it look different than it does “out of the box”. This is the only correct way that WordPress provides for modifying a theme’s files.

  • Most users do not need to use a child theme. Read the Appearance guides for information on how to upload your logo, change colors, fonts and background without having to edit code.
  • Skill with WordPress theme development is required for child theming (learn more). If you want a modification but are not able to to it yourself, you can hire a professional.
  • Support is not offered for child theming or code customizations. See our recommendations if you need to hire a professional developer. If that is not an option, you can submit a feature request for us to consider.
  • You alone are responsible for development and maintenance of your child theme. You may need to update it from time to time to maintain compatibility with new versions of the theme and WordPress.

Purpose

If you are going to modify the theme (changing styles or adding features, for example), it is strongly recommended that you use a child theme to do it. The reason this is recommended is that by making modifications using a child theme, the original (parent) theme is untouched. By keeping your modifications separate, you will be able to update the parent theme without losing your changes (and having to remake from scratch).

Important: The purpose of a child theme is simply to keep your modifications separate from the original theme so that your own modifications are not completely overwritten and erased during a parent theme update. There is no way to guarantee a child theme will be perfectly compatible with new versions of a theme. You may need to update your child theme from time to time.

Keep in mind that there is more to child theming than can be provided in this guide. You should familiarize yourself with WordPress Theme Development and read about Child Themes on the WordPress Codex. This guide is only meant to serve as an introduction. Also familiarize yourself with the files included with the theme, Church Theme Framework and Church Content plugin.

Example Child Theme

Click below to download an example child theme to use as your starting point.

Note that after installing and activating the child theme, your content will remain the same and you can uninstall the child theme at any time. However, your menus will need to be reassigned to their locations and widgets will need to be reconfigured (the Widget Importer & Exporter plugin comes in handy for this).

Overriding Styles

You can override specific styles with a child theme without editing the parent theme’s original stylesheet. Go to wp-content/themes/{theme}-child and open style.css for editing. In our example child themes, the parent theme’s stylesheet is enqueued first, then the child theme’s stylesheet.

You can copy specific styles from the parent style.css file into the child style.css file, then change them. You can also add new styles here. If your theme has multiple color schemes, keep in mind that the colors are not in this file but rather contained within a color scheme stylesheet. Read the next section for details.

Note that even if you don’t override styles, the style.css file must exist in order for the child theme to work. The header portion of the stylesheet must also remain intact, although you can (and should) change the details (for example, add your name, set your version, etc.).

Style Tips

  • If you make a change and it has no effect, it may be necessary to use the !important declaration.

Color Schemes

Some of our themes offer a choice between multiple color schemes (such as Light and Dark). Exodus and Resurrect have this feature. Not all of our themes do.

Editing a Color Scheme

You can modify the theme’s color schemes in the same way that you modify styles for the main stylesheet (read previous section). Color scheme stylesheets are stored in the parent theme at colors/{color}/style.css.

Adding a Color Scheme

It’s simpler to edit an existing color scheme but you may want to create a totally new one and leave the original color schemes as is.

To add your own color scheme, go to the parent theme’s colors directory then copy and rename one of the folders (with style.css, images and all) into a colors directory in the child theme. You will end up with something like {theme}-child/colors/my-new-color. Next, edit the style.css file and images that you copied in a way that makes it a completely new color scheme.

After you have created the new color scheme’s directory inside of the child theme’s colors directory, it will be available for selection in the Customizer. You will of course want to select your new color scheme so you can see what you are working on. If you ever switch back to the parent theme, your color scheme will not be available, because it is part of the child theme.

Overriding Files

You can override most of the parent theme files. Simply copy a file from the parent theme to the child theme (this is exactly what is happening with style.css). When a file exists in the child theme, that version will be used.

Recommendation: Do not replace entire files in the includes directory. Instead, specific parts of these files can be changed (there is no point in replacing a whole file when you only need to change one function). Read the next section for information.

Modifying Parts of Files

functions.php

functions.php in the child theme is the primary place to apply modifications. You can use it to add and remove filters and actions used throughout the theme.

Removing and Adding Hooks

Most of our themes’ functions are assigned to hooks (either actions or filters). The example child theme’s functions.php shows you how you can change these (you can also add totally new ones). For example, the parent theme sets an action that calls a function to add classes to the <body> tag. You could remove that action then re-add it to use a different function that does things in a different way.

Instead of repeating the example code here, take a look inside the child theme’s functions.php file to see the real thing (it is well-commented).

Pluggable Functions

Most of the theme’s functions are used by action and filter hooks and can be changed as described above. The few functions that are not used by hooks are often pluggable. You can tell which functions are pluggable by looking through the files in includes. If a function has this piece of code before it then it is pluggable.

if ( ! function_exists( 'function_name ' ) ) {

You override a pluggable function simply by adding a function with the same name to the child theme’s functions.php file. The child theme’s function will be used in place of the parent theme’s function because it is loaded first.

Adding Stylesheets and JavaScript

The proper way to add a stylesheet or JavaScript file with WordPress is to enqueue it (versus modifying <head> in header.php). You can do this by adding one line of code to the functions.php file. Again, look inside of the child theme’s functions.php file for actual examples with code comments.

More Information