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.
Subscribe to the Sugarrae feed | Follow Sugarrae on Twitter
Related Posts
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:
{ 104 comments… read them below or add one }
Very informative and timely post Rae. I haven’t upgraded to 1.3 yet because I’m a bit rusty with hooks. Thanks a million, between this and the official hooks tutorial I’m straight!
Dear Sugarrae,
Please keep blog posts to no longer than three paragraazzzzzzzzz
zzzzzzzzzzzzzzzzzzzsnore…………
:)
@wheel
LMAO… hey, if you were impaired with this stuff like I am, you’d be ever so thankful for this ;-)
I was looking for this kind of explanation and found it on ThanksGiving Day here in the US. Thanks Rae!
The long break down was definitely appropriate. This was one hell of a helpful post, especially as I delve more into thesis. Thanks Rae!
I’ve been learning as much as I can about hooks over the past couple months and this is by far the best straightforward tutorial that I’ve seen. Thanks!
Great tutorial – thank you! Much more straightforward than the explanation in the Thesis manual.
One tweak I had to make when using the custom header hook – the first time I tried it, I ended up with a space between my header image and the double horizontal lines below it. Adding this to my custom.css fixed it:
.custom #header { padding-bottom: 0; }
thank you for your in-depth reviews. Your thesis review that you did a few weeks ago, or that I found last week, was awesome.
Because of that review, and the step-by-step detail that you took, I proudly purchased through your affiliate link. Hopefully the little change you received will help out with some gas money.
thanks so much! I just grabbed thesis yesterday and I’d come across add_action but I hadn’t yet seen remove_action. I was struggling with how to override built-in functions.
With CSS, you have the cascading properties, so putting things in the custom.css file won out over defaults. Function calls don’t behave the same way, so I was really struggling until I read your post.
Thanks again – off to go code!
Rae,
I’m pretty shocked to learn that you don’t know much about programming. Looking at your site (which is probably one of the best Thesis Mods I’ve seen), It appears you don’t need to be one.
Did you ever teach? As a former one myself, I can say you’ve got the skill!
A long time back (when I first started screencasting) I put together some tutorials for Tubetorial on HTML, and later did some TeachingSells Vids. I can’t wait to jump into Thesis and create some Thesis Mod vids. I look at sites like yours and it gives me the motivation I need to kick myself in the ass and get R done.
Regards
Shane
Super cool Rae – this is *way* easier to understand than what I had to learn from in the forums. Your footer example is perfect – I modified my site’s footer directly and had to change it back every time upgraded to a new version of Thesis. Not any more!
Also – I just ran across this great plug-in for Thesis: OpenHook. It adds and admin panel to WordPress Design panel and allows you to add code for the various hooks right from there. Great tool for those who don’t want to modify their custom_functions.php file.
Anyway, thanks for this great post!
Very awesome post, thanks! I’ve been hearing more and more about Thesis and while I can get in and destroy the back end of WordPress, it takes me to long and… the whole putting it back together after I destroy it part. That part sucks. Sounds like Thesis is what I need.
I have used WordPress for almost a year now. I was afraid to switch themes because of the heavy customization I’ve done to mine. But I bit the bullet and bought Thesis at their sale last week. Whoa!
This whole bit with hooks is pretty slick. And now I earn that I’ve been doing it wrong all this time.
Thanks for this. I DO speak Japanese and I was still lost!
I love your sense of humor, I won’t be messing with you anytime soon. Great post!! I speak limited ‘japanese’ but you dumbed it down enough for me.
RAE!!!!!!!!!!!!!!!!!!!
Thank you so much for this! I’m still using 1.1 and a bunch of custom stuff I’m used to doing. But this explanation of hooks is definitely something I’ve been needing for new projects.
Thanks for the post. Very straight-forward. Quick question: how would I go about customizing my sidebars? The forum posts and thesis guide are over my head, lol.
Thanks.
@ceasor almost anything can be added via the widgets on the sidebar, even PHP based functions provided you use the Samsaran PHP widget plugin. Let me know what it is you’re trying to do specifically and I’ll see if I can help.
Thanks. I’ll dive into the widgets. I pretty much want you have on this blog: Newsletter subscription, Categories, Top Posts, Recent Posts, embed youtube clips, etc.
Thanks.
I don’t get it. I add it like this:
/* YOAST BreadCrumb */
function yoast_breadcrumb () {
<?php if ( function_exists(’yoast_breadcrumb’) ) {
yoast_breadcrumb(”,”);
} ?>
}
add_action(’thesis_hook_before_title, ‘yoast_breadcrumb’);
and nothing … when I try to access the site I get
Parse error: syntax error, unexpected ‘<’ in wp-content/themes/thesis/custom/custom_functions.php on line 37
Rae can you point me what I’m doing wrong. I don’t like these hooks, he’s over complicating simple things.
@ceasor I just use text widgets to embed the youtube videos etc in the sidebars. :)
@matej try this:
/* YOAST BreadCrumb */
function yoast_breadcrumb () {
global $comment;
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
}
add_action('thesis_hook_before_title', 'yoast_breadcrumb');
and let me know if it works.
Rae, new code is not showing me error message anymore but breadcrumbs are not showing. I asked Kristarella about it on forums, hopefully she will help me.
Thank you, I really appreciate it!
Thanks Rae. It worked great.
I have been searching the web for hours for instructions that make sense. I knew that once I understood this it’d be extremely convenient, but I didn’t think I could get there. You have just saved me so much time. You kick ass. Thank you, thank you, thank you.
Yesterday I came across the Thesis theme by accident, and got intrigued. I looked at a lot of samples that I found from a thread in their forum. Liked some a lot. Googled thesis theme review and found your site.
This page finally convinced me to go for it, so I bought through your link, and signed up for your RSS feed.
It’s Christmas Eve… I may be up late enough to see Santa, playing with the theme!
Thanks Rae, just like everyone else your tutorial is so much easier to understand.
I do have a question in regards to the custom header, where do I find THE-URL-OF-YOUR-LOGO-GOES-HERE? I’ve only just bought thesis and paid for a web host for the first time four days ago so I’m pretty new at this game.
Your help with this matter would be appreciated, thank you.
Kindest regards,
Lia Halsall
Okay Rae, after much trial and error I finally got my header image up on my blog. Only two challenges now:
1. How do I remove the blog title ONLY from the blog and not the dashboard?
2. How do I centre the image instead of it being left aligned?
Sorry to bother you once again.
Kindest regards,
Lia Halsall
Very useful post.
Question on your style. Did you create the “Sugarrae runs on the Thesis WordPress Theme” box in your style.css, then add a thesis_hook_after_post to show it (after every post, like the name says)?
Hi Rae
I downloaded the Thesis theme a couple of weeks ago now and I’ve been trying to change a couple of things which is very difficult when you’re not a techie. I want to change the footer information on my blog and I’ve asked this question on the Thesis forum but I haven’t received a reply yet. This might have something to do with the fact that it’s New Year’s Eve and everyone will be wanting to party! – Anyway, I’ve read your explanation above about ‘hooks’ and I’m just about to implement what you’ve said about changing the footer. You’ve laid it out in a simple manner so I should be able to follow it. I think the people at Thesis should create video tutorials for every question that they get asked in the forum and post them on YouTube so that we can watch them over and over again. I think they’re assuming that everyone using the theme has a bit of programming knowledge which is definitely not right in my case.
Thanks for sharing this clear cut guide.
John O’Hara
United Kingdom
P.S. I also want people to have the option of subscribing to my blog via email and I like how you’ve done this and the location at the top of your blog is perfect. If you don’t mind, I will copy this when I get my head around these ‘hook’ things!
@Lia
@John subscribe to the feed – I’m doing a ton of these tutorials in the coming months to show non programmers how to customize their theme :)
@Richard subscribe to the feed… there’s a little more to my blue boxes than that and I’ll be showing folks how to do it with my next tutorial. It’s similar to the ad targeting tutorial but a little different.
Hiya Rae
Thank you for replying to my comment.
Great News…I’ve been able to change the footer on my blog thanks to your simple explanation above. I’m really pleased with myself, it’s a small victory!
I will subscribe to your feed via email as soon as I finish writing this comment.
I’d like to also ask you something else?
Can you tell me how to add the ’subscribe via email’ text and functionality to my blog exactly as you’ve done it? I want people to be able to receive email updates to my blog via feedburner.
John, I can put together a tutorial for that, but it won’t be til the next week or two.
Hi Rae-
I successfully executed a basic hook to put some content before the content, and I styled the text inside this box in the custom.css file, but how do I style the box itself? You can see it at the link below:
supportvilsack.com/test
I’d like to add some padding on both sides, how do I do that? Help, thank you!
Oh my god, it worked. I am a grade above retarded when it comes to PHP or CSS or HT-whatever so I can’t believe that this tutorial worked.
Thank YOU so much. I’m launching the new Thesis theme on my blog on Monday and I can’t thank you enough for helping me understand this.
Thanks for the tutorial Rae! I’ve tried to wrap my mind around hooks before and your explanation was just what I needed! Between you and kristarella, I’ve got this thing down.
I should be redesigning in the next couple of days :)
Fantastic,
I’ve been banging my head against the wall trying to learn customizations. This was such an easy to read tutorial, I really appreciate the time you took to share.
I recently started using ‘Prestashop’ as a ecommerce platform and that is based around hooks, I didn’t know where to start so I read a few articles on the web and they all went over my head. Thanks so much for breaking it down to a simpler level, much appreciated!
This article has helped me soooo much Thank You Rae
Ohhh How I so much want to use my new design with Thesis….
But I can’t figure out how to get a full variable width header and footer!!
Any help is absolutely appreciated!!
Hi there…thank you so very much for your expert advice. You’ve been a great help and I’m very thankful.
One quick question though…I used the Header Hook above to get a custom header inserted, and it worked great for my HOME page. But I cant get it to appear on all the pages (when I click on individual posts or tabs in the nave bar to go to other pages, it’s not there). What am I doing wrong?
Thanks again…
I must be worse off then I thought when it comes to this stuff. I tried your example #2 and now my site is broken with a syntax error. I’m 100% sure it’s user error, I have stared and stared and don’t know what I am doing wrong.
function add_social_media () {
if (is_single()) {
?>
<a href=”http://www.stumbleupon.com/submit?url=”><a href=”http://digg.com/submit?phase=2&URL=”><a href=”http://del.icio.us/post?url=&title=”>
<?php
}
The error it gives says line 39 which is the very last bracket there, I don’t know, don’t get it. Thanks for any extra help.
@Aaron, you’re missing the last bracket… the end should be:
With two } at the end to close the two opened earlier in the code.
Thanks for this great tutorial, Rae. I just discovered your site and am working my way through all the posts. It seems like every post contains another nugget of vital information.
Question: you talked in the comments about using widgets in the sidebar, but what about the multimedia box? I would like to set mine up as a miniblog, using one of the categories of the main blog. There’s a nifty plugin that sets up a widget to do this in the sidebar, but I can’t figure out how to put it in the multimedia box.
From your description of your own php and HTML coding skills, I believe we’re roughly on the same level. Until I came across your “Thesis Hooks For Dummies” tutorial, I was completely lost on how to use, and modify, hooks. THANK YOU for a well-written explanation.
With your help I’ve now been able to modify my footer!
OMG, I love you Rae!!!
I’ve been using the Thesis theme to create sites for a few new clients, and I can’t tell you how horrifying the whole ‘hooks’ thing was. The official explanation was over my head, and the forums are great but a little hard to find things on. Your explanation was so easy to understand, I feel a little stupid for having had such a hard time getting it.
I’m planning to spend the rest of the evening reading through the rest of your blog (especially loved that pre-Christmas rant) and can’t wait to see what you do next.
Hi and thanks for your help previously.
Although I have another question :) I finally really tried the Social Media bookmarks after you post function, I had it in my custom.php but just now pushed a post out and it wasn’t there :(
Before my post, however, I did notice an error I had, which was that I didn’t properly link to the little icons on my own server. I was using the ole “images/whatever.png” in my instead of the full URL. So I fixed that AFTER my post. If I corrected that one piece would it backtrack on it’s own?
Thanks again!!
Hi Rae,
Great tutorial, and the more I see how the customization works, the more I’d like to dig into this theme and customize it. You’ve done a great job with everything thus far (watched some of the YouTube videos and some other links). I certainly wish you continued success and thanks for bringing this to the community!
Hey Rae,
Great post, I was curious if you could point me in the direction of how you changed the background of your thesis template?
Tried it all verbatim. Can’t get the header/image to work.
Help?!?
I even tried adding this into my custom.css:
.custom #header #logo a {display: block;
width:375px; height:78px;
background: url('images/thesislogo_main.png') no-repeat;
outline: none;
padding:none;
margin:none;
}
/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; padding:0px; }
/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */
/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; margin-top: -6px; }
Rae, I’ve just purchased the thesis theme and this blog post has helped me so much already! Keep up the awesome work. Your blog looks great. :)
ethan – the code is correct as many people will vouch for. You don’t need to add anything to your CSS file. You just need to add the header image hook, upload the header to your web server and you’re done. I can’t see your code so I can’t tell you what you’re doing wrong but the code above is absolutely correct.
Alrighty.
All I have in my custom_functions.php right now is this:
/* Custom Header Image */function add_header_image () {
echo "
";
}
add_action('thesis_hook_after_title', 'add_header_image');
I am assuming all I need to do is add php tags to make it work? (just need to know where to place the tags…)
efff it.
Se here for code.
http://www.techsplosive.com/wp-content/themes/thesis/custom/custom_functions.php
Rae,
I recently purchased Thesis and absolutely love it. I was wondering if you could help me with the simplest of questions, which will no doubt shine a bright light on my complete incompetence when it comes to these matters. I would like to make some changes, but can’t figure out how to edit my custom.css sheet. The custom.css page says the following:
Modifying existing theme styles to your liking is a breeze with this handy stylesheet. In order to turn on the CSS styles that you define here, you’ll need to append the tag (usually found within the header.php file) with a CSS class called “custom”. Thanks to this, you now have the ability to override ANY style that’s declared in the theme’s original stylesheet.
Can you tell me what the code would look like after making the change to the header.php file? I have no clue and don’t want to screw things up. All I want to do is change the background to the dark gray that Chris has on the demo site. Thanks for any help you can offer.
Thank you for the break down Rae, other sources have left me comparing hooks to quantum psychics.
Hello Rae,
This tutorial on ‘Hooks’ has been a great help for me to start getting a grasp on some of this web-page alchemy. I just downloaded Thesis (yesterday) and was getting really frustrated with being unable to find elementary tutorial materials until I finally found your stuff. I have attempted to tweek my [underconstruction] page per your ‘Thesis Hook Example 1′ tutorial section but haven’t gotten it to work for me just yet. Per step_1 I saved my image file to my ‘custom-images’ folder (on my host server). I copied and pasted your example code into my ‘custom_functions.php’ file (verbatim). The thing that seems to be eluding me, I guess, is how to customize the ‘<img src= …. ‘ line of the code so it goes out and gets my desired image and inserts it into the header’. I’m sure the solution to this impasse is transparently simple but I seem to be sort of an opaquely simple sort and would appreciate any crumbs of expertise you could throw my way. Thanks for your good work.
HooRay!! Got it working. Just had to figure out how to specify the path to the image file. For me the code looked like this:
function add_header_image () {
echo “
“;
}
add_action(’thesis_hook_after_title’, ‘add_header_image’);
My next challenge is to enlarge the header image and then put the header text into the resulting image (along the top of the image). Oh yes … also now I need to find out where the default images for Thesis are hiding, but that’s another issue.
Thank you so much for this. My footer is so happy now.
Well, my header’s not nearly as happy as my footer. The image displays but so do my title and tag line above it. No matter how many times I uncheck and save those options in my Thesis panel, they display. I used 2 browsers and was not seeing a cached copy. I tried first with my image’s exact dimensions in the code then wondered if that was causing it, since the numbers in the sample are much smaller and maybe were displaying the title and tag. Still no luck. (My image is 877×103 and at least I know now I got the size right.)
I even tried eliminating the ‘add after title’ part, which didn’t help and, in retrospect, wasn’t my brightest move but was easily fixed.
Any thoughts? I definitely unchecked the 2 displays options and saved after each attempt.
Is there any reason I can’t do it with CSS as I’ve done before? It’s one line, as I recall, with the absolute url.
Thanks in advance. I’m halfway there.
Oh, I feel like an idiot now. I was unchecking the wrong ones. I saw the word ‘display’ and that’s all that penetrated. I am so sorry. Mea culpa, mea culpa.
It’s working like a champ now and looks good. Many, many thanks for your tutorial — and infinite patience.
Thanks for this Rae, I have had such a hard time with hooks and there seems to be so little documentation on the web. I’ve struggle with them on a prestashop template on one of my clients ecommerce sites but I’m finally starting to feel like I’m getting a grasp on them.
Thank You Rae – great information – (loved the James Cook post too, heh!)
Hi Rae,
I appreciate you taking the time to post. Unfortunately I have been working on this header for a while now. For some reason, the image continues to come up as a question mark with the alternative text. Any thoughts?
Kelsey
Kelsey – I sent you an email.
Great post. This will help to hand-hold the dummies to configure the theme.
Normally I have super intelligent, funny experts handle web things. However, it’s 2009. Like my determination to make great Hors d’Oeuvres, to learn tango and salsa, to re-learn Spanish and Tennis during the last three years… it’s time to get savvy on updating websites. It’s difficult when I need to post something in real time and all I have is twitter. @sambotta only accepts 140 characters… not video. THANK YOU for your blog … THANK YOU Sugarrae Rae Hoffman, Internet Marketing Consultant for your help here.
Hi! I was looking for ways to customize my thesis theme when I saw your blog! Great post about the thesis hooks. I had absolutely no idea how to use them until I saw your tutorial and now I have a customized header!
I do have a question though, could you tell me how to add a background image to my blog? I’ve been trying a lot of things but since I don’t know much about css and php, it’s pretty much been a failure. Hope you could help thanks!
Hi Rae, great tutorial, thank you for this.
This will probably sound stupid but i can’t seem to easily figure out how exactly to manage the ’single’ posts.
What is a ’single’ post page? How do i access this?
Any help would be greatly appreciated, thank you!
Ok, so it appears the single posts pages are the actual page of the specific post.
–
If i have say the home page, with a bunch of different posts to different articles, and i want to target the homepage and place a different advertismenet banner between each post, how can i target SPECIFIC postings so apply specifics to each one?
Thanks!
I am sooo glad I found your blog. I just started using thesis on one of my blogs and have not yet attempted to understand the hook thing, but I do know the Thesis theme has huge potential and I am looking forward to getting to know it better. I totally get where you were earlier begging Chris Pearson to teach you about hooks.
Tonight it is now too late for me to concentrate on this sort of programmy stuff. But I will be back tomorrow hounding your ass like you did Chris’s if I can’t understand it after again thoroughly reading your most excellent post.
St Rae ;-)
I’m just starting out in CSS, Thesis Hooks, etc & following your code (I think!) and have entered
<a href=\"http://www.randomspecific.com/\" title=\"Random Specific\">
<img src="http://randomspecific.com/wp-content/themes/thesis/custom/images/header_3.png" alt=\"Random Specific\" height=\"89\" width=\"862\" style=\"border:0px\" /> </a>
Now the header has activated a link but takes you to a 404 page. Can you see what I’m doing wrong? I’m clueless at this end.
@MK do you have the “echo” in there? or did you take out the PHP and instead write the header code in pure HTML?
Your source code shows: a href=\”http://www.randomspecific.com/\” title=\”Random Specific\” rel=”nofollow” when it should show: a href=”http://www.randomspecific.com/\” title=\”Random Specific\” rel=”nofollow”
Which to me says you may have taken the code I gave above out of PHP and put it into HTML instead and now don’t need the preceding / or that you accidentally have an extra one in there. But I really can’t say unless you show me the entire hook and not just the linked portion of it :)
Hi Rae
thanks for trying to help — apologies — i’m totally clueless! i’m using the Thesis Open Hook plus in so thought that it executed the PHP for me. Tried putting in what you’ve suggested above (to OpenHook) but then it actually inserts that text inside my header — so have reverted to what I had before.
ok… i looked harder at what you were saying above & took out the / and \ — which i guess as you say makes it pure html (are you getting the clueless part ? ;-) and now its all working perfect. see you really are st. rae!
Thanks so much for breaking this down for everyone. I gotta admit I was kind of a PHP noob and had NO IDEA what hooks were (or functions). This really made me feel like I have a better handle on some of this php stuff now. Thanks again!
@Sugarrae I recently switched my blog’s theme to Thesis and, pardon me Ronald McDonald, I’m lovin’ it. Learning about hooks and your article has been a YUGE (as Trump would say) help. I just switched my attribution footer thanx to you! Now to play with my 404, whee.
ROCK (AND ROLL) ON!
Thanks, just added social media icons to a blog, took about 10 minutes. I am a php programmer, but I preferred using your guide :)
Hi Rae,
I have been to thesis forum and it seemed like I can’t get help.
All I need is very simple. An image link to my twitter page (follow me on twitter) before side bar 2. For some reason(s), I can’t get the hook to work, although it seems very easy to do.
Below is the code:
function add_social_media () {
?>
<a href=”http://www.twitter.com/submit?url=”>
<?php
}
}
add_action(’thesis_hook_after_sidebar_2′, ‘add_social_media’);
I hope you can help me. Thank you.
Sarah
Thanks for taking the time to write all this out – I have now got my theme working the way I want it and the design is now great.
i found I had to mess with the code snippets a bit, adding some php code.
I will be sending you a guide to SEO that I have written for small businesses in Ireland, I would love it if you had the time to respond in any way – I am sending it to you as you are one of the resources I suggest.
All the best.
Hey Sugar Rae,
I’m trying to condense down all of the css stylesheets into one main one.
Do you have any idea how to do this?
I have thesis openhook installed, but I don’t know which hook to change :(
Do you have any idea?
@Matt and @Aubrey by adding the information for my desired background to the custom CSS file.
@Mich there is no single post page – instead, you assign functions to work only WITH single post pages. See hook example #3 above – the “if (is_single())” basically says that function should only work on a single post page. So, if you want to put something on the single post page, you write a function and add the if (is_single()) line to it.
@Sarah don’t take this the wrong way but you probably didn’t get help because you are missing the image/basic HTML from your hook. AKA, your problem isn’t with the thesis “hook” – your code above wouldn’t work in wordpress either.
<a href=”http://www.twitter.com/submit?url=”>
That isn’t even a proper link. There is no image. And you never close the link. It wouldn’t work regardless of thesis. You need to change:
<a href=”http://www.twitter.com/submit?url=”>
to
<a href=”http://www.twitter.com/YOURTWITTERUSERNAME”><img src=”YOURIMAGEURLHERE”></a>
@Eric you shouldn’t combine your style sheets – all you need to do is enable the custom one in the thesis options panel and then add any/all additions to just that one so when theme upgrades come out, you can upgrade easily and without heartache. I don’t use openhook and don’t recommend newbies do… learn how to do it before trying to take shortcuts. :)
Hi Sugar Rae,
Great tutorial! Only problem is, the image header one seems to be giving me some problems. I followed the instructions, no problem. When I view my website though, the header will not load and a drop down menu appears asking for my ftp username and password. Just to see what would happen, I put them in, and the header loaded perfectly. If I hit cancel on that drop down menu, though, the header does not load and it simply shows the alt text (which links to the homepage).
Any pointers?
Thanks for the great tips.
I had high hopes when I started reading your tutorial. But the header example confused me. Why didn’t you put your own urls instead of descriptive text that I’m supposed to guess at? You have not provided an example here, you provided a fill-in-the-blank form and I can only guess what goes into the blanks. THE-URL-OF-YOUR-LOGO-GOES-HERE tells me little and implies it has to be all capitals for some reason.
These hooks are not easy. The Thesis demo made this theme look like a complete UI without coding, which is why I bought it.
I’ll keep reading your article and try stuff and see if it works.
add_action(’thesis_hook_after_title’, ‘add_header_image’);
that code will put the header image after the title right? how if i want to put an image beside my title?
thanks
I am loving Thesis.
Thanks for the help your post is providing me. I now have a header image on my hobbies site.
One thing at a time. Keep the helpful info coming Rae.
Hey Sugah,
I stumbled across your tutorial here via google, and launched in since I was *determined* that changing a footer simply *cannot be that difficult*. (It is!)
I cut and pasted your wonderful demo, time and again and it kept working. Until however I tried to log in and then got a series of messages about my pluggable.php page line 850, etc, etc, etc.
The only way I could login was by deleting the custom_function.php. Checked syntax, spelling, typos, permissions, blah blah blah. Wasn’t happening.
Googling more I found http://rickbeckman.org/thesis-openhook/ OpenHook which is a plugin that does all the work for you.
You’ll be gratified to know that the same thing happened with the plugin! However, with the plugin I was able to delete the custom_functions.php file and the changes then took hold AOK.
So I know know what I did, or what went wrong. But it works now. It’s unsettling, since I like to know of course, but it’ll do.
Anyway, for future reference the openhook plugin works well and is pretty intuitive.
Thanks!
Peace, out…
Hi Rae
Thanks for the tutorial. could you also let me know how to add links like “Disclaimer” and “Privacy Policy”, say to the left side of my footer. I already have copyright info on the right side. Please help.
I want these links to appear on the same line as the copyright stuff.
Cheers
Raj
This is such a great tutorial; I keep coming back to it again and again as I customize different parts of my Thesis based blog (Expand2Web.com)
I’ve also started a site to collect and vote on the top Thesis tutorials and posted it there already: http://www.thesisninja.com.
Thanks for your great work, but I still don’t understand how to do it.
I bought Thesis because I thought it was “easy” haha.
Oh well…
You rockstar Sugarrae, thanks for taking all the time to explain thesis hooks in plain english (hmm… maybe commoncraft will make us a thesis video)
I am new with thesis but old with WP. Working on learning the Thesis hooks and framework . I have a simple task, implement a 3 column layout, just on the home page, all other pages stay with 2 column layout.
I have created a function with conditional statements for the home page, but not sure where I need to add the CSS for calling the div column wrap and calling sidebar_2 which is not by default displayed in the 2 column layout.
I have all the CSS I need, just trying to figure out how to call sidebar2 with a hook, any ideas?
Thanks so much,
Jayson
http://twitter.com/askJayson/
PS: Let me know if I can help you out as well. Pretty savvy wp developer.
Rae
I did it.
I (as in ME, all by myself) did it.
I DID (as in DONE) it.
I did IT (you know, the previously IMPOSSIBLE and UNTHINKABLE!)
I added my very own header to Thesis!
Well, I (as in ME) had a little help… that would be YOU!
Yes, there were some anxious moments. I had to do a few things I didn’t exactly know before… I sort of knew and therefore had to guess and tweak (fake, as you so aptly called it)
But now I KNOW… and I have the confidence to take on the mighty Universe now… well, maybe my own quadrant – you know, just to start.
Thank you, Rae.
THANK (as in… OK, you GET it, right?)
All the best from Toronto,
Russ
Thanks for this info. I used the header image hook you showed but I can’t figure out for the life of me how to remove the space/padding from above and below my header image. I have about 5 pixels of space in between the nav menu and the header and the header and the body of the blog.
Can you tell me how to fix, how to remove these blanks spots??
Thanks
Ray
wow. I looked around for a few hours (at least four) trying to figure out how to make this work. You (and every other site I went to) conveniently forgot to mention that you have to enable the custom functions by changing the name of the custom file from custom-sample to custom. If only I had known, I wouldn’t have been so tempted to destroy my computer. This is something you may want to add to this post, so that complete newbies like me don’t go mad when your simple (and easy to follow) instructions don’t work.
Thank you for the demystifying hooks. It was all Greek to me until reading your explanation.
I followed the steps to change my header. It worked marvelously, but it is off to the left. I read in the comments that you need to *something, something* div *something, something* in the custom css file. I’ve googled and read and googled some more. Can you share the code I need to center my header image?
Thanks again for a great tutorial.
@Jon Pinney the directions to change custom-sample to custom are right in the Thesis download instructions on the DIY site. This tutorial assumes you read and followed the installation instructions on the theme before attempting to customize it. :)
I’m confused. I have opened the custom_functions.php file and added followed the directions on this post (as well as several others) and NONE of them have ANY impact on my theme. There must be a step everyone is leaving out. Do I have to ‘turn on’ the custom_functions.php file? There must be something else besides calling the hooks and inserting functions into custom_functions.php. So, what step is being left off?
I pasted your code for example 1 into custom_functions.php at the end of the file and it had no effect. Thoughts? Thanks…this is a great post…just not working for me at the moment.
I have been scouring the internet looking for someone like you Sugarrae! Someone who can speak to me in english and make sense of the ‘Japanese’. Thank you and keep running with the tutorials!
Jeff
Sugar Rae, thanks a million. I just edited my Thesis footer with your fabulous hooks for dummies. Yay!! My first Thesis Hook! Love the instructions, your blogging voice, and your information here. thank you!
Thank you, thank you, oh thank you! I have a project site I’m working on and opted for Thesis. What can I say? I’m not a programmer and even the simplest modifications are requiring incredible amounts of tutorials and effort. However, it’s becoming easier and this post helped me feel brave enough to try my very first hook! I’m a little intimidated by the header and will attempt it when I have my programmer husband looking over my shoulder. BUT, thanks to you I successfully used the custom_footer hook. All by myself! My resident programmer isn’t even home! The explanations even shed a little light on (gasp) understanding how php works. Maybe I’ll celebrate with the only word in Japanese I know…sake.
BTW, the copyright symbol showed up as a question mark on my page so I just spelled it out. Problem solved.
lol@ php penis!
Great tutorial. this is what I have been begging for.
ps
Great work! You rank #1 for “wordpress thesis tutorial”
I tried this and it inflated the padding around the whole header image and added my site name in huge letters above the header image. A much better method by Rick Beckman is explained here.
Sugarrae,
The way you break down the explanation of hooks proves amazing. I knew nil about this kind of ‘code writing’ until I purchased Thesis 1.6. Thank you very much! I am looking forward to following you blog and learning more about hooks!
That being said… I was able to use your “Custom Social Media After Post Hook” and (by altering it a little) create my own “Custom Social Links Hook” – probably already been done before, but it feels good that I did a little “work” by myself.
Thanks again for breaking this stuff down. Much appreciated!
Does anyone know how to customise the comment box or the submit button on thesis? Many thanks in advance.
Thanks for this
Couldn’t figure out how to add a php action to a hook in Thesis, but Example 4 showed me how after searching all over!
Thanks again.