Thesis hooks. A complete newbies guide

Want to make Thesis a gazillion times more awesome than it already is? Yes? Excellent! And remarkably simple.

What makes Thesis so clever is that it uses a bunch of ‘hooks’ to allow you to make changes to the look & feel of your Thesis website in seconds.

Thesis actions & hooks

In WordPress, and in Thesis, hooks are used to make theme development easier. Think of a hook as a placeholder in your theme, e.g. thesis_hook_before_header is Thesis’ hook/placeholder for stuff you’d want to place before your header (the bit that contains your logo and tagline).

A great example of hooks in use is an action used to switch the Thesis menu from above the header to below the header, like this:

// Place Thesis Navigation beneath the Logo

remove_action('thesis_hook_before_header' , 'thesis_nav_menu');
add_action('thesis_hook_after_header' , 'thesis_nav_menu');

Note: Everything you’re seeing here goes on in the custom_functions.php file, contained within Thesis’ custom folder.

What’s happening is that we’re removing the thesis menu (thesis_nav_menu) from its default hook position of thesis_hook_before_header and adding a new action (containing the same thesis_nav_menu function) to the thesis_hook_after_header hook position. Here’s a visual example to help you understand.

There are a lot of hooks available to you in the Thesis theme, which is one reason why the theme framework is so versatile. DIYthemes have prepared a complete list of Thesis hooks and Greg Rickaby has created an excellent visual overview of the hooks positions.

Thesis functions

A function is a bit of code that makes something happen to your Thesis-driven blog. Functions, not hooks, are the bit that confuse Thesis beginners. The odd thing about functions is that they’re ridiculously simple once you understand what’s going on. Let’s take a look:

function custom_function() {
?>
	<p>Insert your HTML code here...</p>
<?php
}

What’s happening here is that:

1. You’re telling Thesis that you would like a new function, called custom_function in this case (it can be called anything you like, although your function name should relate to what it does, e.g. footer_credits(), header_links(), etc.).
2. You’re adding an opening curly bracket { to start the function.
3. You’re closing out your PHP code by using ?> (this allows you to add HTML in the next section).
4. You’re adding some HTML using the <p> tag.
5. You’re re-opening the PHP code so the function can complete itself using <?php.
6. You’re ending the function using a closing curly bracket }.

You can add anything you like to the HTML section. You could add a div, some PHP, some JavaScript, an image, a whole new page. Anything.

Hooks and functions together

Now let’s say you wanted to add some links to the header of your site. Perhaps you’ll link out to Facebook, Twitter and your RSS feed. We already know (from the DIYthemes hooks list) that the hook (or placeholder) we want to use to place our new links is thesis_hook_header . So all we need to do is (a) create a new function and (b) add the hook. Something like this:

// Add custom links in the header

function header_links() {
?>
	<p id="header_links"><a href="#">Facebook</a> | <a href="#">Twitter</a> | <a href="#">RSS</a></p>
<?php
}

add_action('thesis_hook_header','header_links');

Take a closer look:

1. We’re defining a new function (header_links).
2. We’re using the curly bracket to open the function.
3. We’re closing out our PHP to allow for some HTML.
4. We’re adding our HTML.
5. We’re re-opening PHP.
6. We’re closing out the function with a curly bracket.
7. And finally, we’re adding the function header_links to a hook thesis_hook_header.

Ohhhhhh. Simple, isn’t it?