Understanding Action Hooks In WordPress

04 June 2009 ~ 36 Comments

Ever wondered what’s the real use of wp_head and wp_footer in your template files? Ever tried deleting them but feared that the sky might fall on you?

Everytime I develop a theme, wp_head and wp_footer always remained a mystery for me. It was only until last month when I started developing a WordPress theme framework that I understood their importance and coolness.

Today I’m going to show you how to define your own hooks and trigger them using action hooks.

WordPress Hooks

According to WordPress:

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion.

Hooks are basically placeholders in your template files. They sit there until you instruct them to do some task for you either by using Action or Filter hooks.

We are going to focus on triggering hooks in a theme development setting using Action hooks so let’s get started.

Theme Functions File

The theme functions file is optionally included in your theme folder and is named functions.php (if missing, simply create one). You can define your own functions here to be used in your templates so you won’t have to manually edit your template files.

As an example I’m going to install the Google Syntax Highlighter plugin and show you how to use Action hooks in your template files. Before everything else make sure you have installed and activated the plugin.

Action Hooks

Open up your theme functions file and place this code (assuming your file is blank):

<?php
//Styles for Syntax Highlighter plugin in head section
function syntax_highlighter_styles() 
{
	if (is_single() || is_page()) { /* If Post or Page */ ?>
<!-- Syntax Highlighter Styles -->
	<link rel="stylesheet" type="text/css" href="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Styles/SyntaxHighlighter.css" media="screen" />

	<?php }
}
add_action('wp_head', 'syntax_highlighter_styles', 1);
?>

We are just defining a PHP function and placing HTML inside to call our plugin’s stylesheet.

After the definition, the next step is to “hook” your function with WordPress. You do this by calling an action hook, add_action().

add_action('wp_head', 'syntax_highlighter_styles', 1);

The first parameter is the hook name in your template. The second parameter is the name of the function and the third is the priority.

Define Your Custom Hook

Now it’s time for our plugin scripts. We are going to call them from the footer but we are not going to use wp_footer. We are going to define our own hook!

Just below our first function, place this code:

//My own footer hook
function my_footer() {
    do_action('my_footer');
}

You have now created your own hook and you can add actions to it just like you did in the first function. But before you can do that open up footer.php and position your hook like so:

Note: For demonstration purposes I will remove wp_footer hook from my footer template.

<?php my_footer(); ?>
	
</body>
</html>

Now that we have a hook, let’s define a function to call our plugin scripts. Add this code in your theme functions file:

//Scripts for Syntax Highlighter plugin in footer section
function syntax_highlighter_scripts()
{
	if (is_single()) { ?>
<script language="javascript" src="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/shCore.js" type="text/javascript"></script>
<script language="javascript" src="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/shBrushAll.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php }
}
add_action('my_footer', 'syntax_highlighter_scripts', 1);

Just like we did with our first function, this will put the scripts in the custom hook that we defined.

You can also try the same thing with your analytics code.

//Analytics code
function my_analytics() 
{ ?>
Analytics code here
<?php
}
add_action('my_footer', 'my_analytics', 2);

Take note that the third parameter (priority) is 2. This will determine their order of appearance considering that the scripts function is also using the my_footer hook. You can try switching their priority to see what I mean.

Conclusion

Using hooks can greatly improve your theme development process and I urge you to use them so your themes are flexible and easy to maintain. With default hooks in your templates you can insert code without having to open up your template files. You can also define your own custom hooks if you need to.

Having this knowledge on action hooks can also help you in creating your very own theme framework.

You definitely need to check out the following:

If you have something to add regarding this article, your thoughts are always welcome and stay tuned because I will release yet another free WordPress theme framework for the community.

36 Responses to “Understanding Action Hooks In WordPress”

  1. Michael Erb 5 June 2009 at 2:27 am Permalink

    Very clearly written tutorial. Excellent information. Thanks and keep up the good work.

  2. Craig 5 June 2009 at 4:52 am Permalink

    Excellent post on a little known gem in WordPress that has a lot of power to customize your theme or framework to do anything you want. The real power is using a framework and creating your own child themes where the possibilities are endless, especially with 2.8.

    Thanks, and a you have a very nice clean minimalist theme.

    Good luck – I will defiantly be back.

  3. Marty Thornley 6 June 2009 at 3:40 am Permalink

    Raymond,

    Thank you. I have been wanting to look into using WordPress hooks for a awhile now and while I understand the basic concept, this was a great look at the whole process.

    And i had never thought of (or know that you even do this) creating your own get_footer() type hooks. That could be really powerful.

  4. Raymond Selda 7 June 2009 at 1:06 am Permalink

    Thank you for all your comments. I’m hoping that I could help in how we build our themes. Imagine building your own theme framework only once and then use it in several of your projects. This will save you a great deal of time and energy.

    This is also what Thematic, ThemeHybrid and some of the theme frameworks have been advocating. This stuff can be a slight learning curve at first but if you stick at it, you’ll realize the potential in using them.

  5. Dimas 7 June 2009 at 10:29 pm Permalink

    Raymond, great tutorial!

    I’ve actually just recently been diving into the word press “editor” section (basically, the theme source files) and have come to realize how simply everything is laid out (at least, coming from a developer). I am always an advocate for using APIs and hooks to avoid breaking the upgrade path, your tutorial is a great addition to the knowledge pool.

  6. Raymond Selda 7 June 2009 at 10:50 pm Permalink

    Thanks Dimas. Hooks and APIs in WordPress are somewhat new to me and I’m just trying to learn as much as possible everyday. I’m prepared to read every text in the WordPress Codex if needed. hahaha. But most of the time I go to Thematic and ThemeHybrid for code and inspiration.

  7. aliplanning 14 June 2009 at 4:58 pm Permalink

    Thank you to share

  8. tasarhane 22 June 2009 at 4:31 am Permalink

    thanks for the post.. useful..

  9. Bellerophon 7 July 2009 at 1:41 am Permalink

    S9Dbn2 Cool Info, practical.. lol,

  10. game writer guy 12 October 2009 at 11:37 am Permalink

    Thanks! This is very helpful.

    What files and/or directories does WP store functions in, other than /functions.php?

    Of course, it’s unwise to edit stuff outside wp-content because it can get overwritten when WP gets updated. But I’ve got an error in wp_footer() and I can’t find it. I’m pretty sure the error is in wp-content or I would’ve trashed it when I upgraded.

    You can actually see it on my blog — it’s a munged-up chunk of analytics code.

  11. Christine Green 25 October 2009 at 7:59 am Permalink

    Thanks so much for this post. I am still new to this and I find this helpful.
    Appreciated.

  12. Zoran 16 May 2010 at 12:23 am Permalink

    Thank you very much for the nice explanation!

  13. Derek Skeba 5 September 2010 at 2:09 pm Permalink

    Very nice tutorial. This helped me out a bunch with understanding hooks in an easy way. Good job!

  14. veeru 26 February 2011 at 10:57 am Permalink

    excellent tutorial!

  15. sahib 1 April 2011 at 8:04 pm Permalink

    this is very excellence toturial
    lot of thanks

  16. Thanh Tung 23 August 2011 at 9:57 am Permalink

    Thanks for your tutorial. I have never understood what hook means before!

  17. Tobias Wagner 27 February 2012 at 4:35 am Permalink

    Great post. I’ve read a few about hooks and actions, but could not get the idea. Your post have cleared everything for me. Thank you very much!


Leave a Reply