Quick Introduction to Action Hooks

Action hooks are used in WordPress to perform functions, or “actions”. They are used throughout many plugins and themes to provide an easy way for users of the theme or plugin to modify the output or the way it functions. This quick tutorial will give you a good introduction into how action hooks work.

So what exactly is an action hook? Basically it is a place in a plugin or theme that other functions can be “hooked” to, meaning that a function can be written that outputs some content and then be attached to the action hook; the location of the action hook determines where the custom function displays its information.

Action Hooks are not only used for displaying information, they can be used for much more than that, but for the purposes of this tutorial, I’m only going to show you how they work in regard to displaying (or not displaying) information.

There are two integral parts to action hooks:

1. do_action() – this is where the “hooked” function is run
2. add_action() – this attaches a function to a hook, which is defined by do_action()

A couple of other functions come into play when working with hooks, but I’m not going to worry about covering them here. These are the only two you need to get started.

So let’s assume for a moment that we have setup a plugin that displays information on the front end of our WordPress. For simplicity’s sake, we are also going to assume that we have manually added our function to one of your theme’s templates. The sample function below is going to represent our main plugin function that displays information:

1
2
3

function pippin_sample_output_function() {
	echo '<div id="extra-content">This is content added to the WordPress footer.</div>';
}

This is nothing more than a simple echo function. It just outputs a sentence wrapped in a DIV tag.

Now we’re going to add a hook to our sample function. This hook is going to allow other functions, such as ones from other plugins, to add more content to this sample output function.

1
2
3
4

function pippin_sample_output_function() {
	do_action('pippin_before_output');
	echo '<div id="content">This is just sample content</div>';
}

The only thing I’ve added is the do_action() hook. This new custom hook will allow us to tie into the function from other functions to add more custom content. Here’s an example:

1
2
3
4

function pippin_sample_hooked_function() {
	echo '<div id="before-content">This is outputted by the hook, before the original content.</div>';
}
add_action('pippin_before_output', 'pippin_sample_hooked_function');

This will resulting output that looks like this:

1
2

<div id="before-content">This is outputted by the hook, before the original content.</div>
<div id="content">This is just sample content</div>

Let’s go back and modify our original function again to add another hook:

1
2
3
4
5

function pippin_sample_output_function() {
	do_action('pippin_before_output');
	echo '<div id="content">This is just sample content</div>';
	do_action('pippin_after_output');
}

So we now have two hooks, one for before and one for after our normal content. This means we can now add another hooked function:

1
2
3
4

function pippin_another_sample_hooked_function() {
	echo '<div id="after-content">This is outputted by the hook, after the original content.</div>';
}
add_action('pippin_after_output', 'pippin_another_sample_hooked_function');

Adding this second hooked function will result in this:

1
2
3

<div id="before-content">This is outputted by the hook, before the original content.</div>
<div id="content">This is just sample content</div>
<div id="after-content">This is outputted by the hook, after the original content.</div>

Why have I added two hooks, one before and one after? Well, it’s quite simple really: I want to provide my users as much flexibility as possible. When building a plugin or theme, hooks like these can provide a huge advantage to users who wish to modify the plugin or theme. By putting a hook before and after, I’ve just given my users the ability to add content where they want (either before or after), and they do not have to modify the core plugin or theme files to do so.

It is quite common for good plugins / themes (at least the larger ones) to have upwards of 15 to 30 hooks that function similarly to the examples above. I have several real examples for you:

• Swagger – The theme framework by Jason Bobich (also the theme this site is running) has dozens and dozens of hooks. And this is great! As a user, I was really easily able to add some extra content to my header section without having to modify any of the theme files.
• JigoShop – The popular e-commerce plugin that has dozens of hooks. I setup an e-commerce store using it once and was able to completely modify the output of products because of the large number of hooks the developers included.
• Restrict Content Pro – My premium content / subscription manager plugin has somewhere in the range of 15 – 20 hooks that can be used to add extra registration fields, or content before or after any of the membership forms.

• Plugin Development 101 – Intro to Actions