Getting Acquainted with WordPress Action Hooks

blog_WP

Action hooks are one my favorite features WordPress has to offer. Today we’ll get acquainted with how to make use of the default hooks in in themes and plugins and even how to create our own.

wp_head() and wp_footer()

If you’ve done any custom WordPress theme development, odds are you’ve run across wp_head() and wp_footer() before. They’re the two most common and essential action hooks in the WordPress ecosystem. Since they’re primary used to insert code just above </head> and </body> respectively, most plugins that have anything to do with the front-end will usually break without them.

Below, we’ll look at how to make use of them ourselves.

Hooking Into an Action Hook

Hooking into an action hook is easy. Let’s say we’re creating a plugin that allows users to upload a custom favicon from the admin panel. Obviously, that entire process is a bit outside the scope of this tutorial, but let’s focus on just the part that inserts the favicon code into the document <head>. First, we’ll create a function that echos out the favicon code.

function myplugin_favicon_head_code() {
	echo '<link rel="icon" type="image/png" href="path/to/favicon/file">';
}

Next, we’ll hook into the wp_head() action hook.

add_action('wp_head', 'myplugin_favicon_head_code');

And there you have it! We’ve inserted code into our document <head> without ever touching our template files. As you can see, the first parameter is the action hook you’re hooking into and the second is the function you’re referencing.

Registering a Custom Action Hook

wp_head(), wp_footer and the rest of the gang are nice and all, but what if we want to create our own hooks? Thankfully, WordPress makes this really easy with do_action(). Simply put it wherever you want your custom hook to display in your theme files.

<?php do_action('my_custom_action_hook'); ?>

This hook is now available to be used using add_action() just like the rest of the WordPress default action hooks.

add_action('my_custom_action_hook', 'my_really_cool_function');

An Example Usecase

Let’s say I do a lot of WordPress client work and I’ve decided I want to create a simple, parent-theme framework to start my sites with. I can be fairly certain that a few things will be the same from site-to-site. Each page will have a header with a page navigation, a main content section and a footer.

Here are my three major parent-theme files.

header.php

<!DOCTYPE html>
<html>
<head>
	<title><?php wp_title(); ?></title>
</head>
<body>
	<header>
		<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
		<nav>
			<?php wp_list_pages(); ?>
		</nav>
	</header>

index.php

<?php get_header(); ?>
<!-- The Loop goes here. -->
<?php get_footer(); ?>

footer.php

	<footer>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></footer>
</body>
</html>

I won’t cover creating Child Themes here as it’s been well-documented in the WordPress Codex. If you aren’t familiar with the process or haven’t done it in a while, I’d highly recommend you head over and read up on it. It’ll take five minutes flat. Don’t worry, I’ll wait. :)

We’ve got a solid base here, but what if we need additional markup in the end project? Perhaps our designer has included a small section in the design below the footer with contact info. How are we going to do that?

Typically would create a second footer.php in the child theme, overriding our parent theme’s footer.php and thus giving us the ability to add our additional markup. But not today. Instead, we’ll create a custom action hook in the parent theme and hook into it in the child theme.

Let’s take this one step at a time.

I’ll add two action hooks to the parent theme footer.php - one for above the <footer> and one for below it:

		<?php do_action('parenttheme_above_footer'); ?>
		<footer>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></footer>
		<?php do_action('parenttheme_below_footer'); ?>
</body>
</html>

Now, in our child theme’s functions.php file, we’ll add something similar to this:

function childtheme_contact_info() {
	echo 'You can contact us via email at <a href="mailto:us@example.com">us@example.com</a>';
}
add_action('parenttheme_below_footer', 'childtheme_contact_info');

Voilà! Now, without having to touch a line of code in our parent theme or override the entire parent theme footer.php in our child theme, we’ve added additional markup to our page.

Going Further

We’ve just scratched the surface of the power of action hooks. For additional reading, I’d highly recommend the following resources.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Galen Gidman

Galen Gidman is a designer and developer from Missouri. He works @fixel and tweets @galengidman.

Comments

8 comments on “Getting Acquainted with WordPress Action Hooks

  1. You say, “without having to touch a line of code in our parent theme…” -but you have edited the parent theme file footer.php … haven’t you? so what’s the difference to just editing those files in the first place?

  2. .. so what I mean is, when the parent theme gets updated, you have to go back and re-insert the action hooks in the new parent theme files. So, you might as well have edited those parent theme files directly — unless I’m missing something here?

    • The idea is that when you built the parent theme you would include all the action hooks you anticipated needing in the future. Then you could use it over and over without needing to edit it with every project.

  3. ty for this tutorial , but i didnt understand the wp_head(); i mean what’s the diffrenet between get_header() and wp_head ();

    • get_header() is WordPress’s function for including the theme’s header.php file. wp_head() is an action hook that resides just above the tag inside of the header.php theme file.