How to Use Hooks in Thesis Theme?

Thesis theme 1.6 offers number of hooks to customize thesis theme as you like. Basically hooks are particular part of the theme. Various hooks in thesis 1.6 cover various parts of thesis theme layout. Functions are the things that appear inside the hook area of the theme. To learn about hooks you don’t need much php knowledge. With help of these hooks you can customize any part of thesis theme as your wish.

By default thesis theme has some functions in any part of the theme if you want to remove that function from the area and you can add your own function in the same area with help of the corresponding hook. To know about each hook and its area visit thesis hook reference list.

Before knowing about hooks

Before going to use thesis hooks you should know about the thesis theme sections (divs). By using firebug (for firefox only, we will show you how to use firebug later) or other web development tools you can find all area (div) in thesis theme. With help of this div you can choose corresponding available hook to add any function inside the specific area (div) of thesis theme. If you see these images done by speedtech, you will get clear understanding of the different sections(div) of theme layout.

Normally thesis theme has two main parts one is Full width framework another one is Page framework. Depends on these two choice theme sections (div) may change. Full width framework we have headerarea, contentarea and footerarea each having separate page. In page frame work we have header, contentbox and footer in single page. Don’t worry about these two while using hooks. But while using custom.css code you should take care about these two choices.

In both full width and page framework we are having header, content box and footer. Inside the content box we are having content and sidebars. Like wise inside the content in homepage we have teaser box and in single page we have postbox. So we should know about the each division then only you can choose appropriate hook to customize particular part in thesis theme.

Functions and hooks

To use hook we should know about two things one is function another one is hook.

Function is used to add your custom html code in thesis theme. And the hook is used to specify where your custom html code is going to place in your theme. The common structure for function is as follows

/* Function structure */
function function_name () {

?>

Add your custom html code here

<?php
}

While doing theme customization don’t edit or remove default core theme functions. It may create problem while you are doing any upgrade in your theme so never hack core functions. You can use custom_function.php file to remove default function and add your own function using appropriate hooks. For example if you want to remove default thesis navigation menu and add your own custom navigation menu use the hook called thesis_hook_before _header.

/*to remove thesis default nav menu paste this code in custom_function.php */

remove_action(‘thesis_hook_before_header’ ,’thesis_nav_menu’);

thesis_nav_menu is a default thesis core function which is available above the header. By using the thesis_hook_before _header hook we can remove default nav menu.

To add your custom navigation menu in the same place use the same hook otherwise use thesis_ hook_after_header to display your navigation after header.

add_action(‘thesis_hook_before_header’ ,’custom_nav_menu’);

custom_nav_menu is function name of your own nav menu. You should write function for custom nav menu function structure is mentioned above. I feel some examples may give you clear idea about how to use hooks in thesis theme. Here I explained about 3 hook examples from header area, content, sidebar and footer. It helps you to use all hooks offered by thesis 1.6.

  1. Add your own header image-example1
  2. Add author profile after post-example2
  3. Add custom footer-example3

Add your own header image

To add your own header logo use the hook called thesis _hook_header. Upload your logo image in this path yoursitename.com/wp-content/themes/thesis/custom/images.

After uploading the image copy and paste the below code in custom_functions.php file. The path is yoursitename.com/wp-content/themes/thesis/custom/custom_functions.php.

/* Custom Header Image */

function header_logo () {

?>
<a href="http://www.yourblogurl.com/" title="Your Blog Title">
<img src="enter your logo url here" alt="Your Blog Title" height="150" width="450" style="border: 0px">
</a>

<?php
}
add_action('thesis_hook_header', 'header_logo');

The above code /* Custom Header Image */ this is called comment line which tells the description about the code. Don’t use comment line inside the function displayed in your site.

You should replace www.yoursiteurl.com with your domain name and replace your logo uploaded path in your logo url and adjust the height and width depends on your logo size.

add_action(‘thesis_hook_header’, ‘header_image’);

thesis_hook_header is used to place the header image function inside the header. You can also specify thesis_hook_after_title. Header _image is the function name. By the same way you can use corresponding hook to place your function in particular area of thesis theme.

Add author profile after post

To add author profile in after post you can use two hooks thesis_hook_after_post or thesis_hook_after_post_box. If you want to know in detail about this I have explained already about how to add author box in previous tutorial.

Add custom footer

To add custom footer first you should remove the default thesis footer with help of thesis_hook_footer. Use all hook functions in custom_functions.php file.

remove_action(‘thesis_hook_footer’, ‘thesis_attribution’); this code is to remove default footer.

add_action(‘thesis_hook_footer’, ‘custom_footer’); you should add custom_footer function in this file. In this function you can add category footer and other things you want. If you also need default footer use add_action(‘thesis_hook_footer’, ‘thesis_attribution’);  at the end of the file otherwise default footer shows above the custom footer more footer customization click here.

Need for Custom.css

Once you added the hook and functions inside the custom_fuctions.php file. The function has been added in your thesis theme but you won’t get web page appearance exactly what you like. For this you need to style your function added in custom_functions.php file in other words custom.css code for the function to get better look to your web page. The upcoming post I give you some css tricks to customize your thesis theme. Share your experience in comment section. To know more about thesis hook reference list click here. and For more checkout our all Thesis theme tutorials..

{ 18 comments… add one }

Leave a Comment

  • aviationMY February 6, 2010, 1:58 PM

    hi Pascal,

    long time no see…this blog had gave me such a lot of knowledge specially in Thesis customization and Wordpress self-hosted generally!

    btw, i just want to share something and ask something to you too…haha

    regarding thesis hook…its a best clarification if you could providing the diagram and where are the hooks hook on at!

    eg:http://speedtech.it/wp-content/uploads/2009/04/thesis_hooks_desc_post.png

    and a question..regarding XAMPP, for clarification.

    so its mean that we can do customization offline(not connected to the internet) and if we got an error when in custom_function.php, we can revert it to previous code.???If so, this is a good application to try out!.

    anyway, thank you for helping me with the customization…will inform you as the site has finish customizing!.

    Thank You FourBlooger.com

    Reply
    • Pascal February 6, 2010, 2:15 PM

      Thanks for the image link. We will add this link in post also.

      Yes. You can customize or edit posts in offline with speed and safe.

      Reply
  • Pascal February 6, 2010, 4:31 PM

    Thanks Vivek.

    Reply
  • Jaydip Parikh February 7, 2010, 4:16 PM

    One more good article from you man… Well keep it up.

    Reply
    • Pascal February 7, 2010, 6:49 PM

      Thanks jaydip.

      Reply
  • Thesis Theme Design March 12, 2010, 11:54 AM

    I can’t but give you a big Thanks for accumulating some basic but mostly needed Thesis Tweaks in one post.

    Hope you will serve more awesome post like this.

    Reply
  • Dimas April 21, 2010, 11:55 AM

    As I am starting to use Thesis more, I have two good recommendation for using hooks:

    1) Use Thesis OpenHooks plugin for smaller bits of code (simple markup)

    2) If you have large bits of code, add your hook action in the custom_function.php, and in the callback function for the hook you should use a PHP include_once/require_once statement to include a external php file … for instance:

    remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
    add_action(‘thesis_hook_footer’, ‘custom_thesis_footer’);
    function custom_thesis_footer() { require_once ‘footer.php’; }

    you should then place your “footer.php” file in the “custom” folder, the nice thing about doing this is that you can edit the file in your favorite editor and you can also edit it in the wordpress thesis file editor.

    Reply
    • Suresh April 21, 2010, 9:45 PM

      dimas,

      Thanks for sharing these nice tips i will try this..

      Reply
  • Suresh April 21, 2010, 10:29 PM

    hai saif,

    don’t try to hack the core of the theme while upgrading it may cause problem. Add your code instead of comments.php file use in custom_function.php with help of hooks. for your keyboard layout use the hook thesis_hook_after_comment_box.
    it will work…

    Reply
    • Suresh April 22, 2010, 7:40 PM

      hai saif,

      I give general structure for custom function code for you query..
      paste your keyboard layout code mentioned in the link…
      copy and paste this code in custom_function.php file
      cet the code here keyboard layout

      Reply
      • Suresh April 22, 2010, 9:16 PM

        hai saif,

        Thanks for your words… You can do thesis customization by yourself by watching our thesis tutorials on youtube channel

        Reply
  • john August 8, 2010, 7:44 AM

    I’m just starting to use Thesis for a new website — nothing much there yet, structure not even finished.
    I have never built an entire site with WP so this is really interesting and a challenge to my 65 year old brain.
    While I can see the advantage of Hooks in many instances and have already used some simple hooks, I can’t understand why using them to change the header image is more advantageous than a simple .custom #header.
    All I did was added this to the custom.css
    .custom #header {
    height:200px;
    padding-top:0;
    padding-bottom:0;
    background:url(images/layout/banner.png) center left no-repeat;
    border-width:0;
    }
    While it’s probably not as sophisticated as hooks, I felt like it was much safer for someone who knows virtually nothing about php.
    Am I missing something? Thanks for your time

    Reply
  • Dimas August 9, 2010, 9:08 PM

    John, I use Thesis for websites also (example: http://noonetime.com/) … I think what you are doing with CSS is perfectly legit… my thoughts is do what works and what is elegant, however the most powerful feature of thesis is its hooks. I think the more you use it, the more you will see.

    Reply
  • Aliza Shehpatii April 16, 2011, 12:41 PM

    Just bought Thesis for a few days and still looking around for a useful hints on hooks and functions for a newbie cum non-technical guy like me.

    Thankfully I’ve managed to discover your site, SURESH. A simple yet meaningful guidance for me to start loving my thesis and make it worth every penny I’ve spent!

    Reply
    • admin April 16, 2011, 2:21 PM

      Thanks for great feedback. Your site looks great. Best Wishes!

      Reply
  • Jeb June 3, 2011, 8:48 PM

    Hello,
    Sort of off the topic here, but what if I have 3 things on the same hook…how to I determine the order in which they appear? I want them all there, but I want them in a certain order and they are not defaulting to the way I want them.

    Any insight would be great. Thanks…Jeb

    Reply
    • d'Vance July 14, 2012, 12:41 PM

      Hi Jeb,

      Just add a number at the end of your hooks depending on the order you want it.

      Example:

      add_action(‘unique_hook_location’, ‘your_custom_function’, ‘1’);
      add_action(‘unique_hook_location’, ‘your_another_custom_function’, ‘2’);

      Hope it helps. :)

      Reply