The Genesis Framework uses a concept called hooks, so that developers can “hook” their changes to certain parts of the theme without editing Genesis code directly.
What is a Hook?
A hook is a piece of code written into a theme, that allows you to attach content to the theme itself. In other words, it provides the ability to extend functionality by way of inserting (or hooking) code.
To see a list of these locations, you can take a look at the Genesis Hook Reference.
What Does a Hook Look Like in a Theme File?
If you open up any of the Genesis 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 – this allows 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.
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' );
That line of code 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 will 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 theme management 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 templates as you will have it in one file. When you update it, that change will affect all areas of your theme where you have it hooked to.
