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.

Related Tutorials:

1. Widgetized Thesis Theme-Header, Content box and Footer
2. How to Add Multiple Background Images in Body Section of Thesis Theme
3. How to add Categories in Footer of Thesis Theme
4. How to Change Navigation Menu Color and Location in Thesis Theme
5. How to add Page Navigation Menu without Using Open Hook Plugin in Thesis Theme

Tagged as: author box, css, footer, functions, header, hooks, logo, Thesis