I’ve talked about my non traditional approach to learning how to customize WordPress and the Genesis Theme with PHP and I’ve shown you how to setup the development environment that we’ll be using in the class. So now we are going to dive right in and start with a very advanced subject with respective PHP and that is using action hooks.
It’s a fundamental concept for WordPress. It’s almost impossible to do any kind of PHP customization in WordPress without understanding action hooks but you’d never learn them in the first of your PHP class because it’s an advanced WordPress function.
What is an Action Hook?
An action hook is essentially a spot in the processing of the webpage where you can insert your own custom code. It’s like a placeholder and as WordPress is going through all of its processing to spit out an HTML page it has hundreds of hooks that it checks for code that either plugins or the theme are adding to it.
A Useful (Hopefully) Analogy
The truth is the very first time I tried to interact with this, I really had a hard time wrapping my mind around what a hook is. So I’d like to give you an analogy. I’d like you to think of it as essentially a bus stop. The bus is driving down the street, if somebody is at the stop it stops and lets them on, if nobody is there it keeps on going.
Here the hook is your bus stop and it’s the place where you add your little bit of custom code to the bus. So there are bus stops or hooks at the very beginning, bus stops in the middle and bus stops at the end. And WordPress works exactly the same way.
There are hundreds of hooks in WordPress all from the very beginning, all the way to the very end processing of the web page. Here, though, most of the hooks that you will interact with are actually Genesis hooks. Even so, I want to draw your attention to a decent explanation so we’ll do a search for WordPress Hooks. And this is what we are looking for, this plugin API Action Reference.
A Resource for WordPress Hooks
An action hook is the kind of hook that we’re talking about now. In a later class we’ll talk about filter hooks which behave differently than action hooks but right now we’re just going to talk about action hooks.
What you see here is a sort of a theoretical loading of action hooks as WordPress goes to the process of rendering a page. Although, as I mentioned, most often you’re going to be dealing with StudioPress hooks or Genesis hooks.
A Resource for Genesis Hooks
There is a nice reference for Genesis hooks here on the Studio Press site. Genesis divides its hooks into internal action hooks, document head action hooks, structural action hooks, loop action hooks and comment action hooks.
Types of Hooks
Internal action hooks are things that happen before the page ever begins to render.
Document head action hooks are hooks that fire inside the HTML head of the page so it’s before the body inside the head of the document.
Structural action hooks are the ones you’re going to work with most often and those are sort of placeholders in the processing of the page. For example, genesis_hook_before_header and a hook_after_header and hook_footer and hook_before and so on. These are hooks that fire throughout the rendering of the page starting at the top working their way down to the bottom.
Then you have loop action hooks and these are hooks that fire on the main loop. So if the main loop spitting out multiple posts like your blog page then those hooks fire on each post whereas if it only has one like a regular page then it only fires once. So the loop action hooks are hooks that fire inside the loop.
Finally, you have comment action hooks and those are hooks that fire inside of each individual comment.
So these are the kinds of hooks you’re going to work with to customize Genesis. Generally speaking, tonight we’re going to be talking primarily about structural action hooks but we’re also going to use a WordPress hook as well.
Genesis Visual Hook Guide
There is a great plugin that is going to help you visualize all this and it’s called the Genesis Visual Hook Guide. It’s a plugin that you can install and when you install it, it will display for you where the hooks are and it will display action hooks and filter hooks.
Install the Plugin
It’s pretty cool and in fact, we’re going to install that right now on this site. Come back over to Plugins and Add New. We’re going to search for Genesis Visual Hook. This is the one. We’ll install that and activate the plugin.
Now when we come back to the home page and we refresh it, you’ll notice we’ve got this new menu up here, Hook Guide.
See Where the Action Hooks are Located
You can go to Action Hooks and you get this visual guide showing you where each of these hooks goes. There’s the genesis_before, the genesis_before_header, the genesis_header, genesis_site_title, genesis_header_right and genesis_site_description and so on. These are all action hooks that are happening inside the rendering of the page.
See Where the Filter Hooks are Located
Then you also have filter hooks which, as I said, we’ll talk about at a later date. Let’s just refresh this and put the Genesis filter hooks in separate page because it can get a little confusing with all of the hooks being shown at the same time.
So we’ll come over here to the filter hooks and you can see genesis_seo_site_title is a filter hook, genesis_seo_description, GENESIS_FOOTER_CREDS_TEXT and genesis_breadcrumbs are filter hooks.
Interestingly there are also some other filter hooks that are not showing up in here but it doesn’t really matter we’re not going to use them.
Then you have markup which shows essentially all of the HTML markup. This can be kind of useful and we will use it a bit here. Anyway, it’s a useful tool to help you figure out what you’re going to do and where you’re going to do it.