How to Customize Your Site Intelligently with Hooks

by Chris Pearson · 71 comments

Back in the old days, if you wanted to modify your theme, you had to make all of your custom HTML changes to individual template files. Then, if you ever had to upgrade or – god forbid – change your theme, you had to make those same HTML changes all over again.

I think we can all agree that the “solution” above is terrible, but why? Ultimately, it’s a poor customization solution because it’s so unforgivably inefficient. Your changes are thrown in alongside core template code, rendering your entire theme a hacked-up, vulnerable mess.

If you’re concerned about running an efficient, well-oiled machine of a Website, then you have to do better than this. Specifically, you’ve got to have a framework that allows you to make HTML customizations that are:

  • futureproof, or immune to upgrades
  • standardized for easy inclusion and formatting
  • easy to manage
  • easy to understand

Designed with these principles in mind, the new Thesis hook system allows you to make intelligent, powerful, and efficient customizations that have never been possible before. The sky is the limit here, as evidenced by the completely-revamped Pearsonified design which now runs on Thesis!

To help you learn how to use hooks effectively, we’ve prepared a detailed, example-based tutorial for the User’s Guide:

Also, we’ve added a couple of new reference pages for the Thesis hook system, including:

If you haven’t upgraded to Thesis 1.3 yet, you should really consider doing so in order to take advantage of the hook system. I’m using it here on DIYthemes to handle all the customizations you see, including the login bar at the top of the page and even a few of the sidebar widgets.

The bottom line is that no matter how big or how small the customization, using the hook system to implement it is the intelligent choice.

In other words, it’s what a ninja would do :D

About the Author: Chris Pearson, Thesis creator and DIYthemes founder, is obsessed with optimizing the web and making sure every last detail receives the attention it requires. You should follow him on Twitter here.

If you enjoyed this article, enter your email below to get free updates!

{ 57 comments }

Oktober Five

Hook! Hook! Hook! I’m using and loving the hooks. The headline hooks are exactly what I needed! Thanks.

Chris Pearson

Oktober Five — Awesome. By the way, I’m loving your site. That’s exactly how I imagined the 1-column layout might be used, and I think you’ve done a fantastic job with it!

Oktober Five

Hey Chris, thanks! I’m constantly screwing with the theme, but I’m definitely loving the one column. Who new simple could be so sweet! BTW–Are you using a plugin to answer comments? I assume you’re not manually entering in the name and link to the comment you’re replying to.

Kingdom Geek

Oktober Five: Knowing Chris, he’s manually inputting the data. “Manual” is how that dude rolls — kinda interesting, then, that he’s producing a theme that takes “manual” out of the equation for hundreds of bloggers. :D

Chris Pearson

Oktober Five — Actually, I answer all these the old-fashioned way. I really should implement a quick quote option that auto-fills the comment field; then, this kind of thing would be a 1-click process rather than an HTML tag-fest.

Oktober Five

Ha! Kingdom Geek is right–it’s a little ironic. I use the comment ninja greasemonkey script, but the format it uses is awful.

Dave C

Thanks very much for your hard work Chris! You continue to add value to this theme.

Dave

Robert Barr

Hey Chris,

I am wondering, will these early incarnations of hooks be implemented into the Thesis dashboard as a drag and drop? I ask because while it seems simple, I am the guy still trying to get his arms around html, so it should go without saying that I am no coder. Which brings me back to the Thesis conceptual selling point, less coding.

Thanks!

Kate Foy

I hear you Robert. Just thinking, there goes my weekend learning hooks!

Seriously, I get what you’re on about, and I love Thesis it’s just I need to work on this hook stuff.

Chris Pearson

Robert, Kate — In the future, you’ll be able to add HTML and hook it into the theme via a the options panels. In the meantime, please do keep in mind that this type of customization is in addition to all of the other flexibility that Thesis gives you.

All in all, the hook system is really just an extremely efficient way to interact with the framework. In time, it will serve as the foundation for a system that allows even novice users to make amazing customizations that would have been unheard-of even a year ago.

Finally, just so there’s no confusion, I want you to know that you don’t have any less functionality than you had before now that the hook system is here. I realize that it’s “just one more thing to learn,” but it’s not something that you have to learn in order to run your site with Thesis.

It’s just something that’s out there for you to take advantage of should you so desire :)

Dannie

Chris – Great work. I actually commented on Pearsonified about the ability to reply and quick quote using your preferred comment response method that was outlined in the post “Manage Your Comments Like a Pro” that’s to the right in the sidebar under “Killer Resources.” I would love to see something like what Indigo Spot has on their comments to reply and quick quote, that auto fills the comment field for people. It seems perfect for less tech savvy audiences. The threaded comments option gets ugly.

Do you think that is something you can work in as an option for the next Thesis update?

ClarkeW

Chris,

Great job on this! I’m really enjoying hooks in Thesis and I’m trying to get as efficient as possible with them. It seems to be working as I’m able to customize the theme and deploy it to new sites very quickly. I look forward to the future updates as well.

Thanks

Chris Pearson

Dannie — I’ll see what I can do… It’ll definitely make it into one of the next two releases.

ClarkeW — Awesome, dude. You itching to move your personal site over to Thesis, or are you holding strong with your pimped out Copyblogger?

ClarkeW

No, it’s definitely going to be moved over. In fact I’m going to dedicate a weekend to it here in the next month or so.

I want to see just how creative I can get with Thesis, so I’m definitely looking forward to it! I’ll post it up in the forum when I get it finished.

Chris Pearson

ClarkeW — Killer. Pearsonified will be making the switch here soon, too… I just want to think of a couple of nice embellishments first :D

ClarkeW

Cool I definitely look forward to seeing that. My wife also has a blog and she wants her own custom design, so I think I’m going to develop a custom version of Thesis for her as well.

Well I told her I would anyway, so there is no turning back now!

Chris Pearson

Ha, lma0z

Dave C

Hi Chris

What do you think about adding one more hook? One that is just below the content_box and before the content & sidebars. This is the perfect place for breadcrumbs, or a location that stretches across the entire page yet below the header area.

Chris Pearson

Dave C — I like it; that should make it into the next release.

Nicky

Chris,
I am having problems adding alt text to rotator images. I am using 1.3.
I add the alt text in the design options but it does not show up on any of the rotator images. The forum is deserted so this is me in desperation ;) does this feature actually work? On the User manual page there is no alt text either.

Thanks -any direction to the appropriate quarters will help
nicky

Dave C

Another very cool feature would be assignable custom classes & ids. This way we can create a new class for, say the menu so we don’t have to clear the default classes before making changes.

Nicky

I got an answer in the excellent forum. Wondering if there’s a way for the alt text to show whatever browser one uses, but it’s not important for now. Nice theme Chris. I will have to learn what hooks are, but I have to say Thesis rocks.

Michael

Chris, how can I create a “popular articles” list including number of comments like you did in the brand new “copyblogger / thesis” example?

Help is greatly appreciated, because neither the “most commeted” nor the “most comments” plugin seem to work (I am using wordpress 2.6.3 and thesis theme 1.1.3). They do not appear in the widget list.

All the best,

Michael

Michael

Another Questions,
the thesis theme comes only with a comment box. If I also want the comment-author to include his name, email and website and to give him the option to subcribe to the updates of this comment feed, like on this page. What do I have to do?

All the best,

Michael

Chris Pearson

Dave C — That’s an excellent idea. One of the main areas of improvement in Thesis 1.4 is going to be the navigational menu, and in all likelihood, you’ll actually end up with two primary menus. First, you’ll have the standard, page-based navigation menu that you’re probably used to. Second, however, will be a new category-based nav menu that you’ll be able to use to link up popular categories and add a little more navigational depth to your site.

The method of changing classes/ids that you’ve described is perfect for such a scenario, especially considering that rewriting styles is a total pain in the ass. Thanks for the excellent tip!

Chris Pearson

Michael — The number of comments is a little embellishment that I added to Copyblogger to match the site’s original form. I figured that people might want to include comments on their posts as well (heck, I do it on Pearsonified), so I have decided to make that an option in a future release. It’ll likely appear in 1.4, so keep your eyes peeled for that.

Also, to answer your second question, Thesis already does that. You don’t see those fields because you’re logged into WordPress; however, your visitors do see those fields.

Michael

Chris, thanks a lot for your help and for keeping me anxious to the next update.

I have another problem. I tried to create an archive using the template, but I get this error:

Fatal error: Call to undefined function: thesis_get_sidebars() in …/michaelfranz/wordpress/wp-content/themes/thesis/archives.php on line 31

Can you give me a hint?
Michael

Chris Pearson

Michael — You need to ensure that you’re using the archives.php file that comes with version 1.3.1 of the theme. No other archives.php file will work.

Dave C

Chris, Please feel free to delete if this isn’t the proper place for this.

Hi Michael
I am working on a few blog posts to show how easy it is to add the great ‘Popularity Contest’ plugin to thesis. Todays post is to fix the plugin to get ready to insert it into Wordpress > 2.5. Keep checking as I will post how to insert it into a Thesis themed site shortly.

Chris
I actually got around the tabs class by copying nav_menu_functions.php renaming it into the custom directory. This file is then modified with a custom menu class, renamed the functions, and called from custom_functions.php
All while keeping Thesis “upgrade proof”!

Chris Pearson

Dave C — Workarounds like that are definitely possible, but in my opinion, that’s too many hoops for the average user to jump through. Being able to control the class/id names directly from the options panel = WIN.

Michael

Chris, now it does work excellent.

My last question to the archive. On your archiv on your site pearsonified.com you included the following “Every post ever in one big list”.

How do I create something like this within the thesis custom.css?

All the best?
Michael

Chris Pearson

Michael — If you’re using Thesis 1.3.1, adding embellishments like that to your archives template is not going to be a futureproof process, and therefore, I recommend avoiding this if possible. However, if you’re still interested in modifying your archives page, then you simply need to edit the following file:

/thesis/lib/html/templates.php

Michael

Dave, thanks for your tip.

In the meanwhile I got “most comments” to work. So I have a solution.

Another question, do you know the name of the plugin which is necessary to create the “Notify me of followup comments via e-mail” checkbox underneath the comment box.

All the best,

Michael

Michael

Chris,
ok and what line of code do I write in /thesis/lib/html/templates.php
to get the list of all posts into the archive?
Michael

Chris Pearson

Michael — That would be the Subscribe to Comments plugin. At this time, I don’t have a good answer for your second question, primarily because I’ve used a hacky piece of code on Pearsonified to generate the monstrous list of posts.

I’m going to port Pearsonified over to Thesis in the very near future, and when I do that, I’m going to completely reorganize my archives. The huge list of posts is not a recommended practice (too many links on one page), and I think visitors will find it much easier to access key information if I distill my posts into 5 or 6 really helpful categories. I’d recommend this kind of practice to anyone who is trying to bring order to their site and make their archives more accessible.

Adam

Hey Chris,

Crazy ass theme man…. love it! True master class…

Just have a issue (well I have many issues, none with your theme of course) , I want to have 7 main sections on my blog with multiple categories per section, and i want to be able to have each section, with their categories, clearly defined, do i have to install wordpress 7 times (once per section) on the one domain to get my desired result.

Hope that makes sense….!.

Cheers and thanks in advance, Adam

Nicky

“The huge list of posts is not a recommended practice (too many links on one page), and I think visitors will find it much easier to access key information if I distill my posts into 5 or 6 really helpful categories. I’d recommend this kind of practice to anyone who is trying to bring order to their site and make their archives more accessible.”

I hunted around until I found SRG Clean Archives after seeing it on another Thesis blog (I think). I’d used it on my other blog and my readers toldme they really liked it. I know it’s a plugin but it works for me, especially since now you can collapse the categories by month. I’d like to be able to categorize by subject – but I can live with it right now until I narrow my categories down.

Michael

Personally, your list of all your posts on personified is really a great feature. But Unfortunatly I am unable to create it myself.

Chris, thanks for the hint to plugin.

I disagree with you concerning the large list of posts. I think one of the biggest problems of blogs is, that it is impossible to scim through the posts headings very quickly. Instead you have to open categories. This is tidious.

I do not understand the problem with many links on one page. I mean it is just one page with many links.

Chris, thanks for your tip concerning clean archives. But, somehow it looks very bad when activitated the space between the lines is very big. The same happens with “snazzy archives”. Since both really on Java I guess it is somehow not compatibel.

Maybe you know how to make these plugins work. Especially clean archives would be a great help to me.

All the best,

Michael

frank

Chris -

Is it possible to style the multimedia box using an external style sheet – (ie – for an opt in form that will be simply dropped into this box ) or would this potentially over-ride/muck up any changes made to the blog in terms of styling?

(for those of us without design/coding skills..:-)

Thanks – great theme!

Nicky

Michael – fyi – I actually tried Clean Archives Rreloaded plugin first and it was awful. The gaps were huge and it looked so ugly I deactivated it immediately. I would like the gaps on SRG Clean archives to be smaller – but when the months are expanded the gap isn’t as obvious. As for lots of links on my archives page…. even I could not find my own posts and I don’t yet have 100 – so I can live with this. I was just happy to find SRGCA. I didn’t want to play around with code at this point. I’m not very good at it.

David Evans

I really like how Hitthosekeys.com has three modules at the bottom of the home page. Is that all custom CSS or are there ways to do this via existing Thesis CSS? I’d like to use as much existing code as possible.

Dave C

Hi David

Although that is not a thesis site, there is no reason why you can’t add those modules using a combination of custom functions\custom css.

I think you gave me a great new blog topic :-) Stay tuned and check my site.

Publicidad Gratis

Very good man.
That hook stuff seems awesome!

Regards…

Michael

Chris, two more questions:
1. How do I include my picture in the comment stream on your blog as well as on my own one?
2. How can I make my comments on my own blog be appear in a blue collor like you do it here?
Thanks again for your great help,
Michael

Dave

Dave C, I see it’s not a Thesis site now, got your RSS, will keep eye out for your post. I can’t wait to be able to add/populate layout modules on pages easier. I know you can do it with custom CSS but it’s 2008 and I’d like to not have to look at CSS, simply no reason these days.

Chris Pearson

Adam — You can either run multiple WordPress installations as you’ve suggested (I actually do that here on DIYthemes), or you can try running WordPress MU to get the job done.

Michael — The number one reason why I think the list of every post is a bad idea is simply because Google recommends having no more than 100 links on any given page. A huge list of posts will likely exceed this number on just about any site, and in my opinion, this is some ground that you don’t really want to tread on.

frank — By using custom.css, you can style any element of the theme without affecting the core Thesis code. It’s futureproof, effective, and just plain awesome :D

Michael — You can get your picture included in comment streams far and wide by setting up your own Gravatar account. Also, your author comments will be colored blue by default, but you have to make sure that when you comment, you’re logged in as the user who wrote the post.

In other words, if you aren’t logged in before you comment, then Thesis will not recognize your comment as an author comment. Other than that, this is one of those features that should “just work.”

derFrankie

Have you tried to submit thesis to wpthemreview?

Michael

Chris,
thanks for your answer. I take the point with the 100 links. Was not aware of that fact.

Ok, I have another question: At the beginning of your thesis blog, you have a yellow/orange box before the posts. The Content starts with: “Now that version 1.3 is out, Thesis is ….”

How do I create such a colored box before my posts?

Best regards,

Michael

FirstDayBlack

I have a hook request to make: An additional thesis hook between the comments and the comments form would be fine.

Kevin

First, let me say that I love the layout of Thesis. I actually paid for a custom site, which I sort of regret now that I’ve had a chance to play around with this. I am almost embarrassed to admit this, but I can’t figure out how use the hook system. I wanted to play around with the location of the navigation bar and the popular posts hacks, but I can’t seem to find the customs_function php page where the changes are to be made. Can someone help an ignorant former Typepad user with this?

Chris Pearson

Kevin — In order to edit your custom_functions.php file, you’ll need an external text editor like Notepad++ for Windows or TextWrangler for Mac. You are likely trying to find and edit these files from within your WordPress administration panel, and that’s not something you can do at this time.

Kevin

Hi Chris,

Thanks for getting back to me. Unfortunately, I don’t even know what you are talking about. For now I am satisfied with the theme. Actually all I want to do is fiddle with the theme so it looks like the background of this page. I think what I need is some kind of video tutorial. Thanks again for a dynamite theme.

Thesis Web Graphics

Hey Guys, Just wanted to let you know that I have a special deal for thesis users. I will be deisgning custom Header & Rotator Graphics at a very affordable rate to help make your blogs stand out and get noticed. “SPECIAL THESIS GRAPHICS from only $39″
Regards
The Pro Designer

Will Lowrey

I am loving Thesis. So, I figured I would share a quick little function for you hook-loving folk:

I first saw this on a different site talking about the ‘Tweet This’ plugin. The author then made a comment about adding it to single.php. Well, since that is not what I wanted to do – I put together the following:

function custom_tweet_this() {
    global $post;
?>
<a rel="nofollow" href="http://twitter.com/home/?status=Reading @WillLowrey - <?php the_permalink(); ?>">Tweet This Post!</a>
<?php
}

add_action('thesis_hook_after_post', 'custom_tweet_this');

Edit the Twitter username (I used mine above), and make sure you grab the image for the little twitter bird – but then you have your own Tweet This without a plugin and without editing the source. Just add it to custom_functions.php.

Enjoy

Daniel M. Clark

Will, that’s awesome – but I have one question. I’m not familiar at all with funneling things through TinyURL or bit.ly, and since permalinks can be reeeeeally long, do you know of a way to do that in the code?

birdyoshi

The level of php knowledge needed to use your hooks, is enough that wordpress creators can make their themes. And this is what I can’t understand. I’m not a critic — I’m a fan of what you’re doing, but I just wonder why anyone who can understand how to implement these hooks would be buying a theme instead of building their own…

That said, Sir, more power to you, and I hope are very successful in 2009.

birdyoshi

Sorry, a question about “futureproofing”… (you can see that I’m looking seriously at Thesis)(^_^)…
I made my own themes by making templates, which in your calculation is not futureproof. But I always upgrade with no problem, and I can reuse code over several themes with little trouble. What am I missing?