22 Aug 2009, Posted by christie in Blogging Bytes, 14 Comments

The simplest way to put a clickable header image into the Thesis theme

There are plenty of sites that can tell you how to add a clickable header for Thesis using an image, but this is the quickest, with no code for you to think up on your own. This will take a matter of seconds. This quick fix is only for people who have not already done a lot of customization to your custom.css file – more specifically to the #header or its sub-elements, #logo and #tagline, because it may not work as expected when you already have a lot of references to those things in your custom.css.

Clickable Header Generator

1. Find out how long and how wide your image is. If you don’t know, use Photoshop or GIMP or at least Windows Paint. Write down the dimensions.

2. Upload your image to a folder in your domain and write down the absolute URI where it is. Don’t use a relative path. Example – my header’s URI is http://www.miscbytes.com/wp-content/themes/thesis_151/images/miscbytesheader.png. See, when you go to that URI you can see my header. So make sure you know the path for your header image.

3. Now the fun part! Go to the Clickable Thesis Banner CSS generator provided by DoubleMule. Enter the dimensions of your header image plus its URI into the generator and get your code!

4. In WordPress, go to Appearance – Thesis Custom Styling and paste the code from DoubleMule into your custom.css file. (Hey, just for fun, make a backup copy of custom.css before you do that).

5. Once you click the Little Ass Save Button, you now have a clickable header that is your image! If you want to refine the alignment (default is centered) or distance from the header image to the Thesis code that follows it, here is some additional information from DoubleMule. My own header image is 900 x134, and I think it fits great.

Bonus: Move Nav Menu Below Header

Now your header is done, but the navigation tabs are at the default position of above the header. To get them below it without writing any code for yourself at all, be sure you have the Thesis OpenHook plugin, then in WordPress go to Appearance – Thesis OpenHook. Select a hook – Before Header and put a check in both boxes. 
When you put the check in the box to Remove Thesis Nav Menu, some code will be generated.  Copy that into your After Header as you see in the picture and put a check into the Execute PHP on this hook. Click both Little Ass Save Buttons. Don’t forget that part!

You now have a clickable image header with the nav menu below it!

Last Wednesday evening when Ching Ya sent me my final header image, I knew that I didn’t have a long stretch to sit down and get involved with finding sources online and copying and pasting code and possibly getting everything screwed up. I only had a few minutes but I wanted to see my header NOW! I found the DoubleMule tutorial and got that header up there in just a few seconds. Then the OpenHook plugin with its wonderful checkboxes moved the nav menu and I was done. I wanted to share what I found in case some of you have your header image already and just don’t feel like getting into a lot of code.

Photo credit: PaintMyWordspaintmywords