How to Modify the Genesis Theme with Simple HooksPosted on Updated on
The Genesis framework for WordPress allows extensive customization through its use of inbuilt action hooks. Normally when you wish to modify a WordPress theme, you create a child theme so that your changes are not overwritten on a future update. However if you’re using the Genesis framework, chances are that you’re already using a child theme. If you want to create a “child theme of a child theme”, things can get very tricky. Luckily for us, Genesis makes it easy to customize its appearance via the use of “action hooks”. These are a list of Genesis specific functions that you can hook into in order to create your own modifications. You can get a comprehensive list of all the various Genesis action hooks by taking a look at their documentation here.
In case that looks a bit too confusing, there is even a visual action hook guide that shows you where each action hook is meant to execute. In fact, there’s even a WordPress plug-in that allows you to superimpose these action hooks onto your own website so you can see exactly where each will appear in real time.
However, using an action hook might not be the most straightforward process in the world – especially for someone new to WordPress and who doesn’t understand how action hooks work, and how they are structured. For these individuals, there is yet another WordPress plug-in called “Genesis Simple Hooks”. This provides easy access to each and every one of the Genesis hooks meaning that you don’t have to specifically write the code to make use of them. In fact, even if you’re very familiar with hooks and filters in WordPress, you might find the Genesis Simple Hooks plug-in extremely easy to use. I use it personally myself.
This way, I don’t have to worry about transferring code if I ever change my Genesis child theme or if the child theme itself gets an update.
Using Genesis Simple Hooks
After you install the Genesis Simple Hooks plug-in, you can access it via the regular Genesis menu on the left-hand side dashboard menu.
The first example of utilizing this hook for me is the code I use to display the image above the post title in WordPress. I’d previously written a tutorial on this which required the code to be directly inserted into “The loop” just above the post title. As you may understand, messing around with theme code and the loop is clumsy, and doesn’t take into consideration any future updates that may arise. Using the Genesis framework and the Genesis Simple Hooks plug-in however, I simply find the appropriate action hook, enable the execution of PHP code, and paste in whatever I need to output as shown here:
In this example above, I’m using the genesis_before_post_title hook. No need for theme modifications or any future worries.
The second example shows how I hook into the genesis_after_post_content location to output the number of comments via the inbuilt Genesis short code [post_comments]. For reference, here’s a complete list of Genesis short codes.
In this example, I’ve enable the option called “Execute shortcodes on this hook?”.
Finally, my last example involves actually unhooking the inbuilt function called genesis_do_comment_form() because I wish to output my own comment form.
I had to do this earlier in order to modify the tabindex property of the “Submit button” in Genesis. But this was before the 4.2.0 WordPress update that introduced a new filter called comment_form_submit_field that allowed me to modify the “Submit” button directly.
As you can see, the Genesis Simple Hooks plug-in allows for extremely versatile modifications to the Genesis child themes without having to actually make any theme changes directly. Even though you can achieve the same effect without a plug-in by tapping into the action hooks programmatically, I find it invaluable to have them all in a single place encapsulated into the former plug-in that will persist through any updates.