If you’ve ever needed to make tweaks to a third party theme, or you’re using a theme framework, you’ll be familiar with child themes.<\/p>\n
They’re a powerful feature of WordPress, giving you the flexibility to make customizations to any parent theme without losing them when the theme is updated. I use them to make edits to third party themes, or with the framework theme I’ve developed myself.<\/p>\n
However, it can sometimes\u00a0be unclear whether WordPress will be using the code from your parent or your child theme. When it comes to template files, stylesheets and functions files, it can be tricky to work out what’s being used when.<\/p>\n
In this post, I’ll demystify all this. I’ll look at each type of file and identify when WordPress will use the code from your parent theme and when it’ll use the code from your child theme.<\/p>\n
Both your parent theme and your child theme will have a stylesheet, because no theme will function without a stylesheet.<\/p>\n
In your child theme, your stylesheet will contain a line of code that tells WordPress that this is a child theme and which is the parent theme.<\/p>\n
Here’s the theme I use for my website, which is a child theme. It opens with some commented out text that tells WordPress what’s going on with the theme:<\/p>\n
Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Note the line that begins WordPress will use theme template files from both the child theme and the parent theme (more of which shortly). But if you want to pull in styling from your parent theme, you have to enqueue it in your child theme’s functions.php<\/em> file.<\/p>\n Add the following to the functions.php<\/em> file in your child theme. If your theme doesn’t have that file, create one, making sure you add an opening Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The code above assumes that the parent theme has only one stylesheet; if yours has multiple stylesheets, then you’ll need to enqueue each of them.<\/p>\n Once you’ve done that, the styles from your parent theme will be used on your site. If you’re also adding styles to your child theme, you’ll need to enqueue that stylesheet too. The code below ensures that if there’s duplication, the styles from the child theme will override those from the parent theme:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This enqueues the parent theme’s stylesheet first, followed by the child theme’s. Because the child theme’s styles are pulled in last, they will override those from the parent theme if you add styling for an element that already has styling in the parent theme. This also sets the parent theme’s stylesheet as a dependency for the child theme’s stylesheet, ensuring the child theme stylesheet can’t be loaded unless the one from the parent theme already has.<\/p>\n Note: you may have seen a line in the child theme’s stylesheet used for this in the past. This is no longer best practice because it slows down the loading of stylesheets – you should use the functions file instead.<\/em><\/p>\n Now let’s take a look at theme template files. Which WordPress uses to display a page on your site will depend on two things: the template hierarchy<\/a> and the fact that you’re using a child theme.<\/p>\n So let’s say you’re viewing the ‘WordPress’ category archive page in your site. WordPress will use the template hierarchy to find the most relevant file:<\/p>\n WordPress will look for these in both your parent and child theme. When it comes across the first file in the hierarchy it will use it, whether it’s in the parent theme or the child theme.<\/p>\n There’s one exception: when the most relevant template file has a version in both the parent and child themes, it will use the file from the child theme, and ignore the one from the parent theme. This is one of the most common uses for child themes.<\/p>\n Here are a few examples, using the category example above:<\/p>\n So if you want to override a template file in your parent theme, create a duplicate of that file in the child theme with the code you want.<\/p>\n The final kind of file affected by child and parent themes is the theme functions file. This also applies to functions you add to your themes via include files.<\/p>\n The functions from your child theme will load before those from your parent theme, assuming they’re attached to the same hook. This is the opposite from stylesheets and template files and means that if you’re not careful, the functions in your parent theme could override those in your child theme.<\/p>\n It’s important to note that writing a function in your child theme with the same name as one in your parent theme may cause an error. WordPress doesn’t like it when two functions have the same name. The exception to this is when you use a function in your child theme to override a pluggable function in your parent theme.<\/p>\n You can recognize a pluggable function because it will be wrapped in a conditional check for another function with the same name. In other words, the parent theme is checking whether a function with the same name has already been fired via the child theme. If so, it doesn’t run the function in the parent theme. So if your parent theme has pluggable functions, you can easily override these in your child theme.<\/p>\n Here’s an example of a pluggable function from my parent theme, compass framework:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n In a child theme I can write another function with the same name which will override it:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This will be run instead of the function from the parent theme, because of that When I say that the functions from your child theme will run before those from your parent theme (when attached to the same hook), I’m assuming that they don’t have priority assigned to them.<\/p>\n Priority is the third parameter of the If you don’t apply priority to a function, WordPress gives it the default priority of Let’s take the pluggable function I used before, which has no priority parameter for the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This will add another section with the name of the post author and a link to their archive page, after the date.<\/p>\n If a function in your parent theme isn’t pluggable, but you want to write a function in your child theme to override it, you can still do so. You’ll need to unhook the function from the parent theme from the hook used to fire it, which means it then won’t fire. You then write a function with a different name in your child theme to override it, and hook that to the same hook.<\/p>\n Let’s imagine my pluggable\u00a0 Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n To override it, first you unhook it using the template<\/code>. This tells WordPress that this is a child theme and that the theme in the compassframework<\/em> folder is the parent.<\/p>\n<?php<\/code> tag at the beginning of the file (you don’t need to add a closing tag at the end).<\/p>\nTemplate Files<\/h3>\n
\n
\n
Functions<\/h3>\n
Pluggable Functions<\/h4>\n
if<\/code> check. You don’t need to use add_action()<\/code> in your child theme to fire the function, as the add_action()<\/code>\u00a0function in the parent theme will do that for the one from your child theme instead. This is because it’s outside that conditional check.<\/p>\nUsing Priority to Run Parent Theme Functions First<\/h4>\n
add_action()<\/code> and add_filter()<\/code> functions. The higher the number you use for this, the later the function will fire. So if a hook has four functions attached to it, with priority 5<\/code>, 10<\/code>, 20<\/code> and 30<\/code>, then they will fire in ascending numerical order. It doesn’t matter what numbers you use; I tend to use round numbers so there’s a gap in case I need to insert another function at a later date.<\/p>\n10<\/code>. So if there’s a function in your parent theme with no priority attached, and you want to run another function on the same hook from your child theme, and have it fire after the one from the parent theme, just give it a priority higher than 10<\/code>.<\/p>\nadd_action()<\/code> function. If you want to run some other code immediately after it from your child theme, use priority, like this:<\/p>\nUnhooking Functions<\/h4>\n
compass_posted_on()<\/code> function in the example above isn’t pluggable. In the parent theme, it looks like this:<\/p>\nremove_action()<\/code> function, which you hook to the wp_head<\/code> hook:<\/p>\n