Theme Development

Override Parent Theme Functions

Child themes is functionality that allows you to inherit the templates and functions of another theme. Using the child theme to can inherit all the styling of the parent to make small changes to the design.

A child theme is the easiest way to modify an existing theme that you didn't develop. If you make changes to the parent theme directly and the theme developer updates the theme then you will lose all your changes.

When you inherit a parent theme you only need to include the style.css file and the functions.php file. The other theme files are inherited from the parent theme. When you add a template file to your child theme this will override the parent theme files, but this doesn't happen to the functions.php file. Both the functions.php file of the child and parent themes will be loaded into the application.

The child theme functions.php file is loaded before the parents functions.php file, this means that you should be able to override any of the parents theme functions with your own functions. But you are only able to do this if the parent theme is setup correctly.

Consider this example of a parent theme having a function to display social links for the website but only has Facebook link.

Parent Theme

<?php
function display_social_links()
{
     ?>
         <a href="http://www.facebook.com">Facebook</a>
     <?php
}
?>

In all your theme files you have access to display the social links by using the above function.

But in your child theme if you want to override this function so that you can include a twitter link you can do this will a number of options. One option is to create a new function, but then you will have to change all your theme files with this new function or another option is to override the existing function so you don't have to change the other theme files.

To override the parent function you need to add the same function into your child themes functions.php, then you can add your new Twitter link.

Child Theme

<?php
function display_social_links()
{
     ?>
         <a href="http://www.facebook.com">Facebook</a>
         <a href="http://www.twitter.com">Twitter</a>
     <?php
}
?>

I'm sorry to say but this code will break your website, you will get a function is already defined error in your parents theme functions.php file. This is because the child theme function doesn't override the parents theme function but will just define this function before the parents file is defined. The way that you will be able to override this function is if the parent function is wrapped in a IF statement of function_exists.

Parent Theme

<?php
if( !function_exists('display_social_links') )
{
    function display_social_links()
    {
        ?>
            <a href="http://www.facebook.com">Facebook</a>
        <?php
    }
}
?>

This code means that if the function display_social_links hasn't been defined then you are able to define it with this function inside the IF statement. As your child theme functions are defined before the parent theme then if the function display_social_links is defined in the child theme then the code will not go into this IF statement and you avoid the function is already defined error.

This means that you are only able to override parent theme functions if they are wrapped in a function_exists IF statement.

<?php
if( !function_exists('display_social_links') )
{

}
?>

If the function in the parents theme does not have this IF statement then the developer has intended for you to not be able to override this function.

Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days