• Home  / 
  • WordPress
  •  /  Using Action Hooks to Make an Advanced Parent Theme

Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

Using Action Hooks to Make an Advanced Parent Theme

In this article I’m going to show you how to add action hooks to a WordPress theme, to create an advanced Parent Theme.

The benefit of using parent and child themes is that when the parent theme gets updated, any changes you have made to the child theme will be preserved.

For an introduction to child themes, read the WordPress Codex entry on child themes.

The problem is that many people don’t use child themes the right way. If they want to add an element to their website’s header, they will copy the header.php template from the parent theme folder into the child theme folder, and add the new element directly into the child theme’s header.php

This method defeats the whole purpose of child themes, as now any updates to the parent theme’s header.php will not be carried through to the child theme.

So the best way to make changes to your child theme is through the functions.php file. By writing a simple function and applying it to the parent theme’s action hooks, you can easily customise a child theme without modifying any of its template files.

Adding a Facebook Like Button

Let’s go through a real example, where we will add a Facebook Like button to a child theme using a custom action hook.

Here’s a section of the parent theme’s header.php

<body>
            <header>
                Header Content...
            </header>
            <section id="content" role="main">
                <div class="page-content">
                    Page Content...

Let’s say we want to add the Like button at the top of the .page-content area. We need to add an action hook here, then we will be able to write a function, and hook it into the template at this point.

<body>
            <header>
                Header Content...
            </header>
            <section id="content" role="main">
                <div class="page-content">
                <?php dj_before_page_content(); ?>
                    Page Content...

So I’ve added the hook dj_before_page_content (I’ve used my initials as a prefix. You may want to use something more meaningful, such as your theme name.)

Before we can use this hook, we need to ‘create’ it by adding the following code to the functions.php file of our parent theme.

function dj_before_page_content() {
    do_action('dj_before_page_content');
}

Now in our child theme’s functions.php, we can write a function for displaying the Like button:

function dj_add_fb_like() { ?>
     <fb:like href="" send="true" layout="button_count" width="160" show_faces="false" font="lucida grande"></fb:like>
     <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=153173954756442&amp;xfbml=1"></script>
<?php }

And all that remains is to hook this function into our parent theme’s newly created action hook. Add the following to the child theme’s functions.php

add_action('dj_before_page_content', 'dj_add_fb_like');

That’s it! The Facebook Like button will be displayed before your page content and any changes to header.php will be preserved in your child theme.

You can add as many action hooks as you like to a parent theme, to give child theme developers more opportunities to customise their themes in a non-destructive way.

About the author

Dan Johnson

Dan used to be a WordPress developer at WDFS, but now he has gone off to pursue his passion for art, and he blogs about making a living from creativity at Right Brain Rockstar

Niall - a couple of years ago

Useful tips and it’s in HTML5. I’m still learning WP theme development so this is really handy as I’m playing around with child themes at the moment and yes, I’d probably have copied the header.php lol!

Mr Digital Coaching - a couple of years ago

One thing i dont understand;
If the header and functions file of the parent theme get modified for this, won’t they be overwritten when the parent theme is updated?

    Ben Hunt - a couple of years ago

    You would use a child theme with its own functions.php file. Any *additional* functions go in that file.

Newbie - a couple of years ago

Sorry, but I still dont get it? Ive been searching for tips on how to add buttons etc without modifying the parent theme files, and this description was almost spot-on, thanks! However, during a theme update, the parent files will be overwritten. The first two steps in your description include adding code to the parent header.php and functions.php. Why will they not be lost upon update?

    Dan - last year

    I know this is an old comment, but incase anyone finds this. This tutorial is geared towards parent theme developers. When using a well developed parent theme, hooks will already be included for you to hook into with a child theme.

    If the parent theme you’re using doesn’t include any hooks, it would indeed be pointless to add hooks into it as they would be overridden with a theme update.

Comments are closed