One of the things that confused me the most when I switched to the Genesis Framework was understanding what hooks and filters were.
In WordPress hooks and filters help developers to extend the functionality of your website.
Genesis has its own set of hook and filters on top of what’s already baked into WordPress.
If you’re learning to use the Genesis Framework to it’s full potential having an understanding of how to use these hooks and filters is not optional.
I didn’t have a ton of experience with PHP and these concepts seem foreign and scary to me.
I thought to myself, “If only I had someone to explain this to me like I was a 5-year-old.” This is known on Reddit as an ELI5 or “Explain Like I’m Five.”
The intent is to take an an other wise highly technical or complex concept and break it down into terms even a small child could understand.
I am going to pretend you’re a 5 year old and explain what these things are with the best analogy I’ve ever heard to demonstrate what hooks and filters do.
My goal is to take you from “Hooks and filters WTF is that?” to “Ah okay that makes sense now.”
Genesis Hooks Explained
We’re going to use our imagination a little bit.
Genesis hooks are a bit like actual hooks on a coat rack.
Imagine that your websites navigation is a jacket hanging on the hook, basically all the widget and content areas are a different article of clothing hanging on the hook.
The hooks represent the different areas in the overall structure of your website. For example, there is a hook which is the “header area” known as genesis_header , the hook with is the “footer area” known as genesis_footer.
There is a hook for just about every area on your website. Here’s what the Genesis Sample Theme looks like hooks and all.
Any one of these areas can be used to do things like add or remove a widget area to, move featured images above or below post, add a new sidebar area, add a social media script after the title of each post, etc..
There is a total of 58 hooks in Genesis. though odds are you’ll mostly be using the same few hooks over and over again while hardly touching the rest.
Genesis Visual Hooks
To get a better understanding of the hooks used in Genesis, I highly recommend you download the Genesis Visual Hook Guide plugin. Here’s a short video showing you how to use the Genesis Visual Hook Guide.
List Of Genesis Hooks
- genesis_pre
- genesis_pre_framework
- genesis_title
- genesis_meta
- genesis_before
- genesis_after
- genesis_before_header
- genesis_header
- genesis_after_header
- genesis_site_title
- genesis_site_description
- genesis_before_content_sidebar_wrap
- genesis_after_content_sidebar_wrap
- genesis_before_content
- genesis_after_content
- genesis_sidebar
- genesis_before_sidebar_widget_area
- genesis_after_sidebar_widget_area
- genesis_sidebar_alt
- genesis_before_sidebar_alt_widget_area
- genesis_after_sidebar_alt_widget_area
- genesis_before_footer
- genesis_footer
- genesis_after_footer
- genesis_before_loop
- genesis_loop
- genesis_after_loop
- genesis_after_endwhile
- genesis_loop_else
- genesis_before_entry (HTML5)
- genesis_after_entry (HTML5)
- genesis_entry_header (HTML5)
- genesis_before_entry_content (HTML5)
- genesis_entry_content (HTML5)
- genesis_after_entry_content (HTML5)
- genesis_entry_footer (HTML5)
- genesis_before_post (XHTML)
- genesis_after_post (XHTML)
- genesis_before_post_title (XHTML)
- genesis_post_title (XHTML)
- genesis_after_post_title (XHTML)
- genesis_before_post_content (XHTML)
- genesis_post_content (XHTML)
- genesis_after_post_content (XHTML)
- genesis_before_comments
- genesis_comments
- genesis_after_comments
- genesis_list_comments
- genesis_before_pings
- genesis_pings
- genesis_after_pings
- genesis_list_pings
- genesis_before_comment
- genesis_after_comment
- genesis_before_comment_form
- genesis_comment_form
- genesis_after_comment_form
When we move our site’s navigation bar, in essence, we are unhooking it from the genesis_after_header hook (which is the default) and moving it to another hook of our choosing.
Here’s what this looks like in code.
It’s easier to understand what’s going on here if we continue to use our coat hooks analogy. We’re taking something call genesis_do_nav (our fancy coat), which as you rightfully guessed makes the navigation bar appear and removing it from the genesis_after_header coat hook and placing it on the genesis_before_header coat hook. The end result? We’ve just moved the navigation from after the header to before the header area. If you have a look at some of the code examples on this site you’ll see the hooks listed above come up time and time again to insert new functionality in specific areas within the page.
Genesis Filters Explained
Filters allow you to catch certain data and manipulate it before it’s sent out to the web browser. Whereas hooks are typically used to do or undo a certain action (i.e. show the navigation here), filters affect allow you to directly modify how your websites data will be displayed on the front end.
What this code does, is add a custom filter to the genesis_footer_creds_text that modifies the default footer text defined by the Genesis parent theme.
Some other things filters might be used for include changing the post info, changing the read more link text, modifying the way breadcrumbs are displayed, add custom HTML code to the navigation bar, etc…