Now that we have launched the Genesis Theme Framework and have some child themes available, I thought it would be helpful to spend some more time explaining the basics of Genesis. Hooks 101 – A Basic Guide for the StudioPress Genesis Theme Framework is the second article.
What is a Hook?
A hook is a piece of code written into a theme, that allows you to attach additional content to the theme itself. In other words, it provides the ability to extend functionality by way of inserting (or hooking) code. The Genesis theme framework has over 40 locations throughout the theme where you can do this – to see a comprehensive list of these locations, you can take a look at the Genesis Hook Reference page.
What Does a Hook Look Like in a Theme File?
If you open up any of the Genesis Theme Framework files, you’ll be able to spot many of them. For instance, if you open up the footer.php file, you’ll see this code:
<?php genesis_before_footer(); ?>
<div id="footer">
<div class="wrap">
<?php genesis_footer(); ?>The very first line of this code is considered a hook – what this does is allow you the ability to add content or “hook” the content to a specific location. In this case, you’ll see that it occurs before the footer.
What is an Example of Using a Hook?
Many folks like the idea of a widgeted footer area, but not all of our themes have one. A perfect example of what you can do with a hook is to add a widgeted footer area above the footer. Below is an explanation how you would do that.
Step #1
Create a new file and place it into your child theme folder. Name it something that makes sense for what content it contains… bottom-widgets.php
Step #2
Use this file just like you would use a sidebar.php file. Insert your markup and additional CSS, do the conditional widget calls, etc. For complete code, you can refer to this tutorial.
Step #3
Now, you want to create a function that will allow the contents of your bottom-widgets.php file to be hookable – which you can do by adding this code to your child theme’s functions.php file:
function include_bottom_widgets() {
require(CHILD_DIR.'/bottom-widgets.php');
}Step #4
Now we want to instruct the child theme to execute the function from Step #3 directly above the footer. No problem… we’ll use a hook – so you would place this code to do it:
add_action('genesis_before_footer', 'include_bottom_widgets');What that line of code does is tells the Genesis engine… take the include_bottom_widgets function, and attach it to the genesis_before_footer hook, and execute. If you open up genesis/footer.php you can see the exact location of the genesis_before_footer() hook so you’ll know where your function is going to execute.
The Result
This process is like inserting code directly in the parent theme files, only slightly different. Instead of inserting the code directly, you attach it to hooks that have been placed in various locations throughout the genesis source code. Your final product looks like this in your child theme’s functions.php file:
add_action('genesis_before_footer', 'include_bottom_widgets');
function include_bottom_widgets() {
require(CHILD_DIR.'/bottom-widgets.php');
}Additional Benefits
By using Hooks, you can simplify your design process and future theme management/maintenance because you only need to create the additional functionality code once and have it stored in the file you created (in this example, bottom-widgets.php), but you can hook it into multiple locations on your Theme. No more repetition of code blocks hard-coded into several various templates, you will have it in one file. Whenever you tweak or update it, that change will affect all areas of your theme where you have it hooked to.
