The Ultimate Guide to WordPress Child Theme in 2016

wordpress child theme
By Aditya Samanta Updated

Setting up a WordPress child theme may sound intimidating but it’s not. In this detailed article, we show you how to create a WordPress child theme and the techniques you need to easily customize a WordPress child theme.

Before you begin, you may want to check this article explaining the pros and cons of a WordPress child theme.

How WordPress child theme works

WordPress Child theme works with the help of the parent theme. WordPress loads the child theme first and looks for the required template files in the child theme. Whenever it can’t find a required template file in the child theme, it falls back to the parent theme.

For example, if you wanted to change the footer, you will have to create a footer.php file inside your child theme directory. WordPress will load that footer.php file instead of the parent footer.php file.

You can create a child theme that work’s on its own. But that’s not what child themes are for.

Creating a WordPress child theme

The minimum requirement of a WordPress child theme is a single directory and a stylesheet file called style.css. You will also need a functions.php file to properly load the parent style.css file and add your custom PHP stuff.

A child theme may also contain a file called screenshot.png which is a preview of the theme that appears in the WordPress dashboard themes page.

Get started by creating a new directory in your themes folder located inside your wp-content directory. WordPress recommends that you append -child to the end of your directory name. Avoid spaces in your child theme directory name. Errors may take place if you do so. Here, we are creating a child theme of twentysixteen, the default WordPress 4.4 theme. We have named our directory twentysixteen-child.

Next step is to create the child themes stylesheet file. This stylesheet must begin with a header section containing the following information

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
  • Theme Name: Name of your child theme. Including child to the end will make it easy to identify in the admin theme area.
  • Template: The name of your parent WordPress theme directory. We are using WordPress twentysixteen theme as the parent theme, so for us, it is twentysixteen.

Every child themes style.css file must contain the above two options in the header section. The header section may also include other information but they are optional. You can check out the complete list of available header file options at codex.wordpress.org/File_Header.

Next, you need to load the parent themes style.css file. To do this you need to add a little bit of PHP code in your child themes functions.php file. So create a functions.php file in your child theme directory.

It’s a good practice to load the parent theme style.css file. The recommended way to add stylesheets in WordPress is by using wp_enqueue_scripts hook. Inside the callback function, we use wp_enqueue_style to enqueue the scripts we need, in this case, the parent themes style.css file.

Add the following lines of code to your child themes functions.php file inside PHP tags.

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

More information about actions is available here.

The above code will tell WordPress to load the parent themes style.css file. If your parent theme uses other stylesheet files, then you will  need to add them using the wp_enqueue_style method.

Notice how we are using theme_slug before the function name. You should change this to your unique theme name.  This prevents name collision.

At this point, you have created your very first WordPress child theme! It’s now available for use in your WordPress dashboard theme options page.

Add custom style to child theme

All custom style to child theme can be applied using the child themes style.css file. The child themes stylesheet file loads after the parent theme’s stylesheet file. This means you can override most styles using the same selector used in the parent theme. Use tools like Chrome Developer Tools to find the CSS selector. In the example below, we are changing the site title color to match our branding.

.site-branding .site-title a {
    color: #becc7a;
}
WordPress child theme

Customizing template files

You are not limited to CSS. You can customize entire template files if you want. Any template specific file that you create in your child theme will replace the corresponding parent theme template file.

Let’s say you want to customize header.php file. Copy header.php of the parent theme to your child theme directory and proceed from there. This way, you won’t have to start from scratch. WordPress will load the child theme header.php file from now on and ignore the parent theme header.php file.

You are not limited to basic template files. Child themes can have their own custom page template files too. All page template features available in parent themes are available in child themes.

Detailed information on WordPress template hierarchy is available here and information on WordPress page templates is available here.

Pluggable Functions

If you are working with a theme that’s meant to be a parent theme, then most of the parent theme functions will be pluggable. There is nothing special about a pluggable function. They are ordinary functions wrapped inside a PHP check.

if ( ! function_exists( 'slug_some_function' ) ) {
    function slug_some_function() {
        // do something
    }
}

The child themes functions.php file loads before the parent theme’s functions.php file. So, any function in your child theme will override the corresponding parent theme function if it is pluggable.

Note that you can’t define the same function twice. If you try to override an unpluggable function, you will end up with a critical error.

Template Directory vs Stylesheet Directory

While using a child theme, the following function always points to the parent theme.

get_template_directory()

If you need to include some files which reside in your child theme directory, you will have to use the following function.

get_stylesheet_directory()

Use the later function in a parent theme if you need a child theme to override a file. If you always want to a file to load from the parent theme, then use the earlier function.

Customizing content using WordPress Filters

Some themes may choose to ignore pluggable functions in favor of WordPress filters. Filters provide similar functionality, but they operate differently. Filters are functions that WordPress passes the data through. You can hook to filters to customize the data if you want. You can pass the data through multiple filter functions.

For example, the twentysixteen theme passes the author avatar size through a filter. We can use it to change the author avatar size.

add_filter( 'twentysixteen_author_avatar_size', 'theme_slug_author_avatar_size' );
function theme_slug_author_avatar_size() {
    return 64;
}

The WordPress core makes heavy use of filters. To learn more about filters, visit the official document at this link.

Customizing content using WordPress action hooks

Think of WordPress action hooks as event handlers. You attach a function to a hook and when the action takes place, all associated handlers, i.e. the functions attached to it runs according to the priority set.

WordPress themes rely on action hooks to do all sorts of stuff like setting up the theme settings, rendering custom CSS and JS code etc. Maybe your parent theme is using an action hook to render some content. If the content is passed through a filter, then you can use the filter to customize the content. But, if the filter is not present, then you will have to remove the parent theme action first and render your own content using the action hook.

A common action hook that all themes rely on is the after_setup_theme. Themes use it to setup theme settings like  auto title tags, navigation menus, HTML 5 support etc. The following code removes the twentysixteen setup function and uses a new child function to setup the theme.

Note that you can’t remove an action before it has been added.

add_action( 'after_setup_theme', 'theme_slug_setup', 0 );
function theme_slug_setup() {
    remove_action( 'after_setup_theme', 'twentysixteen_setup' );
    // setup child theme
}

Child themes function.php file is run first. This means if we try to remove the parent setup function using remove_action directly, it won’t work. It’s because the parent function does not exist.

Since the setup is attached to the after_setup_theme action hook, we are attaching our own function to that hook. We are setting the priority to 0 (zero) as we want our function to run first.

The action hooks are a core part of how WordPress works. More information on action hooks is available at this codex link and list of action hooks is available at this codex link.

Customizing Shortcodes

Many themes come with shortcodes. Sometimes, you may want to override one of those. This can be easily done using the remove_shortcode WordPress shortcode API function. You will have to make use of action hooks inside the child theme if you want to remove parent theme shortcode.

In the following example, we are removing a shortcode named foo using the init action hook. We are also adding the shortcode back to render our own content.

add_action( 'init', 'theme_slug_remove_shortcode_foo' );
function theme_slug_remove_shortcode_foo() {
    remove_shortcode( 'foo' );
    add_shortcode( 'foo', 'theme_slug_shortcode_foo' );
}
function theme_slug_shortcode_foo() {
    return 'foo bar baz';
}

Detailed information on shortcodes is available at this codex link.

Conclusion

WordPress child theme is a wonderful concept. You get all the benefits of the parent theme, safe updates and all the customization that your heart desires. You don’t always need them, but when needed they get the work done.

If you want to take your WordPress child theme development skills to the next level, then take a look at some powerful theme frameworks like Genesis. Using such frameworks, you can create high-performance WordPress themes in a fraction of a time.