Skip to main content

Introduction to Hooks: a basic WordPress building block

WordPress hooks are arguably the basis of WordPress development, forming a large part of the core functionality and used by almost every plugin and theme available to date. The concept of hooks can also be somewhat daunting for users who are starting out with developing for WordPress. Today, we’ll jump in and find out a bit more about just what exactly WordPress hooks are and how they can help you on your way to WordPress rock stardom.

What exactly *are* WordPress hooks anyways?

WordPress hooks are, essentially, triggers of sorts that allow users to, with short snippets of code, modify areas a WordPress theme or plugin, or add their own code to various parts of WordPress without modifying the original files. An example of this could be along the lines of either “when WordPress chooses which template file to load, run our custom code” or “when you generate the content for each post, add social bookmarking links to the end of the content”. These examples will be expanded upon once we’re a bit more familiar with what exactly the different types of hooks are.
Hooks can be divided into “Action” and “Filter” hooks, the former allowing for insertion of custom code at various points (not unlike events in JavaScript) and the latter allowing for the manipulation of various bits of content (for example, the content of a page or blog post). Lets take a closer look at each of these, shall we?

Action Hooks

Action hooks are designated points in the WordPress core, theme and plugin code where it is possible for outside resources (outside of the scope of where the hook is… either in the core, theme or plugin) to insert additional code and, there by, customise the code to do additional functions they may desire. An example of this is the commonly used wp_head action hook, used by many themes and plugins to inject additional CSS stylesheets, processing code or anything else they require to sit between the <head> and </head> tags of their WordPress theme’s XHTML structure. This is the reason for including wp_head(); in all WordPress themes.
To hook on to an action, create a function in your theme’s functions.php file (or in your plugin’s code) and hook it on using the add_action() function, as follows:

The above code adds the text “Hello WPCandy Readers!” between your theme’s <head> tags. Placing “wp_head” in the call to add_action() with “get_header” would display this text above your theme.
The way I like to explain action hooks, in a single sentence, is: “When you get to this point, do that.”

Filter Hooks

Filter hooks are used to manipulate output. An example of this would be to add a line or text (or a hyperlink, or a signature sign-off—whatever you’d like) to the end of the content of each of your blog posts. Filter hooks can also be used for truncating text, changing formatting of content, or just about any other programming manipulation requirement (for example, adding to or overriding an array of values).
Custom code is added as a filter using the add_filter() function. The following code adds a sign-off to the end of each blog post, only when viewing the full blog post screen:

The above code adds a new div tag to the end of the content of our blog post, only when on a single blog post screen.
A filter hook is like using the str_replace() function in PHP. You give it some data, manipulate, replace or reformat the data and return the new content out at the end.

… and now, for a few commonly asked questions… answered.

Are custom hooks available only to the theme or plugins I’ve got activated?

Custom hooks and filters that are added by a theme or plugin, only apply if that theme or plugin is active. There are many hooks, however, that are global (get_header, wp_head and wp_footer are three examples). If you’d like to switch themes regularly and maintain the functions you’ve hooked onto these, or other, global hooks or filters, I’d recommend writing them into a plugin.
Themes and plugins are able to specify custom filters and actions. We’ll get more into this in part two.

Where can I learn more about action and filter hooks?

My favourite resource is, without a doubt, the WordPress Codex. While there are many tutorials available online regarding filter and action hook applications, the best understanding comes, as they say, when heard from the horse’s mouth. The Codex provides useful examples, as well as up to date and informative explanations, which aid in gathering an overall understanding of the Plugin API (the API that handles action and filter hooks).

Right. Now that we’ve answered a few questions, lets show some practical examples that can be used right off the bat with any WordPress theme.

Add “time ago” time display at the end of each post.

Use WordPress conditional tags to detect the user’s web browser and add a class with it’s name to the body tag.

Remove the WordPress 3.1 Admin Bar.

What about Twenty Ten?

With the introduction of Twenty Ten as the WordPress default theme, the theme received a large amount of documentation in the theme files, with several custom hooks or pluggable functions created specifically for it. Lets take a look at how we can use these hooks to enhance Twenty Ten.
The main custom hook in the TwentyTen theme serves a relatively simple purpose: adding content to the credits area in the footer. This is done by hooking on to the new “twentyten_credits” action hook. Here’s an example:

The above function adds a simple line of credit text to the footer area in the Twenty Ten theme. In part two, we’ll discuss pluggable functions, which can be used in the Twenty Ten theme in particular to enhance and customise the output above and below the post content in the theme.

 

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at eCodezone.com, He loves to write usable code for the Web and other digital sources.