Props to Carrie Dils for inspiring the title of this post!
In my free time (ha!) I volunteer in the StudioPress support forums, where users of the Genesis framework can request help with designing and customizing their websites. People often need help using and understanding Genesis hooks, and while a Google search will turn up a number of resources, I think some of them are just plain hard to understand.
What Are Genesis Hooks?
Think of your Genesis site’s structure as a map. No matter what child theme you’re using, there are certain areas included in all Genesis sites – header, primary and secondary navigation, content area, sidebar, footer, etc.
Note: Hooks are not unique to the Genesis framework – they exist in all WordPress websites. However, Genesis has its own hooks that are basically the same regardless of what child theme you use. If you work with Genesis regularly, it makes sense to know and understand the hooks it uses so you can apply changes to any child theme.
For each main section of your theme, there are hooks you can use to target that area for customizations, kind of like sticking a pushpin on a map. For example, let’s say I want to put an image above the content of every page on my site. I would want to “hook” or attach it to a spot on the map that is after the navigation but before the content area. The hook I use depends on where I need a certain object or bit of content to show up.
Hooks are generally used to make structural changes to your site. If I just want to add an image to a blog post, I don’t need a hook for that – I can plop the image into the post editor. But if I want something to show in a certain spot on every page of the site, or on multiple pages of the site, a hook is a good way to do it.
Why Would I Use Genesis Hooks?
Here are a few situations where it might make sense to use Genesis Hooks.
To add a new widget area to your site. Maybe you want to add a widget area to the bottom of all your blog posts so you can put an opt-in for your email list there. To do this, you would need to use a Genesis hook to tell the widget area where it needs to show up. In other words, if your site structure is a map, you’re sticking a pushpin on the area at the bottom of your posts.
To change the structure of your site. If your child theme places both navigation menus (primary and secondary) under the header, you may want to show one of them above the header instead. You can use a function to unhook the nav from its current location and hook it in a different place.
To places ads in certain places. Have you ever needed to put an advertisement or banner in a specific location, but didn’t know how to get it there? My clients have this problem a lot – an ad rep says a banner needs to be above the header or right before the footer, for instance, and they email me going, “Um, how in the world do I do this?” With Genesis hooks, that’s how!
How to Use Genesis Hooks
Now you know what Genesis hooks are and a few potential uses for them, but how do you actually use them on your site? There are two main ways to do this – the one you choose depends on your preference and level of comfort with editing theme files.
Method #1: The Genesis Simple Hooks plugin
For the average Genesis user, I recommend the Genesis Simple Hooks plugin. It gives you a settings page with every single Genesis hook listed (meaning you don’t necessarily need to memorize what hooks are available). There’s a box under each hook where you can paste HTML, PHP, and/or shortcodes.
One advantage of using the Simple Hooks plugin is the ability to maintain your changes no matter what child theme you use. So if you switch to a different child theme, your ad code or after-post widget area will still be there. However, if the code you paste in is missing a character or causes a PHP error, you may have to deactivate the plugin via FTP to get back into your WordPress dashboard.
Method #2: Editing functions.php (or creating your own simple plugin)
This is my preferred way to use Genesis hooks, though that doesn’t necessarily make it better than the Simple Hooks plugin. There are certain changes I make to almost every site I work on, so I either upload the standard Genesis functionality plugin I created or paste all the functions from it into the child theme’s functions.php file. For me, this is faster than scrolling through the Simple Hooks options and finding the hook I need.
This method also has the potential to “break” your site, meaning you need FTP or File Manager access in case something goes wrong. Any functions you add to functions.php will be specific to that child theme, meaning you would need to add them again if you change to another child theme later.
How Do I Know What Code to Use with Genesis Hooks?
So you’ve installed the Simple Hooks plugin and you’re itching to use it. What kind of code do you use, and where do you get it?
When it comes to customizing Genesis, Google is your best friend. There are thousands of tutorials available for everything from adding widget areas to putting in banner ads. Here are a few good places to find code snippets:
- The Genesis Visual Hook Guide – essential for working with hooks
- StudioPress Tutorials – a list of tutorials for common Genesis customizations
- Genesis Snippets – a reference site containing tons of code snippets
HIGHLY RECOMMENDED: This video from BobWP shows the Simple Hooks plugin in use. This is the single best way to understand how this works if you’re still unsure.
What questions do you have about using Genesis hooks? Have you made any cool customizations to your site with the Simple Hooks plugin or functions you’ve added to your theme? I’d love to hear from you!
Comments are now closed for this article.
Miranda says
NutsandBolts, thank you so much for your help this evening in the forum, you can’t imagine the relief and satisfaction from managing to make that slider border sit correctly!
You’ve been really helpful several times, and I see that you have been to many other people too. It’s much appreciated 🙂
Andrea Whitmer says
No problem! I’m glad I was able to help out. 🙂
Charles Chalfant says
I Just wanted to say thank you for all your assistance on the Genesis forums.
To take time to help others is a welcoming attribute.
You deserve all the luck in the world……
Andrea Whitmer says
No problem, Charles! Glad I’ve been able to help out. Thanks so much for stopping by. 🙂
Carol says
Thanks for the info! I do have a quick question: I am using a child theme with no header.php, but I need to map the header image. can I add the code into the structure using simple hooks?
Thanks!
Andrea Whitmer says
Yep, you sure can! There are a number of hooks for the header to choose from, and you can add the HTML to the appropriate area and tweak as needed. Hope that helps!
Liz says
Hi Andrea,
thanks for all your kind contributions in the Studiopress forum: many a problem solved thanks to you’re chipping in! I am now getting to grips with hooks, which while a little difficult to ‘grasp’ (no pun intended), I am working my route through them with your guide here and the primer Simple Hooks plugin. I am grappling with styling a header and including header-right widget for social icons. I wanted to create a custom header but not sure a full width one can then allow that header-right widget?
Also, I love the black strip on top of your header that include tel nos etc and wondered if that was a Genesis Hook area, and if so which one? How does one create the 3 areas within it to get phone, (linked) email and a social media?
any pointers you have time to jot down would be wonderful! Tnx.
Andrea Whitmer says
Hi Liz,
Most of the time, you can put the header right widget on top of a full-width header. You may need to adjust the CSS to get it to display correctly (and it depends on the child theme) but it’s usually no problem.
My top black strip is a set of two widget areas. It was created using the genesis_before_header hook and Carrie Dils’ tutorial on adding a utility bar: http://www.carriedils.com/widget-area-above-header-genesis/ - Hope that helps!
Liz says
Wonderful, thanks Andrea. I discovered Carrie Dils’ tutorial only today, and it makes perfect sense. Off to trial it all out tonight. Thanks again.
Liz says
Still fiddling around with the utility bar (social icons show but I can’t seem to change the strip to the right colour!). Just wondered Andrea what social icons you use to display your phone and email in the left widget. Thanks!
Andrea Whitmer says
I’m using FontAwesome for both my social icons and all the other icons on the site.
Here’s a tutorial on using them in a Genesis menu (which is what I did on the right side): http://genesisdesignr.com/font-awesome-icons-genesis-menu/
And here’s one for using it in general (which is the way I include them on the left and elsewhere on the site): http://webendev.com/add-font-awesome-icons-to-wordpress/
Liz says
Thanks so much Andrea for the insider guide and tips! Much appreciated.
manekeniko says
The Simple Hooks plugin no longer works with the latest version of WP and Genesis. I used it for a while, then it threw my site offline after moving the sidebar to the bottom of the footer after I updated versions. This unsupported plugin messed me up real bad, until I figured out the cause.
Andrea Whitmer says
That’s strange - a number of my clients are using Simple Hooks with no problems at all. Probably more than 30 people/sites. Sorry to hear it didn’t work for you!
Carolyn Y says
This was great, thank you. The link at the bottom isn’t available anymore (Bob’s) - do you have another or the new URL?
Andrea Whitmer says
Thanks for catching that - he has restructured his site recently and I guess the video found a new home. I’ve changed the button to link directly to the video on Vimeo. 🙂
Kan says
Hi Andrea..
I’m planing to delve in to Genesis… wondering what’s this theme you’re using.. on nuts and bolts media?. Thanks
Andrea Whitmer says
Hi Kan,
This is a custom theme based on Genesis Sample.
Gbowebmaster says
This article is very well written, much better than what studiopress have. You should get a job at studiopress. Many thanks.
Andrea Whitmer says
Actually I do work for StudioPress support, so I got a kick out of your comment! Thanks so much for the kind words - I’m glad the article was helpful for you. 🙂
Eleanor says
Your posts are some of the most clear and concise I’ve come across. As someone new to Genesis and WordPress I can’t tell you how much I appreciate them. Keep up the good work and thanks for taking the time.
Andrea Whitmer says
Thanks so much, Eleanor! I’m glad to hear you found the articles helpful. 🙂