How To Add Custom Hooks To Your Theme

WordPress already includes a long list of do_action hooks in the core files.

The only problem is, these hooks aren’t exactly useful for web design unlike what you’ll find in premium web design frameworks.

Genesis and other premium theme frameworks also include additional custom hooks which are useful for hooking in content that you want displayed in hook locations where WordPress don’t already provide a hook.

But what if your theme doesn’t include a hook in the location you want to display content?

What if you don’t use the Genesis design framework or don’t want to use it?

Rather than edit the template files of the parent theme every time you want to display content in a specific location, you can simply create your own custom hooks and then add them to a custom function in your child theme to display content in that exact location.

This helps you avoid hacking the parent themes template files which will only be over written when you update the parent theme.

The downside of adding hooks in your parent theme is that you’ll need to manually update it when the times comes or use a theme where this is done for you.

Lets now add 3 hooks to the header of the Twenty Twelve parent theme so we can easily hook in content to display in that area using a custom functions in a child theme of this parent.

Step 1 – Add do_action Hooks In Parent Themes Functions.php

The first step is to add your custom hooks in your parent themes functions.php file.

Not a bad idea to name your hooks the same as your parent theme or an abbreviation for branding purposes. And also a good idea to keep your hooks descriptive so they’re easily to identify.

Step 2 – Add Hooks In Parent Themes Header.php Template

Next step is to add the hooks to your parent themes header.php file.

We’ll be adding them in 3 locations:

1. before the header
2. in the header
3. after the header

Here’s the 3 hooks we’ll be adding:

And here’s a screen shot of exactly where you can paste them in your header template.

Step 3 – Add Custom Function In Child Theme Using Header Hooks

The final step is to use the hooks which you have just created in a custom function in your child themes functions.php file.

wpsites_before_header – This code will output your text or HTML using the wpsites_before_header hook in the Twenty Twelve child theme.

wpsites_header – This code will display a header image in the header location you placed on the hook in your parent themes header.php template file.

wpsites_after_header – This code displays your text after the header on all single posts only using a conditional tag.

Whats In The Code

Lets take a look at each line of the code so you have a better understanding of how it works.

function display_text_before_header() {
    echo '<div class="add-text">Add Your Own Text or HTML Here</div>';
};
add_action('wpsites_before_header', 'display_text_before_header', 5 );

The first line includes the name of the function which you create and always use a unique and descriptive name.

The second line echo’s the text and add a class you can use in your child theme to style your content. Example:

.add-text {
background: #f5f5f5;
border: 2px #333 solid;
padding: 5px 5px 5px 5px;
}

The third line includes the add_action which consists of 3 parameters: 1. the custom hook name, 2. the function name 3. and the 3rd parameter which is the priority. The priority default is 10 so if you’ve hooked more than 1 function using the same hook, you can set this value below 10 so both functions output in the same hook location.

Conclusion

If you’ve successfully created and inserted your custom hooks into your parent themes files, you’ll now be able to create any custom functions and display content using conditional tags and much more.

Hooks make web design so much easier and enable you to keep all your custom coding in one file in your child themes folder.