Beginner’s guide: Child themes

Thousands of support tickets have taught us one thing; people love customizing their themes. Everyday, many of them, dive in the code to get a unique layout or functionality, tailored to their needs and desires.

Another interesting fact is that very few users utilize child themes. Why is that? Well, most of them don’t know what they are, how they work and what they have to offer. Some, happily very few, just can’t be bothered.

While scouring the web looking for an answer to various WordPress related questions, you are bound to find references to child themes and strong suggestions towards using them, let’s find out what they are below.

What is a child theme?

According to the WordPress Codex:
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

A standard theme can work by itself, a child cannot, that is the main difference between them.
The parent theme provides the child with most of its functionality while the child theme adds, removes or extends the parent’s functionality and/or appearance.

If the parent theme is not available on the installation you will only get a notice of its absence and you won’t be able to activate the child theme.

Pros / Cons

In order to use something it needs to have something to offer us, make our life easier in someway or another. Here is what child themes can do for us:

• They make updating a modified theme very easy and simple. All of our modifications live in the child theme, so when an update on the parent theme comes out we don’t have to worry of losing them by updating, no need to reapply them. Update and they will be still there.
• No changes made to the parent theme means that we can’t break it, no matter what we do in the child theme, the parent will be there fully working.
• By extension, any and all changes can be easily reverted in mere seconds. Did you make a breaking change? Need everything back up and running asap? Just activate the parent theme. The site is live again and you can take your time to fix the child theme.
• Last, but by no means least, it helps with learning, whether it is simple things, like understanding the cascade in order to apply new styles, or more complex stuff, like using actions and filters to get the functionality you want, a child theme can be your playground, your sandbox, go nuts!

Everything good must have a downside, right? In this case, especially if you are using a strong theme framework as a parent theme, there is a learning curve, which might even be a steep one, you are bound to need some time to acquaint yourself with the framework’s hooks in order to be able to use them efficiently.
Let’s put a positive spin on this; check #4 above. Once you do learn the ropes you have a very powerful tool in your hands.

Do I need one?

You might ask yourself, do I really need a child theme? This is a question that can be easily answered.

Are you planning on adding custom functions?
Are you planning to modify template functionality, like introducing custom loops or altering a listing’s layout?

If your answer is yes to any of the above questions, you need a child theme.

If on the other hand you are planning on just fiddling with the theme’s styling, you can just use a custom CSS box provided by a plugin. Jetpack carries one for example.

How to create a child theme

OK, I need a child theme, where or how do I get one?

There are two ways of getting a child theme, one is by creating it manually and the other by utilizing a plugin to create one for you.

The manual approach

Let’s take a closer look at the manual way which, as the name suggests, needs some user involvement.

To create a child theme you need to create the following three things:

• The child theme’s directory
• the style.css file
• and the functions.php file.

We start by creating the child theme’s directory. This is created in the wp-content/themes folder of your WordPress installation. You can name it anything you like however, conventionally, we use the parent theme directory’s name and append it with -child.

Inside the child theme’s folder we will place our two files.

First, the style.css file. This needs to have a header in order to be recognized by WordPress. A typical header might look like this

/*
    Theme Name: Olsen Child
    Theme URI: https://www.cssigniter.com/ignite/themes/olsen-child
    Author: CSSIgniter
    Author URI: https://www.cssigniter.com
    Description: Child theme for the Olsen WordPress theme
    Version: 1.0.0
    Template: olsen
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: olsen-child
    Domain Path: /languages
*/

Most of the above info can be omitted or even more can be included, the Theme Name and Template bits are necessary, the rest are up to you to include. More info on stylesheet headers here.

Next we move to the functions.php file. Your functions.php file can start like this:

<?php
    // Place all your custom functions below this line.

Now let’s enqueue the parent theme’s styles. Place this:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

in the child theme’s functions.php file and save it.

NOTICES:

• The previous example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
• On our latest, customizer ready themes this function is not necessary, the parent’s styles will be automatically loaded once the child theme is activated.

Congratulations, you have just created your first child theme! If everything was done properly you can now visit Appearance > Themes and activate it.

You can now start making customizations!

Adding a screenshot

If don’t like the checkered pattern that appears on your child theme after navigating to Appearance > Themes you can add a screenshot to it. All you need to do is create a .png file called screenshot.png and place it directly in the child theme’s folder. The recommended image size is 1200x900px. More info here.

Using a plugin

There are various plugins that can help you create a child theme quickly and easily. The most popular among them are, Child theme configurator, One-click child theme, Child Themify, Child Theme Creator by Orbisius and more. See here for a full list.

Using the child theme.

Applying new styles

To apply custom styles using the child theme, all you need to do is edit the style.css file and paste them below the header. For example to reduce the default bottom margin for paragraphs on Olsen to 10px your child theme’s style.css should look like this:

/*
    Theme Name: Olsen Child
    Theme URI: https://www.cssigniter.com/ignite/themes/olsen-child
    Author: CSSIgniter
    Author URI: https://www.cssigniter.com
    Description: Child theme for the Olsen WordPress theme
    Version: 1.0.0
    Template: olsen
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: olsen-child
    Domain Path: /languages
*/

/* Child theme styles begin below this line */
.p { margin: 0 0 10px 0; }

Adding custom functions

To add new functionality to the theme, for example register a new sidebar, you can use something like this:

add_action( 'widgets_init', 'olsen_child_widgets_init' );
function olsen_child_widgets_init() {
    register_sidebar( array(
        'name' => __( 'My Sidebar', 'olsen-child' ),
        'id' => 'my-new-sidebar',
        'description' => __( 'This is my new awesome sidebar!', 'olsen-child' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
    ) );
}

in the functions.php file, below any existing code.

Overriding parent theme files.

Another thing you can use child themes for is modifying the parent theme’s layout by overriding its templates.
For example, let’s say that we want to replace the blog and page sidebars with the sidebar we registered in the functions.php file earlier. To do that we need to create a new file in the child theme’s folder, called sidebar.php. In this file we will paste this code:

<div class="sidebar sidebar-right">
    <?php dynamic_sidebar( 'my-new-sidebar' ); } ?>
</div><!-- /sidebar -->

This new file will override the parent theme’s existing sidebar.php file and will display our new sidebar in all pages and posts that feature one.

Summary

We’ve reached the end of this tutorial. Hopefully you now know what a child theme is, how it can help you and how to create one.

It’s now time to put this knowledge to use and get creating!

More on child themes

For more info on child themes you can have a look at the Codex page here.