Guide To Using Hooks In Custom Functions

You may think hooks are complicated which is understandable because that’s what i thought when i first looked at them!

The truth is, hooks are very easy to understand.

It’s the custom function that you use them with that is a little bit more complicated.

In this beginners guide to hooks, we’ll look at the basics of what hooks are and what they do as well as how to use them to display content in different locations in your theme.

What Are Hooks?

Hooks are simply a point or location in your themes template files.

They are given descriptive names depending on which theme they are used in like:

• woo_post_after – Woo themes specific hook which executes after all single posts
• genesis_after_header – Genesis specific theme hook which executes after single posts
• wp_footer – WordPress hook which executes after the footer in all themes.

The easiest way to understand where different hooks are located in Genesis, is to view a visual hook guide which contains all the hook locations.

genesis_after_header is a hook used in Genesis child themes (StudioPress) which executes after the header on all pages.

Rather than add your content to the parent themes header.php file which is used for displaying your header, you can simply add the content in a custom function in your child themes files.

woo_before_header is a hook which works in Woo themes and is located in the parent themes header.php

Rather than edit the parent themes templates files, you can simply use the hook to display content in that location by adding code to your child themes functions.php

WordPress Hooks

wp_footer is a WordPress hook which works in any theme as opposed to theme specific hooks like genesis_after_post and woo_header.

Rather than edit the footer.php file in the core WordPress files, you can simply use the wp_footer hook in a custom function to hook in(display) content in the location the wp_footer hook exists in the footer.php template file.

Visual Hook Maps

Each theme developer normally provides a map of exactly where each hook executes along with the list of hooks and a description of where they execute in your theme.

• Woo Themes Visual Hook Map
• Genesis Visual Hook Guide
• Thesis Visual Hook Reference

The parent theme template files and the WordPress template files contain the hooks which different theme developers have added in different locations of each template file.

They then provide a list of these hooks which you can add to a custom function for displaying content in that specific hook location in your theme.

Hooks in Template Files

Traditionally, if you wanted to display content in a specific location on your website, you’d need to add the content using HTML, Text or PHP directly to your parent themes template files. (And some people still do!)

With hooks, you don’t need to add your content in any of the template files.

The reason for this is, each template file contains several hooks which you can simply reference in a child themes functions file rather than the hacking the parent themes files.

This function displays your content by hooking into the location where the hook is located in the core template files.

Hooks In Genesis Files

Note: You should never edit core Genesis files and nor should you ever need to.

Let’s take a look at where the action hooks are in the parent themes template files.

Below is an image of the Genesis header.php template file located in the core parent themes files.

It contains the header hooks which you can also see in the visual hook image layered to the right of the hooks.

You’ll also notice there’s some other genesis hooks there and also a WordPress hook which is needed to hook in certain plugins.

You can use the WordPress hook in a function if you like and the function will work on all themes because they all contain WordPress hooks.

Functions With Action Hooks #

Let’s look at a very basic custom function which displays text in any hook location in Genesis child themes.

The hook we use to display text before content is named the genesis_after_header hook.

We include it with a basic function we have created describing what the function does which in this case is named content_after_header

We also add a unique div class so we can style the text in the hook location if needed. In this case we named it after-header.

And in the child themes style.css file we can use this new class for styling the content in this hook location like this:

.after-header { 
background: grey; 
border: solid 3px #222;
padding: 10px;
}

Genesis Simple Hooks Plugin

Here’s another way to look at the header hooks via the hook fields located in the Genesis Simple Hooks plugin.

A very good stepping stone to learning how to use hooks in Genesis is to start using the Genesis Simple Hooks plugin.

This plugin enables you to easily paste in HTML, text, shortcodes or PHP code which will be executed in a specific hook location.

This is an excellent way of learning more about where each hook is located in Genesis and how to display different types of content in those locations.

You can also execute PHP code in any of the hook locations using simple hooks as long as you wrap the PHP code in PHP tags:

The above code, once pasted into a genesis_hook field using the Simple Hooks plugin, will output a image slider on the home page only.

Using Hooks With Custom Functions & Conditional Tags

Once you’re familiar with all the hook names and the locations they execute, you can the move on to using the hooks in custom functions and combine them with conditional tags to execute your content in a hook location based on specific conditions like home page only or single posts only.

This code will display your text before all post titles on single posts only.

It won’t display the text on archive pages like your blog, home or category archives and it won’t display the text on static pages.

More Custom Functions With Hooks

• Action Hooks For Parent Theme Development
• Hooks and Filters Guide for Beginners