Adding Action Hooks to Your WordPress Theme Framework

In this tutorial you'll add some action hooks to your template files, which you'll then attach functions to in the next tutorial. After that, you'll add some filter hooks.

The advantage of creating action hooks in your framework is that any content you attach to them can easily be overwritten by functions in a child theme or by plugins. This saves you creating duplicate template files in your child themes and gives you more flexibility.

Note: If you need to learn more about action and filter hooks before starting, this tutorial will help.

What You'll Need

To follow this tutorial, you'll need:

a development installation of WordPress
your own theme or the theme files from Part 3 of this series, which you can find in the GitHub repository to accompany the series
a code editor

Adding Hooks to the Header

We're going to add two hooks to the header: one before it and one inside it.

In header.php, immediately inside the opening <body> tag, add the first action hook:

<?php
// action hook for any content placed before the header, including the widget area
do_action ( 'wptp_before_header' );
?>

This hook might be useful for adding content, menus or links above the site header.

Add another hook inside the header, to the right. Your child themes can use this to insert custom content, a search form or widgets.

<div class="half right">
    <!-- This area is by default in the top right of the header. It contains contact details and is also where you might add social media or RSS links -->

	<?php
	// action hook for any content placed inside the right hand header, including the widget area.
	do_action ( 'wptp_in_header' );
	?>
</div> <!-- .half right -->

Note that I've enclosed this hook inside a div with a couple of classes which work with the object-oriented styling in my theme - if you're working with your own theme, you'll need to use something different but the hook itself will be the same.

Adding Hooks to the Content

The theme will include two content hooks - one before the loop and open after it, both inside the #content div. Luckily because of the way my theme is structured I only have to add each hook once, as I open that div in the header.php file and close it in the sidebar.php and page-full-width.php file - it's added to the full width page template because that doesn't call the sidebar.

Let's start with the one before the loop.

At the end of header.php, add the following just inside the opening #content div:

<?php
// action hook for any content placed before the content, including the widget area
do_action ( 'wptp_before_content' );
?>

This will provide a hook for anything inside the content area but above the loop.

Next in sidebar.php, just before the closing of the #content div, add this code:

<?php
// action hook for any content placed after the content, including the widget area
do_action ( 'wptp_after_content' );
?>

Finally add the same code to the page-full-width.php template as you just did to sidebar.php, again just before the close of the #content div.

Adding Hooks to the Sidebar

The next step is to replace the widget area in the sidebar with a hook, which will then be used to add the widget area back in at a later stage but can also be used to add custom code or overwrite the widget area.

Replace all of the code for the widget area with the new hook:

<?php
// action hook for any content placed in the sidebar, including the widget area
do_action ( 'wptp_sidebar' );
?>

This means that if you want to replace the widget area with your own code in a plugin or child theme, you can do so by attaching the new code to this hook and overriding the hook which attaches the widget area.

Adding Hooks to the Footer

Finally you need to add a couple of hooks to the footer: one inside it and one below it, which will be used for the colophon.

Inside the footer element, replace all of the existing code with the hook:

<?php
// action hook for any content placed before the content, including the widget area
do_action ( 'wptp_footer' );
?>

Next, add another hook for the colophon, after the close of the footer element:

<?php
// action hook for any content placed before the content, including the widget area
do_action ( 'wptp_after_footer' );
?>

Note: The code you have removed for widget areas and the colophon will be replaced at a later stage, but instead of adding it directly to the template files it will be added using a function which is activated via the relevant hook. We'll also add filter hooks to some of those functions.

Summary

Using action hooks in your template files give you and your framework's users much more flexibility down the line. You can use them to insert any type of content wherever you like, and override or remove content as well, all without creating new template files.

In the next part of this series, I'll show you how to create functions which will add widget areas and other content, all activated via these hooks.

HIGHLIGHTS OF THE DAY