WordPress Hooks and Thesis 1.4

by Crystal on February 4, 2009

WordPress Pumpkin
Image by Eric M Martin via Flickr

They say that the best way to make sure you really ‘get’ a concept is to try to teach it, so in that spirit, after a week or two of exploring a new aspect of WordPress, “Hooks”, I thought I’d share…

PS To skip straight to the review, click here

What are WordPress Hooks and how do I use them?

When I bought the Thesis theme, I had been told by any number of users about how easily it can be customised, and how fantastic it was for SEO (Search Engine Optimisation).  Envisioning a neat dashboard a la wordpress, with tickboxes and dropdowns for every occasion, I was a little taken aback that it wasn’t quite like that (this was back at v1.3.3 – the latest changes are very different).  I discovered that most of this ability to customise was through something called ‘hooks’ – and everything I looked up to understand them seemed to expect a level of programming experience that I just don’t have.

Don’t get me wrong.  Thesis has many of those fantastic tick a box options – especially in the new Version 1.4.  (Up to 1.4.2 now) But everybody agrees that the real power to customise your theme lies in using wordpress hooks.  So, after an initial panic session when I spun in circles trying to decipher how many uni courses I’d need, or how much I’d have to raise for a programmer, (or whether I’d made a mistake in buying thesis in the first place), I took a deep breath, cap in hand, and waded in.

WordPress Hooks Explained

If you’ve played around with your web browser at all, you’d be familiar with the idea of add-ons (or plugins).  They build a bit extra on top of the basic program that you download and start with.  Adding your customisations with hooks is a bit like adding extra abilities to firefox with an addon or plugin. The hook is just like it’s name – a hook for you to attach something to, either a bit of text, a piece of html code, or a function.

You’ll find hooks for most of the places that people want to add things – before the header, after the header, before and after the footer, etc.  It’s a little bit extra in the code for that part of the page that allows you to attach your customisation, without having to touch the programming that creates the page.  It works really well with functions, I discovered. (Take 3 deep breaths and don’t panic – a lot of them come built in.)

Using WordPress Hooks you can add those bits of extra code in, without having to go into the theme editor and start modifying stuff that you’ll never find again when you next change, or upgrade, your theme.  Using them you can change the look of your site to just about anything, perform custom actions, or even take out parts of the site that you don’t want showing up.

Thesis Theme and Hooks

The Thesis theme has taken this idea and run with it.  There are extra hooks attached to just about every part of the theme, so if, for example, you want to make a change to what goes in above the header, you can write the changes you’d like – but you don’t have to figure out which file gets modified.  It ALL goes into two files: one for any any styling/layout changes you want to make (custom.css), and another for any functions (or anything else) you want to add to the theme (custom_functions.php).

Back those files up, and you’ve instantly got a full record of every tweak you’ve done, that you can re-apply to any new version by just dropping them into the appropriate folder (strangely enough, called ‘custom’).  That’s the beauty and power of it.  You can either have fun getting your hands dirty with one single file for your tweaks (easy enough to save and restore), or as I discovered, simply install a free plugin called ‘Thesis Open Hook”.  Naturally I only discovered how easy this made it AFTER I started getting my hands dirty, of course!!!

The Cheat Easy Version

Hardly needs writing.  The Plugin (by KingdomGeek, you can get it here) works on the Thesis theme, which is a paid one I’m currently testing to roll out here in a couple of weeks.  I have no idea if there’s a version for other themes, you might want to check the support section at the site.  Once it’s installed, you have an extra tab in your wordpress control panel, you go down the list and enter what you’d like against any of the areas (hooks) that are there.  You can tick for it to run php code, too, if you want.  It’s really simple.

The ‘Dirty Hands’ Version

Hooks are really designed for attaching functions to.  Once you write out in your custom-functions.php file exactly what you want to go into that spot, then when wordpress loads thesis, it loads the standard theme first, and then runs any extra ‘add-ons’ you’ve put into that file.  If there’s something already there, of course, you need to tell it to unplug that before it plugs your new functions in.

For many functions, like the navigation menu, they already exist, and if you want to move them around you just have to tell your list of custom functions to ‘unhook’ them from where they are (if they’re already on your site somewhere), then ‘hook’ them back in where you want them to go.  The example given on the thesis site is to move the navigation menu from above the header to just below it:

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

Since this is about doing something, instead of just formatting, this goes into the custom_functions.php file.

Custom_functions.php, deconstructed

Translated, there’s 3 parts to using this:

1. add_action/remove_action (either add something or take it away)
2. where to go to do it (tells wordpress to look at the place in the page marked by the hook ‘thesis_hook_before_header’)
3. what it’s going to add/remove.  In this case, the function is ‘thesis_nav_menu’.  For the first line which tells it to remove, it looks for what ‘thesis_nav_menu’ has put into the page at the first hook, and essentially hits the equivalent of ‘undo’.
The second line does the same, except it adds the code back in to the spot on the page marked by the hook ‘thesis_hook_after_header’)

That’s it.  Your theme is now tweaked.

Advanced Geeks and Geeks-in-training only

For more complex functions, things that aren’t already defined (like the nav_menu), you would still use the same structure as above, but you’d also need to create the function that you’re going to attach to the hook.  I’ve been approaching this the same way I tackled html design a few decades ago – find something close, then start tweaking it and watch what your tweaks do.  (That’s the main reason I have the theme in a sandbox version right now!)  It’s lots of fun, and I can see that using just that one custom_functions.php file, there’s very little you couldn’t customise your blog to do.

If you’re new at this, though, you might want to play around with all the tweaking you can do with what’s already in the system before you tackle writing a custom function.  That’s a whole other lesson (and one you can avoid entirely with a single post in the “programmer wanted” part of digitalpoint forums) ;)

Thesis 1.4.2 Review

I have to say, from an initial surge of panic and adrenaline at the learning curve I thought I had ahead of me to use Thesis, I’ve realised that most of my fears were entirely ungrounded.  I’m still going to try to master the art of writing functions and custom.css, of course (the geek in me won out on that one) but I’ve found there’s really no need to.

Version 1.4.2 is a monumental step forward from the quick play (and panic attack) I had with 1.3.3.  What diythemes is doing is gradually building a theme that ties into your wordpress dashboard and lets you change whatever you like, almost hands free.  If you’re wanting to do serious customisation, you’ve got a theme solid enough on the backend that you can be almost certain it won’t break, but if you’re just looking for something you can tweak into an individual look that fits you, your site and your audience exactly as you want it, you barely need to open the box.

I’ve been converted.  This theme is a powerful piece of work, and well worth every dollar I spent on it.  You’ll see it taking over here shortly…

{ 0 comments… add one now }

Leave a Comment

Spam Protection by WP-SpamFree

{ 2 trackbacks }

Previous post:

Next post: