WordPress Child Themes’ has the functionality of inheriting styles and functions from the parent theme. By using a child theme, you can inherit all the design (CSS) settings and functionality from the parent theme and make changes as you wish, while leaving the parent theme untouched.
Using such a child theme is the most convenient way to make changes to a theme that you didn’t develop yourself. If you make changes directly in the parent theme and the theme developer releases an update to that theme, applying the update will overwrite the changes you made.
When you inherit a parent theme, you are required to add the style.css and functions.php in the child theme. The other template files of the theme are inherited from the parent theme. If you add a page template to the child theme, it will override the parent theme’s page template.
For example, if you copy the footer.php file from the parent theme to the child theme, only the content found in the child theme’s version will load. The same applies to single.php, tag.php, and so on… However, this override does not apply to the functions.php file. This file is loaded from both the parent and child themes.
The functions.php file in the child theme is loaded before the one in the parent theme. This implies that theoretically, you can override any function present in the parent theme, but you can only do so if the parent theme is written properly…
Example – Overriding a Function in the Parent Theme
Consider the following code as a function in the parent theme that displays company links, and in this case, it displays only a link to Facebook.
<?php
function display_social_links()
{
?>
<a href="http://www.facebook.com">Facebook</a>
<?php
}
?>In all template files of the theme, you can display the company’s social links using this function. Let’s say that in the child theme, you want to override this function to add a link to Twitter as well. You can achieve this in several ways:
1. The first option is to create a new function, but you will need to go through all of the theme’s template files and replace the existing function with the new one. I assume you understand the drawbacks of this method.
2. The second and recommended option is to override the existing function in a way that you don’t need to modify the parent theme’s template files. To override the original function, you need to add the same function in the functions.php file of the child theme and modify it according to your needs. In our case, we want to add a link to Twitter, so the new function in the child theme will look like this:
<?php
function display_social_links()
{
?>
<a href="http://www.facebook.com">Facebook</a>
<a href="http://www.twitter.com">Twitter</a>
<?php
}
?>Unfortunately, this code won’t work and will crash your website. You will receive an error because the function is already defined in the parent theme. This happens because the function in the child theme doesn’t actually override the function in the parent theme. Instead, it defines the function before the parent theme does.
Wrapping the Function in a Condition
For you to have the option to override it, the function in the parent theme needs to be “wrapped” in a condition called function_exists. In other words, the function in the parent theme should be like this:
<?php
if( !function_exists('display_social_links') )
{
function display_social_links()
{
?>
<a href="http://www.facebook.com">Facebook</a>
<?php
}
}
?>This code sets a condition that defines the display_social_links function only if it hasn’t been defined before. This means that you cannot override functions in the parent theme in this way if they are not wrapped in a condition containing the function_exists function.
If they are not wrapped in this condition, there are two possibilities: either the theme developer wrote the code incorrectly, or the theme developer intended for you not to override this function…
Do you have a better way / suggestions / ideas? Share them with us so we can all learn together… 🙂
