Woo themes offer a great feature called Hook Manager which allows you to add HTML, text or even short-codes to any location there’s a hook. Normally with most other themes you would need to write some code and add it to your themes functions.php file.
Not if you’re using a Woo Theme.
Lets take a closer look at the Hook Manager and see how it works:
You’ll see five tabs on the left hand side which are the different sections of your website. Each section offers a range of hooks where you can add content simply by pasting it into the correct box.
- Header Hooks
- Main Hooks
- Post Hooks
- Footer Hooks
- WordPress Hooks
Example: If you wanted to add a banner or line or two of text/html to the end of every post, you would click the Post tab on the left and look for the hook which works in the location you want to add the content.
When you arrive at the Post Hooks, you’ll see a range of different boxes which represent the different locations of hooks for that particular section.
Here’s the 4 locations of the hooks for the Post section:
woo_post_before – Executed before each post.
woo_post_inside_before – Executed at the top, inside each post’s DIV tag.
woo_post_inside_after – Executed at the bottom, inside each post’s DIV tag.
woo_post_after – Executed after each post.
I’m sure by now you understand what hooks are so all you need to do is add the text or code to the correct box and the content will display in that location on all posts.
Not many themes offer a hook manager like Woo Themes so if you’re not using this theme you’ll need to add the hook and function along with other code and text to your themes functions.php file
Here’s a complete map of all Woo Hooks and the locations they execute.
Woo Themes Hook Map
You can use this map along with the Hook Manager to add text, html, links or even ads to any location which offers a hook by simply pasting the code into the correct box inside the Hook Manager.
This is a great way to start learning about hooks if you plan on learning php code where hooks and filters play a large part in WordPress customization.
Another great feature of the Hook Manager is you can execute WordPress shortcodes in they hook locations as well.
Using Woo Hooks In Custom Functions
If you want to add content to any of the hooks positions in a Woo theme, you can also use a custom function. The custom functions should be placed in your child themes functions.php file.
As you can see with the Hook Manager, it doesn’t enable you to use every hook that Woo offers so you may need to use a custom function instead.
Here’s a few examples of PHP code using some popular hooks which are included in all Woo themes.You can use or modify these code snippets in order to hook in content or filter a function using any of the Woo hooks available.
All Woo Hooks
You can use all of these hooks in custom functions in your child themes functions.php file or the custom PHP section of your themes functions file:
* - woo_head()
* - woo_top()
* - woo_header_before()
* - woo_header_inside()
* - woo_header_after()
* - woo_nav_before()
* - woo_nav_inside()
* - woo_nav_after()
* - woo_content_before()
* - woo_cotnent_after()
* - woo_main_before()
* - woo_main_after()
* - woo_post_before()
* - woo_post_after()
* - woo_post_inside_before()
* - woo_post_inside_after()
* - woo_loop_before()
* - woo_loop_after()
* - woo_tumblog_content_before()
* - woo_tumblog_content_after()
* - woo_sidebar_before()
* - woo_sidebar_inside_before()
* - woo_sidebar_inside_after()
* - woo_sidebar_after()
* - woo_footer_top()
* - woo_footer_before()
* - woo_footer_inside()
* - woo_footer_after()
* - woo_foot()
On top of this, Woo also offer a huge range of hooks for the Woo Commerce plugin.
Add Widget To Any Woo Theme
Here’s an example of using using a hook to create a widget:
/** Register Before Post Widget Area.*/
function wpsites_before_post_widget() {
register_sidebar( array(
'name' => 'Before Post Widget',
'id' => 'before-post',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'wpsites_before_post_widget' );
/** Hook In Widget Before Post Content .*/
function before_post_widget() {
if ( is_single() && is_active_sidebar( 'before-post' ) ) {
dynamic_sidebar('before-post', array(
'before' => '<div class="before-post">',
'after' => '</div>',
) );
}
}
add_action( 'woo_post_before', 'before_post_widget' );
The above code will create a new widget which displays your content before all single posts.
Please copy ALL the PHP code above and paste it in the custom functions section of your themes functions.php file or in the functions file of your child theme.
Other Themes Hook Options
Clearly Woo themes hook manager is lacking when compared to some of the most popular theme frameworks which also provide a feature like this.
The Genesis Simple Hooks plugin and Thesis hook management plugin are far superior as they enable you to execute PHP code in any hook position which isn’t possible with Woo’s hook manager.
Normally the selector is the HTML element you wish to style. In this case its the title as indicated by #title selector with blue text and using the Oswald font family.
If you’ve already started blogging then i assume you’ve written a blog post and already discovered your HTML editor next to the Visual editor tab. Here’s what i’m talking about. This is the Visual View you get when you write or edit a blog post in WordPress.
