Action hooks are one of the most defining developer features of WordPress. They are points in the software that you can “hook to” in order to execute your own code. Sweetness is filled with tons of its own custom action hooks. Having most of the framework’s functionality hooked to an action, in one way or another, is crucial in making the theme as extendable for you, as possible.
Concept of Action Hooks
If you’re looking to take your child theme past simply making CSS customizations and dive into PHP, and using your child theme’s functions.php, the concept of action hooks one of the most important things you’ll want to master.
Action hooks are used all throughout WordPress. They allow you to “hook to” them, in order to execute your custom functionality.
And in addition to that, theme and plugin developers can also create their own custom action hooks in their products, for other developers to hook to. This is a very important step theme and plugin developers can take, to make their products more extendable to other developers.
Within the Sweetness framework, this is what we’ve done for you. We make extensive use hooks, with just about every piece of functionality we add. This means you can add your own functionality, or remove something the framework is doing, all from your child theme’s functions.php.
What an Action Hook Looks Like
If you browse through WordPress core, you can find the function do_action() called all over the place. The strings passed in, are actions you can hook to, to execute custom code. And then browsing files of the theme, you can spot where we’ve added tons of these action hooks, as well.
In addition to seeing an action hook defined simply as do_action('bne_header_sticky_menu_before'), you may see them wrapped in a function call such as bne_main_before().
Available Action Hooks
The below table list all of the available action hooks within the framework. For the most part, they are placed between main content sections and within the inner content areas of each section. These action hooks make it super easy to customize additional content within areas of the theme without having to override template files such as header.php or footer.php.
| Name | Located | Description |
|---|---|---|
| bne_before | header.php | Before any theme specific page markup. Placed before #wrapper |
| bne_header_before | header.php | Before the header markup. Placed before #header-wrapper |
| bne_header_content_before | header.php | Within the header wrapper but before the header content. |
| bne_header_addon_before | parts.php | Placed within the header content which is opposite of the logo but before .header-addon. |
| bne_header_addon_after | parts.php | Placed within the header content which is opposite of the logo but after .header-addon. |
| bne_header_content_after | header.php | Within the header wrapper but after the header content. |
| bne_header_after | header.php | After the header markup and before #featured-wrapper and #main-content-wrapper |
| bne_main_before | header.php | After the header and before the main content area. |
| bne_sidebar_before | sidebar-left.php & sidebar-right.php | Before the first widget within a sidebar. |
| bne_sidebar_after | sidebar-left.php & sidebar-right.php | After the last widget within a sidebar. |
| bne_page_footer | page.php | Placed after any page content. |
| bne_single_footer | single.php | Placed after any blog post content including custom post types if they rely on single.php. |
| bne_footer_before | footer.php | Before the footer markup. Placed before #footer-wrapper |
| bne_footer_content_before | footer.php | Before the footer content and footer widgets but within #footer-wrapper. |
| bne_footer_content_after | footer.php | After the footer content and footer widgets but within #footer-wrapper. |
| bne_footer_after | footer.php | After the footer markup. Placed after #footer-wrapper |
| bne_after | footer.php | after any theme specific page markup. Placed after #wrapper |
| bne_header_menu_before | parts.php | Added before the primary header menu, .menu-wrapper. |
| bne_header_menu_after | parts.php | Added before the primary header menu, .menu-wrapper. |
| bne_header_sticky_menu_before | parts.php | Added within sticky header menu, #sticky-menu but before the sticky menu contents. |
| bne_header_sticky_menu_after | parts.php | Added within sticky header menu, #sticky-menu but after the sticky menu contents. |
Example #1
As you can see from the list above, we have numerous areas for you to extend with your custom content including moving core elements around. But lets look at an example. Let's say you need to add an announcement bar to the header of your website. The best hook to use would be bne_before as we want to have it go full width along the page. If you would want it within the header part, then you would usebne_header_before.
With the above code, we've tapped into the bne_header_before hook and added an announcement. This will be placed above the header on all of our pages. Hint: The .content-area-width class is a global class that uses the content width as defined in Theme Options. Use this to always line up your inner content with the page body.