Starting with version 1.5 of the Graphene theme, a new options tab called “Advanced” is added to the theme’s options page. The highlight of this tab is a new option called “Action Hooks Widget Areas”.

The Advanced tab in the theme’s options page is really reserved for options that require proper understanding of what goes under the hood of WordPress in order to use them properly. But as you’ll see, the “Action Hooks Widget Areas” option is built such that it doesn’t actually require you to understand much about how WordPress works behind the scene.

So what is this feature all about?

A lot of support requests in the theme’s support forum involves questions like “how do I add this to that” or “how do I put this text just under that thing there”. A lot of the time people would just resort to editing the theme’s files and simply add whatever chunk of codes or text exactly where they want it to appear.

But that is bad. The Graphene theme is in active development (as it has been since its initial public release), and every couple of months or so a newer version is released, which incorporates many new features, plugin compatibility, bugfixes, etc. If you edit the theme’s files directly, you’ll lose those changes when you update the theme. So if you made the edit this way, you’re really stuck between not updating the theme (and miss out on all the goodies) and having to do the customisations all over again.

Fortunately, WordPress provides an excellent framework in modifying and extending both WordPress itself and any other plugins and themes that are developed (properly) for it, via means of action hook. This feature simply leverage the capabilities of that framework to provide an additional layer of customisability for the theme, without having to modify any of the theme’s files.

Action what?

Action hooks (and the other type of hooks called “filter hooks“) are really the backbone of WordPress’ extendability and customisability. Taking an excerpt out this excellent introduction to action hooks by Nathan Rice:

This can be a very easy, and a somewhat difficult thing to explain. Action hooks are essentially placeholders. Wherever an action hook is placed, it will execute any code that has been “hooked” to it.

So, let’s try to visualize this with some default WordPress action hooks that are in most themes. You can find wp_head and wp_footer in just about every single theme available, and most people don’t realize these are action hooks. They’re simply placeholders that plugins can use to insert code into the <head> and footer of the theme. Often times, they use these action hooks to insert things like CSS or Analytics code. They create a function that generates the code, and then “hook” that function to either wp_head or wp_footer.

If I could wrap up the concept in one sentence, it would be this: WordPress action hooks are a means of providing a way for other developers to insert their own code in specific locations within your code, in order to change or expand the functionality of your code.

Come on, that’s still gibberish!

A lot of non-coders who are just getting started with WordPress are terrified at the thought of setting up a child theme, and even more terrified when they hear people recommending to them to use action hook. Most have absolutely no idea what this hook is and what it does. While action hooks have been widely used by developers, they’re mostly not accessible to non-coders.

But most non-coders will already be familiar with widgets in WordPress. Drag and drop, tick here and there, write just a little bit of text, who doesn’t like that? So what this option aims to achieve is simply to provide a bridge between widgets and action hooks so that WordPress-newcomers can leverage the power of action hooks with relative ease.

So how do I use it?

Simple. Say that you want to add some text (or any other HTML elements) at the top of the page, before the slider and the sidebar. All you need to do is enable the widget area for the particular action hook that you want, in this case the graphene_before_content-main action hook. Then go to WP Admin > Widgets, and you’ll see a new widget area called “Graphene Before Content-main” has been added. Simply add any widget to that widget area, and it will show up exactly where that action hook is defined in the theme.

Three steps to add custom content anywhere with the Graphene theme's "Action Hooks Widget Areas" option.

The best method to determine which action hook to use is to take a look at the theme’s files and figure out what action hooks is placed where. But if you’re not familiar with this, a few educated guesses and trials will eventually get you what you wanted.

Even more control

If you use the theme’s “Action Hooks Widget Areas” together with the Widget Logic plugin, you’ll be able to have more granular control on which pages your widget will appear. Use it with the PHP Code Widget plugin, and you can add php codes practically anywhere in the theme, just by using this feature.

So you see, it’s simple and easy. No need to mess around with the theme’s files, and most importantly, whatever you add will remain there when you update the theme.

Not an excuse to be lazy

While the theme’s “Action Hooks Widget Areas” option when combined with the Widget Logic and PHP Code Widget plugins grants you a whole new dimension of customisability for the theme, nothing beats a proper understanding of the action hooks concept itself, and implementing it via a child theme.

The purpose of this feature is not to replace the use of action hooks and child theme entirely, but rather, to provide a more gradual learning curve for non-coders and those who are new to WordPress. It allows you to use some of the power granted by action hooks, but only with the proper understanding of action hooks will you be able to truly leverage the full capabilities of this framework.

More help

Josh Lobe has made an excellent video tutorial detailing the use of the theme’s “Action Hooks Widget Areas” option. You can view it at his website.

If you’re stuck somewhere, there’s always the Support Forum.