Modify a child theme's functionality using action hooks

When working with a WordPress child theme, you may need to change the functionality of the theme without touching any code in the parent theme. This could be as simple as removing functionality, moving a function to a different hook, or adding your own custom functionality.

In this tutorial we're going to move a function to a different hook. One such example would be to move the navigation (assuming it's added via a hook) from above the header to below the header, changing the overall appearance of our theme.

Most themes have custom hooks spread throughout the theme that were added with the do_action function. Having these custom hooks available to us in our themes make it very easy to make some fast customizations.

remove_action() & add_action()

We'll use WordPress' remove_action and add_action functions, first removing the parent theme's navigation, and then adding it back into our child theme at the new location.

If you find the original action hook in the parent theme that added the functionality, it might look something like this:

add_action( 'my_theme_before_header', 'my_theme_do_nav' );

In the example above we can see there is a function called my_theme_do_nav. This function might include the code to retrieve the WordPress menu and some other custom code.

This function is then being loaded on a custom hook called my_theme_before_header. This custom hook would naturally appear in the parent theme, somewhere before the header.

Removing the navigation

By copying and pasting the same code into the child theme's functions.php, replacing add_action with remove_action, we can remove the entire navigation. The first and second parameters must match exactly.

remove_action( 'my_theme_before_header', 'my_theme_do_nav' );

Adding the navigation back in

Now that the navigation has been removed, we'll add it back in, but after the header. All we need to do is change the hook in the first parameter to reflect our new location. Let's assume there's a custom hook in the parent theme called my_theme_after_header.

add_action( 'my_theme_after_header', 'my_theme_do_nav' );

Child functions are loaded before the parent's

Stopping there would likely yield no results. One important thing to note is that the child theme's functions are loaded before the parent theme's functions. We need to create a new function and load it on to a suitable action hook, so that our remove_action and add_action are executed properly.

The template_redirect() action hook is one such suitable hook. The WordPress Codex states that it is run before the determination of the template file to be used to display the requested page. By using template_redirect, we can be sure our actions will overwrite the parent theme's actions:

function my_theme_shift_navigation() {
    remove_action( 'my_theme_before_header', 'my_theme_do_nav' );
    add_action( 'my_theme_after_header', 'my_theme_do_nav' );
}
add_action( 'template_redirect', 'my_theme_shift_navigation' );

And that's it. The simple function above first removes the navigation from the parent theme, then adds it back in at a new location, all without touching the parent theme's code.