Easily Customize Website Header using Thesis Theme Hooks

Most WordPress themes come with nice header layout design where some theme frameworks, like Thesis Theme have a sketched layout printed on white screen. Such themes allow N number of customizing options totally depending on the need.

If you are a developer then you can easily customize the website header, but what if it’s not your cuppa tea. Either you will hire a developer or look up online for some WordPress tutorials and try to fix website header. Don’t worry if you are using WordPress Thesis Theme, as in this tutorial you will learn to customize website header using basic thesis hooks.

Getting Started: Update Thesis Theme

To make sure that we are sailing on the same ship, I recommend you to update Thesis Theme. No sure about it,  refer to article Safely upgrade to latest version Thesis 1.8. If you don’t have Thesis Theme Copy then you can also Download Thesis Theme.

Thesis Header Hooks

Thesis theme framework has been strongly build leaving many options to override default functions, we call these functions as thesis hooks. You can play around with these hooks to customize different blocks (header, content, sidebar or footer) in website . But, be careful while editing custom_functions.php file, as any wrong code can crash your website.

To customize thesis header you may need the following hooks:

1. thesis_hook_before_html
2. thesis_hook_before_header
3. thesis_hook_header
4. thesis_hook_after_header

Here is a quick visual reference of the above mentioned hooks:

Thesis header hooks implementation

Add Thesis Hook in Custom_Functions.php

You can take control of your website using Thesis hooks but before that you should know how to implement thesis hooks. Each Thesis installation has a custom directory in Thesis Theme. Custom directory, is where you do all thesis customizations, has the following files:

1. custom.css (where we style and override default stylesheet)
   
2. custom_functions.php (where we define hooks and override default functions)

To define a basic Thesis header hook, open custom_functions.php in editor use the following code snippet:

function first_hook_before_header() { ?>
<p style="border:1px solid #ddd;color:#d00; margin:5px; padding:3px;">This is Thesis Hook Before Header</p>
<?php }
add_action('thesis_hook_before_header','first_hook_before_header');

The above code adds a paragraph styled in a grey border box before thesis theme header. In similar way you can implement other hooks to define your actions as needed.

Cool Thesis Header Examples

Here are few inspiring header designs customized using Thesis theme:

Cool Website Header – Dodography

Website Header – ImieBelanger

Website Header – LetsCreateSomethingNew

Website Header – ShoutMeLoud

What’s Next?

You must be excited now to customize your website header after this handy tutorial. If you have any queries or need any assistance,  then post it using comment form below.