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.

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.

Syahir, you have been a tremendous help to me along the way. As I solidify my understanding of WordPress, and more specifically the Graphene theme; I will be sure to recommend it to all future clients interested in building websites (along with donations, of course).

The functionality and customization possible within the Graphene theme is mind-blowing. It is obvious you not only take pride in your work, but you also stand behind it 100% with prompt forum support, backed with knowledgeable and concise explanations.

Once again, thank you!

Mohsen

thanks for your nice theme, after updating my theme the sort of pages goes to alphabetical sort and sorting of order pages doesn’t work. could you help me how to fix it.

Marcio

Hi,

I like your theme, but i have detected a bug.

I have 4 pages in my website, by order. But if i put the graphene theme, all my pages are automatically organized by alphabetic order, and not by my predefined definitions.

Thank you if you can solve this problem.

http://www.khairul-syahir.com Syahir Hakim

Hi Marcio,

I generally don’t answer support requests for the Graphene theme here, since it’s not exactly relevant to the post above. Please try to refrain from asking for support requests using the comment form on this site in the future.

I have provided a free Support Forum for all Graphene theme support requests, which is a much better-suited environment for attending to support requests.

I was helping a friend to set up her new website. (It’s not released yet). I showed her around a bit, and for aesthetic reasons, she settled for Graphene.

Then she asked me to help her place a logo just above the header image. I was positively surprised, when I found this super convenient way to tick here, then get a dynamically created widget area, where I could easily place the logo.

I had no idea, that we simply were lucky and that you released these fantastic tools with this update (which she upgraded with a couple of clicks).

Great work! And it makes me understand a bit better, how I next time would go around setting up a child theme, without copying and editing the whole CSS-structure.

Start thinking of migrating my other sites to Graphene, as well.

Thanks for making the task so easy!

-V-

Hello, I have been messing around with your Graphene theme, Its nice.

I have been trying to relocate the slider_nav so that it appears over the slider background images. I just cant seem to get it. Any advice?

Thank You

-V-

http://accracabservices.com Arnold

I just Installed the Graphene Theme and i must say I love it, will make a donation soon.

http://www.markprinsen.nl Mark

Thanks for the Graphene theme. I like it very much. I have one question. My slider does not load pictures of my post when I embed these in my postings from Flickr. It this something that I can solve?

http://www.bodrumpeninsulatravelguide.co.uk Roving Jay

Fabulous explanation. I’ve just loaded this theme, and have been tinkering around with the settings. I found the action hooks and had no idea what they were. Now, after one post, you’ve just expanded my knowledge base. Thanks so much. I belive I’m falling in love with this theme!

Jesse

HELP!!! My blog band that scolls across the page runs to slow and doesnt stop at each post so they can read it and then go on to the next!? I have tried in setting to fix it but it doesn’t help!? We have a meeting with the Mayor here in Vancouver and a this week and a Media Press Release and it HAS to work! Please help. Thank you for your time.

I’m learning how to make a proper child-theme, and this article about the hooks is quite helpful. Now I understand better how I can keep certain changes to my theme while changing other things, and how I can tinker with layout options better.