Aweber - Email Marketing Made Easy
How To Add a Custom Header Image to Thesis That is Also Clickable

How To Add a Custom Header Image to Thesis That is Also Clickable

April 26, 2010 · 9 comments

in Thesis

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

Almost all the websites and blogs I set up using the Thesis WordPress Theme require a custom header image or logo at the top, instead of the default text links. I’ve seen a number of methods to accomplish this.

Update: After my original post appeared, I received some good feedback from a couple of talented Thesis professionals, suggesting a preferred method for adding a custom header image to Thesis, which is also clickable. I went ahead and updated the post to reflect this solution. I do agree that it’s a better way to do it, and I’m ‘retiring’ the original methods I posted but leaving them up here for you to review.

And Yet Another Update: With the release of Thesis 1.8, there will be a new feature which makes it really easy to upload a custom header image. You can read more about it on this post about the new header image uploader in Thesis 1.8.

How to add a custom header image to the Thesis theme

The Preferred Solution:

  1. The first step is to upload your header image to the /custom/images folder.
  2. Go to your Thesis Options and click “Site Options”. Then in the middle section you will see “Display Options”. Open the “Header” settings and make sure “Show site name in header” is selected.
  3. The final step is to add the code shown below to your custom.css file. You can do this from the Custom File Editor, or your favorite text editor.
  4. .custom #logo {background-image: url('images/header.jpg'); background-repeat: no-repeat; width: 950px; height: 150px; text-indent: -9999px; }
    .custom #logo a {width: 950px; height: 150px; display: block; outline: none;}
    .custom #tagline { text-indent:-9999px; }
    

Be sure to update the image dimensions in the css code to match your image size. The last line of this code is important because this is what make the header image clickable. That’s it. Using this, it’s pretty simple to add that clickable custom header image to your Thesis theme.

Thanks to Bill Erickson and Adam Baird for recommending this as the better way to add a custom header image to your Thesis theme.

And the originally posted methods to add a custom header image to Thesis:

Method #1
Paste this code into your custom-functions.php file:

/*custom header image*/
function customheader () { ?>
<div id="header"><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_directory') ?>/custom/images/header.jpg" alt="" /></a>
</div>
<?php }
remove_action ( 'thesis_hook_header','thesis_default_header');
add_action ('thesis_hook_header', 'customheader');

You will notice that this code references a header div in your stylesheet, so you need to create the div and style it how you want. Of course, you also need to make sure your header image file is located in the /custom/images folder. I originally found this tip on the Thesis Hacker blog and customized to my needs. Something else you can do with this is that you can add in your own alt tag on the image.

Method #2
Paste this code into your custom.css file:

/* add header image */
#header { border-bottom: none; width: 950px; height: 130px; padding-top: 0; padding-bottom: 0; background: url(images/header.jpg) center left no-repeat; }
#header #logo { display:none; }
#header #tagline { display:none; }

You will need to adjust the width and height to your requirements. Of course you will also need to save your header or logo image file as header.jpg in the images folder. This method will not make the header clickable.

If you’d like to rotate between different header images, you can also read this tutorial on how to add rotating header images to your Thesis theme.

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 9 comments… read them below or add one }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: