Thesis Tutorial - Hooks for Dummies

If you're new here, you may want to subscribe to my feed or subscribe to me on Twitter, which is updated on a more frequent - and more meaningless - basis.

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;
?>
<?php cyc2_show_profiles($comment->user_id); ?>
<?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:

• The official hooks tutorial
• Thesis hook reference list
• Default hook usage in Thesis
• Listing of the conditional tags you can use with WordPress

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.

Tagged as: blogging, Thesis, tutorials, wordpress themes

Subscribe to the Sugarrae feed | Follow Sugarrae on Twitter

Facebook | De.licio.us | Sphinn It | Twitter This

Related Posts

• Thesis Tutorial - Customizing the 404 Page
• Thesis Tutorial - Creating Custom Categories
• Thesis Tutorial - Advanced Ad Targeting
• Where My Guestwhores At?
• Where My Guestwhores At? Part Two

Sugarrae runs on the Thesis WordPress Theme

If you’re a blogger looking for a professional presence but don’t understand a lot of PHP, Thesis will give a ton of functionality that you wouldn’t be able to obtain otherwise with a simple control panel. With the incredible customization possibilities via Thesis hooks, you can easily make your blog stand out from the crowd.

Thesis allows bloggers to make more professional customizations than they may have ever deemed possible due to lack of coding knowledge. The theme allows me to run Sugarrae more professionally, with a focus on monetization that is more targeted than I’ve ever been able to achieve with a theme before. You can find out more about Thesis below:

• Thesis Website and Demo
• Thesis Theme Review
• Thesis Tutorial: Hooks for Dummies