If you look along the edge of a laptop computer, you’ll see some ports that allow you to expand the functionality of the laptop. You might plug in a mouse or keyboard, headphones, or an external hard drive. These items don’t change the core functionality of your laptop, but they add features and might change how your laptop looks.
Similarly, Genesis relies on functions built into your child theme to add or modify features on your website, but instead of plugging into ports, these functions plug into pieces of code in the framework called “hooks.”
What is a Hook? #
All WordPress installations include pieces of code in the layout called hooks that act as ports into which you can “hook” additional code without editing the core files. The Genesis Framework uses a unique set of hooks you can use to insert code into certain parts of the framework. Hooks are the basis for customization and Genesis child themes.
To see a list of the hooks in the Genesis Framework, you can take a look at the Genesis Hook Reference.
Why Use Hooks? #
Hooks can be used to modify the layout of your theme. Want to move the primary navigation bar? Add a custom author info box at the bottom of your blog posts? Add a widget area to the front page or footer? You can do all these things and more with hooks.
Hooks are important tools for developers to modify and add functionality without editing the core framework files. This means that updates to the framework can be installed without losing any of your custom code.
Using hooks simplifies your design process and theme management since you can hook content into multiple places in the Genesis code. This means that functionality can be created once, and any updates to that code take effect throughout your theme.
What Does a Hook Look Like? #
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:
do_action( 'genesis_before_footer' );
do_action( 'genesis_footer' );
do_action( 'genesis_after_footer' );
Hooks are scattered throughout the Genesis Framework, and each of them allows you to insert your code into specific locations. For instance, you can find a hook for the footer that outputs its content by default, as well as hooks that execute immediately before and after the footer div.
To use hooks in modifying a theme, you need to have the following:
- An “add_action” call in your child theme’s “functions.php” file, indicating the hook you want to use to execute your custom code. It should look like this:
add_action( 'hook_name', 'function_name');
- The action you wish to perform can either be an existing WordPress or Genesis function, or a custom user-defined function in your functions.php file. If you plan to create a new function, it should have the following structure:
function function_name() {
//function contents
};
- You may optionally add any styling that you want to apply to the output of your function in your child theme’s style.css file.
Here’s an example that demonstrates how to use hooks to move the primary navigation menu in your child theme. By default, the navigation menu in the Genesis sample child theme appears after the header, hooked onto ‘genesis_after_header’. We will remove the menu from this hook and hook it instead onto ‘genesis_before_header’, which will position it before the header.
To reposition the navigation menu, you can open your child theme’s functions.php file and add the following lines of code at the end:
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );
The ‘remove_action’ code line removes the ‘genesis_do_nav’ function, which is responsible for generating the navigation menu, from the ‘genesis_after_header’ hook. Conversely, the ‘add_action’ line adds the same ‘genesis_do_nav’ function to the ‘genesis_before_header’ hook.
Save all the changes you made and preview your theme. The primary navigation menu should now appear before the header.
This method of using hooks can be utilized to add various kinds of functionality and customizations to your child themes.
Note that in the example, ‘genesis_do_nav’ is an existing Genesis function for generating the primary navigation. If you want to create a new function, you will have to define it in your child theme’s functions.php file.
Additional Information: Aside from ‘add_action’, the Genesis Framework also employs a WordPress function called ‘remove_action’, which removes specific functionality from their respective hooked locations in the code. The syntax for using ‘remove_action’ is the same as that of ‘add_action’.
remove_action( 'current_hook', 'function_name');
To relocate a navigation menu, you could utilize remove_action to detach it from its current location and then hook it into a different location.
In addition to the priority of execution, both add_action and remove_action support the use of supplementary parameters.