Thesis Tutorial – Hooks for Dummies

By now, most people know that I am an evangelist for the Thesis theme and that the Sugarrae site actually runs on the theme.

When Chris Pearson announced the newest release of Thesis, it touted a bunch of great new features and fixed most of my previous gripes. Users who don’t know CSS or PHP have more control with the new thesis them than with any other theme I’ve ever seen.

It looked completely awesome until I downloaded it and saw that Thesis was now run completely on “hooks”. Not only did I not know what a hook was, the tutorials and discussions I saw about it scared the hell out of me.

My level of PHP knowledge (the code language WordPress is run on) is slight at best, thus why I was so thrilled in my earlier review:

You can do everything Thesis does without putting down any money buying the theme. Hell, you could also do this with wordpress if you knew how to (yes, no shit).

Now, you might be someone who can do all this without buying Thesis.

However, I am not. So I bought Thesis.

Now I suddenly was in need of “hooks” to do any “out of the ordinary” customizations (such as adding social bookmarking plugins). I opened up my index template and saw this (and ONLY this):

<?php thesis_html_framework(); ?>

The single post template was missing. The tutorials were in Japanese as far as I was concerned. Thesis was now either for the very basic or the very advanced… those of us hacking plugins into core files were out of luck. What the hell was I supposed to do now?

So I whined to told Pearson that I didn’t understand this or like this one bit. He assured me hooks were easy. He assured me once I learned them, I’d love them. He sent me a link to one of the tutorials. I suddenly realized how people who don’t know SEO must feel reading a document about latent semantic indexing. I also decided I was going to force Pearson to teach me how to do it so I could help non-programmers understand hooks the way Aaron helped the non technical understand LSI. Luckily for me (and hopefully you), he obliged.

The below is the completely “not technical” explanation of hooks, why you need them and how to make them (with examples you can then hack away with). It is chock full of incorrect terminology (I’m pretty sure “put this stuff here” is not part of any PHP instruction manual) and if you’re a programmer, you can go read the properly written tutorial here and spare me on showing me the size of your programming penis by pointing out how small mine is in the comments. ;-)

If you’re scared of that tutorial, confused and can’t follow these instructions:

1. construct a simple function to house your custom HTML
2. tell Thesis where to place your custom code by specifying the appropriate hook

Because you a. don’t know what a function is b. how to write one c. what a hook is or d. how to find “the appropriate” one, then you might want to check out the below.

How to Use Hooks without Learning Japanese

Hooks are basically each section of your theme separated into a single part as well as ways to define areas before and after those parts. Your header is controlled by one hook (thesis_hook_header) while you can use other hooks to put any code you choose before (thesis_hook_before_header) of after (thesis_hook_after_header). Every area has a hook and most areas also have hooks that will allow you to place things before or after them. Instead of the PHP code appearing on the actual page, only the call to the hook that says “put what’s in this hook here” does.

Hooks define where stuff appears and functions define what stuff appears.

A function is essentially code you can assign to a hook that should appear within a hook. For example:

function your_function_name() {
?>
YOUR RAW HTML
<?php
}

Hooks are basically the various parts of your blog, and functions are things that appear within them so to speak.

Now that you know what a hook is and what a function is, we’ll talk about how to add functions to your hooks to do things like add your own graphic into your header or add in social bookmarking buttons.

First things first, never change or edit existing hooks or functions. If you’re looking for the file that contains the core hooks or functions to change them, stop in your tracks. Unless you’re a programmer by trade, you will only risk messing something up by touching them. You never change existing hooks or functions in the core files – you simply add additional functions or replace existing functions with new ones.

Thesis will check your custom_functions.php for instructions and cross reference it so to speak with the core files. If you have removed a core hook or added an additional hook in the custom_functions.php file, then it will override the commands in its core files. (I’m no programmer folks and have already given you my disclaimer on using proper technical terminology to describe this above.)

The way I learned hooks was by example, so I am going to (attempt to) do the same here.

Thesis Hook Example 1: Changing your Header
Thesis Hook Example 2: Adding Social Bookmarking Icons
Thesis Hook Example 3: Changing the Thesis Footer
Thesis Hook Example 4: Adding the Social Profiles Plugin

Thesis Hook Example 1: Changing your Header

Let’s say you want to change your header to include a graphic or logo like my site does above.

Step 1: Upload the graphic you want to add to your header (if applicable) to the custom images folder (thesis > custom > images > put your image here)

Step 2: Open your custom_functions.php file (thesis > custom > custom_functions.php) in your favorite editor

Step 3: Underneath the example code already in the file, place the following code (this code assumes your blog is in the root):

/* Custom Header Image */
function add_header_image () {
echo "<a href=\"http://www.yourblogurl.com/\" title=\"Your Blog Title\">
<img src=\"THE-URL-OF-YOUR-LOGO-GOES-HERE\" alt=\"Your Blog Title\" height=\"170\" width=\"528\" style=\"border:0px\" />
</a>";
}
add_action('thesis_hook_after_title', 'add_header_image');

The /* Stuff Inside Here */ is a label for the code below so you know what it is at a single glance. This is not part of the actual “code”. The word “function” tells Thesis you want it to do something. The add_header_image is what I decided to name that function.

The http://www.yourblogurl.com tells Thesis where to link the blog header image to (usually the homepage) and the “Your Blog Title” tells it what the name of that link (hidden in code) should be. The link after img src is the address of where your logo is located, the alt is “Your Blog Title” (which will show in case the image doesn’t for some reason), the height and width of the image as well as whether or not to give the image a border are all defined next.

The add_action(‘thesis_hook_after_title’, ‘add_header_image’); line tells Thesis that you want it to add a function after the Title and the function you want to add is the one we just created – the add_header_image function. This function utilizes PHP within it, which I don’t fully understand, so that’s about all I can explain folks.

The good news is, this is the most common hook people need to add and to me, is also the most complicated hook. If you can fake make your way through this, you’ll be fine.

Thesis Hook Example 2: Adding Social Bookmarking Icons

This hook will show you how to add some social bookmarking or social media buttons to the bottom of only your single post pages (the actual page your full, individual blog post lives on) like my site does.

Step 1: Upload the graphics you want to use to link to the social sites (if applicable) to the custom images folder (thesis > custom > images > put your images here)

Step 2: Open your custom_functions.php file (thesis > custom > custom_functions.php) in your favorite editor

Step 3: Underneath the example code already in the file, place the following code (this code assumes your blog is in the root and is to place Stumbleupon, Digg, Delicious and a link to your RSS at the bottom of each individual post on your blog):

/* Custom Social Media After Post Hook */
function add_social_media () {
if (is_single()) {
?>
<p><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>"><img src="THE_URL_OF_YOUR_STUMBLE_GRAPHIC"></a><a href="http://digg.com/submit?phase=2&URL=<?php the_permalink() ?>"><img src="THE_URL_OF_YOUR_DIGG_GRAPHIC"></a><a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img src="THE_URL_OF_YOUR_DELICIOUS_GRAPHIC"></a><a href="http://www.linktoyourfeedhere.com"><img src="THE_URL_OF_YOUR_STUMBLE_GRAPHIC"></a></p>
<?php
   }
}
add_action('thesis_hook_after_post', 'add_social_media');

Same as before, the /* Stuff Inside Here */ is a label for the code below so you know what it is at a single glance. This is not part of the actual “code”. The word “function” tells Thesis you want it to do something. The add_social_media is what I decided to name that function.

The if (is_single()) is a conditional tag that basically tells Thesis to only use that function if the page is the single post page. If I changed it to be is_category() it would only run this function on category pages. You can find a full list of conditional tags here. If you wanted to change this to show the social bookmarking buttons on every page of the site, you’d remove the (is_single()) and the following { and later } like so:

/* Custom Social Media After Post Hook */
function add_social_media () {
?>
<p><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>"><img src="THE_URL_OF_YOUR_STUMBLE_GRAPHIC"></a><a href="http://digg.com/submit?phase=2&URL=<?php the_permalink() ?>"><img src="THE_URL_OF_YOUR_DIGG_GRAPHIC"></a><a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img src="THE_URL_OF_YOUR_DELICIOUS_GRAPHIC"></a><a href="http://www.linktoyourfeedhere.com"><img src="THE_URL_OF_YOUR_STUMBLE_GRAPHIC"></a></p>
<?php
}
add_action('thesis_hook_after_post', 'add_social_media');

The rest of the code is the traditional HTML code you’d use to add those bookmarking buttons to your theme normally.

The add_action(’thesis_hook_after_post’, ‘add_social_media’); line tells Thesis that you want it to add a function after the post content and the function you want to add is the one we created – the add_social_media function.

Thesis Hook Example 3: Changing the Thesis Footer

A lot of times people want to customize their footer to add copyright notices or other information. The example below will show you how to change your Thesis footer link.

Step 1: Open your custom_functions.php file (thesis > custom > custom_functions.php) in your favorite editor

Step 2: Underneath the example code already in the file, place the following code:

/* Custom Footer Hook */
remove_action('thesis_hook_footer', 'thesis_attribution');
function add_custom_footer () {
?>
<p>© 2008 Ourblog.com – All rights reserved. – <a href="http://www.ourblog.com/privacy-policy/">Privacy Policy</a></p>
<p>No content on this site may be reused in any fashion without written permission from Ourblog.com or whatever you want your footer to include</p>
<?php
}
add_action('thesis_hook_footer', 'add_custom_footer');

Again, the /* Stuff Inside Here */ is a label for the code below so you know what it is at a single glance. This is not part of the actual “code”. The remove_action(‘thesis_hook_footer’, ‘thesis_attribution’); tell Thesis that you wish to remove the regular Thesis footer function (thesis_attribution which we know is the default function the hook uses) from the thesis_hook_footer (the hook we know generates the footer). The word “function” tells Thesis you want it to do something. The add_custom_footer is what I decided to name that function.

The HTML for what I want to appear in the footer is added and then the add_action(‘thesis_hook_footer’, ‘add_custom_footer’); line tells Thesis you want to add a function to the thesis_hook_footer (the hook that creates the footer) and the function you want to add is the one we created – add_custom_footer.

So, the code above essentially says “Hey Thesis, please remove the code (thesis_attribution) you put into the footer (thesis_hook_footer) by default and replace it with our code (add_custom_footer). You can do that with any hook function you’d like.

Thesis Hook Example 4: Adding the Social Profiles Plugin

If you’re using the Social Profiles plugin we created here at Sugarrae, the following code will show you how to get the plugin output to appear in your comments area in the same way they appear in mine (after the author’s name, the date, etc but before the comment).

Step 1: upload and activate the Social Profiles plugin

Step 2: Open your custom_functions.php file (thesis > custom > custom_functions.php) in your favorite editor

Step 3: Underneath the example code already in the file, place the following code:

/* Custom Social Profiles for Comments Addition */
function add_social_profiles () {
global $comment;
?&#62
&#60?php cyc2_show_profiles($comment->user_id); ?&#62
&#60?php
}
add_action('thesis_hook_after_comment_meta', 'add_social_profiles');

Per usual, the /* Stuff Inside Here */ is a label for the code below so you know what it is at a single glance. This is not part of the actual “code”. The word “function” tells Thesis you want it to do something. The add_social_profiles is what I decided to name that function.

The PHP code for the plugin is added and then the add_action(‘thesis_hook_after_comment_meta’, ‘add_social_profiles’); line tells Thesis you want to add a function to the thesis_hook_after_comment_meta (the hook that creates the name, date, number, etc of commenters) and the function you want to add is the one we created – add_social_profiles.

Thesis Hooks are Easy

Above, I’ve shown you an example for changing the header (the most common customization you’d need to understand the hooks to do), how to add something to only one specific template (to a single page, to a category page, etc), how to add something to every page, how to remove a function from a hook and add a new one (the footer example) and how to add plugin code (in this case, by adding Social Profiles to the comments area as an example).

You’ll also find the following documentation (linked above in the examples) to be of use to you when using functions and hooks as well:

If you’re using the Thesis Theme already, I hope you find this tutorial to be a help in customizing the new version. If you’ve been on the fence about Thesis, I hope this has shown you hooks aren’t anything to be afraid of and that you can still customize Thesis without being a PHP guru. If you’re ready to make the leap to Thesis, you can get your copy of Thesis here.

About Rae Hoffman

Rae Hoffman aka "Sugarrae" is an affiliate marketing veteran and the CEO of PushFire, a search marketing agency specializing in SEO audits and link building strategies. She is also the author of the often controversial Sugarrae blog. You can connect with Rae via Twitter, Google+ and Facebook.

Sugarrae runs on the Genesis Framework

Genesis Framework

If you’re someone who doesn’t understand a lot of PHP, Genesis will give a ton of functionality that you wouldn’t be able to obtain otherwise with a simple control panel instead of having to alter code. For the advanced, Genesis has incredible customization possibilities via Genesis hooks.

The theme is not only highly customizable, but it has allowed me to run Sugarrae more professionally, with a much more targeted focus on monetization than it ever has been able to achieve before.

You can find out more about Genesis below:

Comments

  1. Rae,
    Obviously I am running genesis on my main listing website… but I have a multisite setup at http://svagents.com. I haven’t done anything with the main site of the network but I have several mini sites that I am running. I am using Catalyst-Dynamik, Optimizepress, and Genesis on separate sites within the network… I have read a lot about Thesis and actually just got it but I was a bit confused about how the hooks in worked… I have been reading up on it all day and so far this is the easiest to understand tutorial that I have come across. Thanks!!

  2. It is incredible irony that I have searched for numerous blog articles about Thesis today, and somehow I keep hitting blogs that don’t DATE their articles. This drives me absolutely crazy. Having no relevance of how old something is leaves me wondering if its completely out of date relative to other articles.

    Rae, is there some reason you leave the date stamp off your blog entries?

  3. Great tutorial, slowly the theme is starting to make some sense :)

  4. Hi there. I really like what you are saying but I am still in the dark. I touted THESIS for the last 3 years and now I feel abandoned!!! What I liked about Thesis is you opened it up, put headers in the header place, put content in the pages, could add plugins like easy columns to divide up your work.

    Now I am totally in the dark. I open the pages and I can’t load a header with the click of a button. I feel like it makes 0 sense. Any suggestions on how to actually make sense.

    I want a simple solution where I open, load the header, hit submit.

    Change navigation colors but clicking in color boxes or adding color code.

    Am I looking at a different back end because all I see are what looks like these weird boxes which tell me I need all kinds of code and understanding of code to load stuff up. I have no clue as to what a hook is. I think the sad time may have come where I have to find a new favorite Theme. That would be too bad for Chris considering I build 7-10 websites a month on Thesis.

    Any thoughts on how I could have this make sense at all? Or do I just keep using the old theme?
    –shanti

  5. I find it ridiculous that everyone is raving about about Thesis and Genesis and how “easy it is to learn” and “customize”. These themes and frameworks are bunk.

    The amount of time that everyone is wasting learning how to use Thesis or Genesis could of been shortened by learning a bit about WordPress and the WP Codex. Or a bit of CSS.

    Want a custom header image, use CSS. Want a custom header on a particular page, use the WP is_page function to apply custom CSS to only that page. Done. Oh, and once you learn a little about WordPress and CSS, you can use it on ALL themes. Not just one.

    Wait, that’s code. I don’t know code…. Well, what the hell was this 50 page article about? Hooks? Looks like a buch of code to me.

    Instead of wasting your time learning about some hyped up framework, learn about the real framework, WORDPRESS!!!

    Now excuse me as I spend the next two hours figuring out how to write some stupid Thesis hook for a custom template, which I could of done in five minutes with the collective knowledge of the WordPress community.

    Forrest

  6. Thank you so much- I have been struggling for so long with the header thing. Now I’ve put your command in the .customs_functions .php file and with slight moderations in css it worked, great!
    THX, Chris

  7. Oh, I checked my site again- I’m on a small macBook and I just realised that I can now scroll the site to the left and to the right … hm- how can I get rid of that?

    • Chris – it sounds like the width of your site is set to be larger than your small Macbook – it was probably dynamically resizing when you didn’t have a header, but with a graphical header, it will always remain the minimum width of that header. Does that make sense?

Speak Your Mind

*