Home » How - To / Tutorial » Extend Your WordPress Theme With WP Child Themes

Extend Your WordPress Theme With WP Child Themes

If you’re using WordPress to build websites for yourself or your clients using bespoke themes, then being able to harness the power of child themes will take your skills to the next level.

At their most basic, using child themes will make you more efficient. By keeping the code you use for every project in a parent theme, you’ll be adhering to DRY principles. Alternatively, you could use an off-the-shelf parent theme such as Twenty Twelve, or the parent theme from a theme framework.

Child-Theme-Wordpress Extend Your Wordpress Theme With WP Child Themes

Taken further, you can use child and parent themes to create networks of sites with a core codebase, build custom themes based on third-party theme frameworks, or you can even create your own advanced parent theme for use as a theme framework. In this article, I’ll give a quick overview of the essentials of child themes and show you some more advanced techniques. You’ll learn:

  • How to use a child theme to adapt a third-party parent theme or theme framework for the needs of your project
  • How WordPress prioritises template files in parent and child themes
  • How to override parent theme functions in your child theme’s functions file
  • How to create your own parent theme for use as a framework, incorporating functions, hooks and filters for use in your child themes

Any 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 much better practice to use a child theme to do this than to hack the main theme, which exposes you to the risk of losing your changes when you update the theme to future versions.

CREATING A CHILD THEME

To create a child theme, create a new theme. At the beginning of its style sheet, add:

The first line specifies the template, which tells WordPress that this is a child theme and that its parent is Twenty Twelve. Note that you use the name of the parent theme’s folder here, not the name of the theme (so twentytwelve , not Twenty Twelve ).

Twenty-Twelve-Theme Extend Your Wordpress Theme With WP Child Themes

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 this @import declaration. This means that styling from both themes will be used. However, 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 just use it to override some of the parent theme’s styling. Alternatively, you can add extra template files and/or a functions file. You’ll then need to understand how WordPress accesses template files from your parent and child themes.

TEMPLATE FILES

The way WordPress uses template files in parent and child themes is very simple. When a given page (or post, or any other content type) is being displayed, WordPress will use the most relevant template file from either the parent or 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 your child theme’s template files will override the parent theme’s template files in two scenarios. First, if your child theme contains a template file that’s higher up in the hierarchy than those in the parent theme. And second, if your parent and child theme both contain a version of the required template file.

OVERRIDING PARENT 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. Although if all you’re only using the child theme to add extra functionality, you may be better off writing a plugin.

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.

I know this sounds like a bit of a pain; you created a child theme as that’s what you want in your site, right? Well, fortunately, there are ways to overcome this. The first method is one you use in your child theme to set the priority when attaching your functions to the relevant hooks. The second is done in the parent theme, and it involves making your functions ‘pluggable’.

USING PRIORITY

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 the 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 higher than 10.

Let’s take a look at how this works. Imagine you’re working with a child of the Twenty Twelve theme and you want to override the menu functionality as well as adding your own. This theme includes the twentytwelve_setup() function to set the theme up (including registering menus, adding featured image support and more), which is attached to the after_ setup_theme action hook. The code in Twenty Twelve’s functions file is as follows:

To override this in your child theme, you would write a function to replace the one provided by Twenty Twelve and attach it to the after_setup_theme action hook, specifying a priority higher than 10:

When WordPress encounters these functions attached to the same hook, it will fire the lower priority one first (the one from the parent theme). It will then fire the higher priority one from your child theme, meaning that it can override the function from the parent theme.

PLUGGABLE FUNCTIONS

As I mentioned, there is another method, which you can use if you’re creating your own parent themes, and that’s to make your functions pluggable.

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. If one exists, the parent theme function isn’t passed. You simply use a conditional statement:

If no function with the same name has already been passed (either in the child or, theoretically, 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 that this technique 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 them pluggable. After all, the whole point of creating a child theme is that you don’t touch the parent.

ADVANCED PARENT THEMES

So far I’ve focused on building child themes, which is the starting point for any WP developer working with parent and child themes. But you can do much more if you build your own parent themes.

For client projects I use a parent theme called Compass, which acts as a simple theme framework. It includes basic template files and minimal styling as well as a CSS reset. It also uses Object Oriented CSS (OOCSS) for layout. I can incorporate responsiveness into the parent theme without that being overridden by any layout styling added to child themes.

It includes a number of pluggable functions that can be overridden in child themes if needs be. It also includes hooks, which don’t necessarily have any functionality attached to them in the framework but can be used to add content or functionality in child themes.

For example, the theme has 12 action hooks relating to specific locations in the page layout, meaning they can be used to add content in those locations. So, the compass_footer hook can be used to add static content, loops or widget areas in the site footer. In the parent theme, it’s used to place widget areas (so long as these are populated). In child themes it can be used for much more.

To add your own action hooks, use the do_action() function, which takes the following parameters:

The $tag parameter is the unique name of the action hook, which you then use when attaching a function to that hook. You can add as many arguments ( ($args) ) as you need. These are more useful for plugin development than for creating parent themes. So, in Compass, there’s a hook called after_nav() , which is used to insert content immediately after the navigation menu:

To add content in that location in a child theme (without having to edit the template files), I then attach a function to it using add_action() :

You can also add your own filter hooks, which work slightly differently from action hooks. Instead of being used to insert content, you use them to change the way content or data is output – for example, to change the way metadata such as the date of a post is output.

By combining these techniques and using them throughout your parent theme, you can create a framework to act as a starting point for all of your projects using child themes. Example uses include:

  • Inserting content in specific places where action hooks have been created, such as the header, footer, sidebar or before or after the content
  • Adding action hooks in a template file (such as ‘front-page.php’) to enable insertion of content via the child theme’s functions file
  • Creating custom functions you can use in your child themes. For example, in Compass I have a function called compass_is_child() that checks if the current page is the child of a specified page
  • Creating filters allowing you to output data differently in your child themes to the parent theme

The big theme frameworks make extensive use of hooks. The Genesis Framework has over 50 hooks and the Thesis framework has over 40. By adding hooks to your own parent theme you can create a framework that will make your child themes more efficient and powerful, with more flexibility in terms of what you can create for your and your clients’ development projects.

Developing using child themes can boost your efficiency and effectiveness as a WordPress developer. Take this further by using the child theme’s template files and functions file to override or supplement functionality from the parent theme. Also try building your own parent theme, giving you a quick starting point for all new projects and allowing you to add a lot more to your child themes with less effort than is required when starting from scratch.

One thought on “Extend Your WordPress Theme With WP Child Themes

  1. Darrin Beckton says:

    Hiya, I am really glad I’ve found this info. Nowadays bloggers publish only about gossips and net and this is really frustrating. A good website with exciting content, this is what I need. Thanks for keeping this web-site, I will be visiting it. Do you do newsletters? Can’t find it.

Leave a Reply

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

Name *
Email *
Website

This site uses Akismet to reduce spam. Learn how your comment data is processed.