Using Action Hooks in WordPress Child Themes

In this post we’ll review how to write a PHP function and go over the basic idea of how you can use Action Hooks in your WordPress Theme. We’ll take a look at a practical example of injecting a Welcome Blurb into your Theme without touching the existing code and we’ll also look at how to remove existing content being injected into Theme Hooks.

Packing Up A Function

Action hooks are in a lot of WordPress Themes nowadays. There’s a good reason for that but you’re probably wondering what the big deal is right? They’re such a big deal because firstly, they’re incredibly easy to use and secondly, because they’re extremely powerful.

If you want to get started with them we’re going to have to take a look at how to write a PHP function again. Don’t worry, we’ll keep it pretty simple.


function pretty_basic() {

   // This is a PHP comment.

   // PHP "stuff" goes here.

}

function still_pretty_basic() { ?>

   <!-- HTML comment now -->

   <!-- Notice how I "broke out" of writing PHP? -->

   <!-- I added closing and opening PHP tags just inside the curly braces -->

   <?php // I can even write more familiar-looking PHP here ?>

<?php }

So that’s how you write a PHP function. It’s pretty easy. It’s a little package of “stuff” like more PHP or HTML that you can write in 1 place—like your functions.php file—and call in another place like so:


   <?php pretty_basic() ?>

   <?php still_pretty_basic() ?>

You’ve seen the same thing before with WordPress functions like wp_list_pages() or the_content(). These functions are packed with “stuff” deep in the bowels of the WordPress core and output wherever they appear in your template files.

The Basic Idea Behind Action Hooks

A lot of really smart theme developers have started adding what are essentially empty functions to their themes ready to be filled up with stuff. We call these Action Hooks. I first noticed them in the Tarski theme and Tarski theme developer Benedict Eastaugh does a really good job of explaining why you’d want to use them and how to add them to your theme. But you’ve probably already seen them before.

WordPress Themes use a pair of default hooks called wp_head() and wp_footer(). If you know what those are you know what we’re doing here. Those two function calls are for adding “stuff” to your WordPress theme without editing the template.

In a nutshell here’s what Action Hooks will mean to you if your favorite theme uses them: you can add any content you like—extra WordPress functions, plugin calls, singing and dancing jQuery-powered sliders—simply by adding your function to an existing action hook. You won’t have to edit the original template files. And your additions will be safe from any upgrades the theme author makes.

Adding Content To An Action Hook

Let’s do something practical we’ll add a “Welcome To My Blog” blurb just below the header of the Thematic Theme using the Thematic Action Hook, thematic_belowheader(). Place the following code snippet in your Child Theme functions.php file.


// First we make our function
function childtheme_welcome_blurb() {

// We'll show it only on the HOME page IF it's NOT paged
// (so, not page 2,3,etc.)
if (is_home() &amp; !is_paged()) { ?>

<!-- our welcome blurb starts here -->
<div id="welcome-blurb">
<p>Welcome to <?php bloginfo('name'); ?>.</p>
</div>
<!-- our welcome blurb ends here -->
<?php }

} // end of our new function childtheme_welcome_blurb

// Now we add our new function to our Thematic Action Hook
add_action('thematic_belowheader','childtheme_welcome_blurb');

Make sure you read the comments in the code snippet. It’s easy as cake! Want to add something to a WordPress Theme without touching the files and making a headache for yourself when it comes time to upgrade? Just find out where the Action is!

Removing Existing Content From Actions

In some themes, like Thematic, some of the Action Hooks are already partly filled up with stuff. This might look a little unusual if you’ve never seen it before but it’s insanely powerful. You can basically unplug parts of your theme.

Here’s the basic syntax for removing content from your Theme that’s already being hooked-in.

// Unhook default Thematic functions
function unhook_thematic_functions() {
    // Don't forget the position number if the original function has one
    remove_action('thematic_hook_name','thematic_function_name',postitionnumber);
}
add_action('init','unhook_thematic_functions');

And as an example, here’s a code snippet that will remove the entire main navigation menu from your Thematic Theme. Just pop it into your Child Theme functions.php and let it rip.

// Unhook default Thematic functions
function unhook_thematic_functions() {
    // Don't forget the position number if the original function has one
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','unhook_thematic_functions');

Combine these 2 concepts with a hooked-up WordPress Theme and you can do practically anything.

How To Modify WordPress Themes The Smart Way

This post is part of the series How To Modify WordPress Themes The Smart Way.

  1. WordPress Child Theme Basics
  2. Modular CSS in WordPress Child Themes
  3. Using Filter Hooks in WordPress Child Themes
  4. Using Action Hooks in WordPress Child Themes

43 thoughts on “Using Action Hooks in WordPress Child Themes

  1. Hi Ian,

    great post , but i m a bit confuse on this post and the filter post , is there any good compare when you should use filter and when using action is better ?

    • It depends on what the Theme author has done. Sometimes they’ll have made something editable with Actions, sometimes with Filters. The choice has been made for you and you shouldn’t have to decide.

  2. Pingback: links for 2009-05-25 | Links | WereWP

  3. Ian, I’ve learned so much from you!
    You have a talent for breaking things down in a manner that makes sense to me.
    Thanks for this.
    a

  4. Pingback: Using Action Hooks in WordPress Child Themes | Free Wordpress Themes - CityScape

  5. Pingback: Using Action Hooks in WordPress Child Themes - MyClickSense.com

  6. gahlord says:

    thanks for your great framework and series.

    I used the code on this page and the output on the front-end is as-described. But the admin side is now throwing a lot of :

    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/thoughtfaucet/functions.php:2) in /wp-includes/functions.php on line 698

    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/thoughtfaucet/functions.php:2) in /wp-includes/functions.php on line 699

    I probably just copied something out wrong maybe?

  7. Pingback: WordPress Weekend Resources - May 29, 2009 | Theme Lab

  8. David Hedley says:

    Hi Ian,
    Excellent post, though I’m still trying to get my head round this!
    I want to insert 2 x fixed width divs inside #header of Thematic 0.9.5, moving all your header content into the left div and creating some custom content in the right div. Not sure whether I should be unhooking or creating a new action hook from scratch and somehow referencing some of your content in header-extensions.php?!?! Could you possibly offer any advice or instructions?
    Any help would be appreciated.
    David

  9. Pingback: An Introduction to WordPress Action Hooks — Nathan Rice

  10. Pingback: Understanding Action Hooks In Wordpress – Raymond Selda | Freelance Web Designer

  11. Pingback: A Guide to the Actions API — WPCandy — WordPress Themes, Plugins, Tips, and Tricks

  12. Pingback: WordPress Weekend Resources – May 29, 2009 | GreyBlogs.com - Themes

  13. Pingback: Dan Cole » How do WordPress Hooks Work?

  14. Pingback: New And Comprehensive Wordpress 2.8 Tutorial and Hack Toolbox | Graphic and Web Design Blog - Inspiration, Resources and Tools

  15. Pingback: New And Comprehensive Wordpress 2.8 Tutorial and Hack Toolbox - Programming Blog

  16. Trevor says:

    Thank you for writing this awesome post! It is really excellent writing, and it helped me understand how to take control of the Hybrid theme framework. I can’t wait to read the rest of the series!

    • Hey Ian,

      I find it a nuisance to have to find the position number of every hook when I’m removing it from my actions. If you could please document each position beside the function in the template files (e.g. index.php) it would be helpful – rather than digging through helper and extension files when I’m remote editing.

      Cheers
      Jacob

  17. Pingback: Structure du framework Thematic | Eiffair

  18. Pingback: Da importância de conhecer bem o WordPress » Comunidade WordPress-BR

  19. Pingback: Once and for all – the difference between Filters and Hooks – Open Source Design - fall09

  20. Pingback: 10 Tutorials to Take Your WordPress Development Skills to the Next Level

  21. Pingback: typoglyphic.com » 10 Tutorials to Take Your WordPress Development Skills to the Next Level – designm.ag

  22. Pingback: 10 Tutorials to Take Your WordPress Development Skills to the Next Level | Web Design Byte

  23. Pingback: Wordpress Hooks: Actions and Filters « My Graphic Friend's blog

  24. Pingback: Understanding Action Hooks In Wordpress « WordPress Theme Mods

  25. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  26. Pingback: Da importância de conhecer bem o WordPress

  27. Pingback: Get Ahead(er) – Open Source Design - Spring10

  28. Pingback: A Guide to the Actions API « Basic Web Design

  29. Pingback: Create Wordpress Theme – I

  30. Pingback: Tutorial: Manage Custom Fields With Custom Write Panels – Open Source Design - Spring10

  31. Pingback: How Does the Brain Use So Much Energy? Not in Electrical Signals. | GfCS

  32. Howdy Ian,

    Could you direct me to where I would find a reference of the available hooks for the TwentyTen theme? I want to stop specific parts of the theme from being called and I can’t find a reference for the exact names of the hooks available anywhere. One of the items I want to remove altogether is the Access (or Nav Menu) section of the theme, just like the below example you have for Thematic:

    remove_action('thematic_header','thematic_access',9);

    • Check out the functions file in Twenty Ten. It’s really well documented with everything you need for Child Theming.

      That said, there aren’t any hooks for removing elements in Twenty Ten like you’d find in Thematic.

      • Thank Ian. I guess it’s back to Thematic for me then! I was hoping they would really try to do more with the 2010 theme, but aside from the header and background sections it seems just as limiting as Kubrick was. Maybe I’m missing something though. It’s been known to happen. :)

  33. Christian Andersson says:

    Hi there!

    I’m configuring a child theme, but have run into an issue. I’m trying to remove the blog title and replace it with my own styled title. In my childtheme’s functions.php I have added:

    function unhook_thematic_functions() {
    // Don’t forget the position number if the original function has one
    remove_action(‘thematic_header’,’thematic_blogtitle’,3);
    remove_action(‘thematic_header’,’thematic_access’,9);
    remove_action(‘thematic_header’,’thematic_blogdescription’,5);
    }
    add_action(‘init’,’unhook_thematic_functions’);

    The thematic_access gets deleted as wanted but the blog title stays… I use the childtheme “thematicfeaturesite”. Any idea?

  34. I am still new to this…
    Questions: in your sample you list two items to remove: ‘thematic_header’,’thematic_access’, why are they both required? and what does the ‘position number’ refer to, where can I find a ‘position number’, is it the line number of one of those two items (I could not detect a ‘position number in the ‘thematic’ nor in the ‘twentyten’?

    I am trying to write my modified widget areas on my ‘twentyten’ child theme called ‘360’, would that be the correct code:
    function unhook_twentyten_widgets_init() {
    remove_action(‘twentyten_widgets_init’, ‘twentyten_sidebar’);
    }
    add_action(‘360_widgets_init’, ‘register_sidebar’);

    then continued with the modified widget code where I replace all ‘twentyten’ with ‘360’?:

    function 360_widgets_init() {
    // Area 1
    register_sidebar( array (
    ‘name’ => __( ‘Primary Widget Area’, ‘360’ ),
    ‘id’ => ‘primary-widget-area’,
    ‘description’ => __( ‘The primary widget area’, ‘360’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => “”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    Just trying hard to understand it :)
    Thanks.

  35. James says:

    Hi Ian I am using your Thematic but I get stuck when trying to add Adsene below post’s title or above the first paragraph of the post, can you give me clues on this matter?

    Thank you

  36. CKN says:

    Hi, Ian.

    The elaborate system of action hooks you have set up in Thematic looks really powerful. But I’m new to this, and still a bit confused. In short: What’s a position number, and where can I find it?

    Thank you.

Comments are closed.