How To Add WordPress Theme Hooks And Actions To Your Exisiting WordPress Theme

WordPress hooks and action filters are used extensively within the WordPress core software functionality and just about every theme and plugin available for the WordPress uses them to in some fashion. If your new to the concept of hooks and filters within WordPress you may feel as though it’s too advanced a technique for you to wrap your head around. This isn’t the case though as once you do understand the simple nature of hooks and action filters you will almost certainly wonder how you got by without using them for so long.

Introduction

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. There are two kinds of hooks:

Actions:
Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

Filters:
Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

From: http://codex.wordpress.org/Plugin_API#Hooks.2C_Actions_and_Filters

Although the official WordPress Codex documentation indicates that hooks are used for plugins they can also and are being used in theme design to add easily editable areas within a theme that developers can hook into and place content within.

For this tutorial we will be concentrating soley on the Actions side of things Creating Hooked areas within your existing theme that Actions can then hook into and display custom content you have created within these Hook Areas in your theme.

Hooked Area Above Post Content

Lets begin with Adding a hooked area just above our post content in the default WordPress Twenty Eleven theme where we will then add some text like a notification or similar.

Below is a screenshot of where we want to add the hook into the theme.

Step 1 is to define the hook in our theme template which we will use to hook into and in this case will be placed into the file index.php.

You can name this hook anything you like but best to make it easily identifiable as we will be using this hook name again in the second and third step of this tutorial.

I will be naming my hook before_post_content for the purpose of this tutorial.

/wp-content/themes/twentyeleven/index.php

Within the index.php file find this HTML below.

<div id="content" role="main">

It’s below this HTML that we will place our PHP hook. Place this hook below under the HTML in your index.php and save the file.

<?php before_post_content(); ?>

The rest of the code required we will be adding to your themes functions.php so open that file next.

Step 2 is to define a do action PHP for the hook we created before_post_content you can do this by placing the code below in your themes functions.php.

function before_post_content() {
    do_action('before_post_content');
}

You now have the hook activated in your theme and we can now write a simple php function to display some text in the area of the theme where we placed the hook in the index.php.

Step 3 Creating the hook function and enabling it with add_action().

add_action('before_post_content','post_content_info_box',10);
if ( ! function_exists( 'post_content_info_box' ) ) {
function post_content_info_box() {
?>

	<div id="post-info-box">
		<p>Here is the text i placed within our hooked area</p>
	</div>

<?php }
}

Screenshot Of Text Now Being Inserted Via Our Custom Hook.

You could now go ahead and add more HTML or style the area with a little CSS like the quick example below.

Function Used

add_action('before_post_content','post_content_info_box',10);
if ( ! function_exists( 'post_content_info_box' ) ) {
function post_content_info_box() {
?>

	<div id="post-info-box">
		<h2>Post Info Box Added With Hook</h2>
		<p>Here is the text i placed within our hooked area</p>
	</div>

<?php }
}

CSS Used

#post-info-box {
	border:1px solid #e5e5e5;
	background:#f8f8f8;
	padding:10px;
}

#post-info-box h2 {
	font-size:2.2em;
}

#post-info-box p {
	margin:0;
}

Conclusion

This was just a simple tutorial to demonstrate how easy it is to add hooks to your WordPress theme and show that they are not to be feared but rather embraced. Of course using hooks for everything you want to edit could be overkill and hooks don’t suit all customizations. Having the knowledge however to create and utilize your own is a great skill to have in your WordPress toolbox.

Now go have some fun creating some hooked areas for you theme.