WordPress Dev 101: Hooks

• Tweet

• Tweet

When I first got into WordPress development, I had no idea how the Core of WordPress was designed. I knew that I wanted my snippet of code to fire at a specific time, but short of hacking it into the theme I was using at the time, I had no clue how to achieve this. It was then that I discovered the Hooks of WordPress. Think of WordPress’ Hooks as the OnRamp to the rendering of your WordPress based site. Your code will sit dormant until the moment the Hook you have ‘Hooked’ fires, then your code will jump in and be executed.

Actions vs. Filters

There are two types of Hooks used in WordPress, Actions and Filters.
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. These are most commonly used for the bulk of your plugin development.

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.

An Example

Let’s take an example from my Updated Today Plugin. We’ll focus on the settings I have included for “Insert Into:”. The options are Header or Footer. What these reference is the functions wp_header() and wp_footer. Both are functions that exist in the index.php of your theme (or should exist). When a user selects the option of Footer as recommended, that tells the plugin to execute when wp_footer is run. How does it know when this is run? A Hook is how we know when it’s run. In the initial setup of the plugin, I tell the function ‘ck_wp_footer’ to run when the hook (in this case the footer) ‘wp_footer’ is executed.

add_action('wp_footer', 'ck_wp_footer');

It’s as easy as that. Want your code to execute when the header is run?

add_action('wp_header', 'your_function_name');

Keep in mind that some theme developers are now also building or creating their own hooks, so you can further customize your plugin/site to the max. If this isn’t quite making sense let’s have some real world experience. Below is a sample plugin for you to copy and paste into a new document named my-first-plugin.php.

<?php
/*
   Plugin Name: My First Plugin
   Plugin URI: http://www.chriskdesigns.com
   Description: A template for your first plugin
   Version: 0.1
   Author: Chris Klosowski
   Author URI: http://www.chriskdesigns.com
   Copyright: 2010, Chris Klosowski
*/

add_action('wp_head','my_first_plugin_header');

function my_first_plugin_header()
{
?><script type="text/javascript">
alert("I just hooked into the wp_header() function!");
</script><?php
}
?>

Save it, and upload it into your wp-content/plugins/ folder of your WordPress site (use a development version if you don’t want this to impact your users). Activate the plugin and then visit your website. When WordPress starts to load the header, it executes the JavaScript alert we made and will wait to proceed until this alert is cleared. In this case it halts the loading of the site on purpose. I wanted you to see where the code executes, which we can identify as nothing on the page has loaded yet. If we were to change this to load in the footer, the entire page would load until the footer, then alert, and finish once you have clicked ‘OK’.

For a complete list of WordPress Hooks you can check out AdamBrown.info who keeps a complete list of Hooks for quite a few versions of WordPress.

Tagged as: Development, PHP, WordPress, WordPress 101