Using WordPress Child Themes

Posted in WordPress
Tags: , ,

Any WordPress theme can act as a parent theme.

If you’re using a third-party theme, and want to tweak it for your own project, it’s a much better practice to use a child theme than to hack the main theme, which exposes you to the risk of losing your changes when you update the theme to future versions.

To create a child theme, create a new theme, and at the beginning of its style sheet, add:

The important lines are  these two:

The first line specifies the template, which tells WordPress that this a child theme and that its parent is the Twenty Fourteen theme. You must use the name of the parent theme’s folder here and not the name of the theme (so above I used ‘twentyfourteen’, not ‘Twenty Fourteen’).

The second line imports the stylesheet from the parent theme, so all of the parent theme’s styling will be activated in your child theme. You then add your own styling below the @import declaration. This means that the styling from both themes will be used, but, where a declaration exists in both style sheets for the same element, the child theme’s CSS will prevail because of the cascade.

A child theme can consist of a style sheet and nothing else if you like, in which case all you’ll use it to do is override some of the parent theme’s styling. Alternatively, you can add extra template files and/or functions file.

A better practice for importing your parents styles is to enqueuing the parent theme stylesheet by adding wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php:. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.

Template files

The way WordPress uses template files in parent and child themes is very simple. When a given page (or post, or any content type) is being displayed, WordPress will use the most relevant template file from either the parent or the child theme according to the template hierarchy.

If it finds two versions of the same template file, it will use the one from the child theme. This means that your child theme’s template files will override the parent theme’s template files in two scenarios: if your theme contains a template file that’s higher up in the hierarchy than those in the parent theme, or if your parent and child theme both contain a version of the required template file.

Overriding parent theme functionality

As well as overriding the CSS and/or template files in a parent theme, you can use a child theme to override the functionality in the parent theme, or add extra functionality.

Unfortunately, the functions files in parent and child themes don’t interact like style sheets do. In fact, they work in the opposite way. WordPress calls the functions from your parent theme after those from your child theme, meaning they can override the child theme’s functions.

To overcome this, you can either set the priority of a function in your child theme to the relevant hooks or in the parent theme by making your functions ‘pluggable’.

Using priority to override parent theme functionality

To activate each function that you add in your child theme, you’ll need to attach it to an action hook or filter hook using add_action() or add_filter(). The add_action() and add_filter() functions each have three parameters:

In most cases, just the first two parameters are used (and are required), but you can use the optional $priority parameter to override a function in the parent theme with a function in your child theme. The higher the priority, the later it loads. The default is 10, so if the parent theme doesn’t specify a priority, you simply set the priority in your child theme to a number that is higher than 10.

Use pluggable functions to permit child theme override

As WordPress passes the function in the parent theme after those in your child theme, you can code your parent theme’s functions so they check for a function with the same name in the child theme and if one exists, the parent theme function isn’t passed. You do this with a straightforward conditional statement:

If no function with the same name has already been passed (either in the child or, the parent), the function will be passed. But if WordPress has already encountered a function with this name, it will ignore the pluggable function.

To make this work, you simply create functions in your child theme with the same name as those in your parent theme, which you wish to override.

Note: This will only work if you are creating your own parent theme. Don’t be tempted to edit the functions file in a third-party parent theme to make theme pluggable.

Leave a Reply

Your email address will not be published. Required fields are marked *

*