Custom image header for Thesis theme in WordPress

Are a you a Thesis user? Do you wanna put a custom image and a banner in your blog header? Follow this tutorial to learn how to do it.

Visit the Thesis Option page of you blog and deselect these checkboxes: Show site name in header and Show site tagline in header.

Edit your custom_functions.php file ed insert the following code:

function my_header() { ?>
<div id="sitelogo">
	<a href="<?php bloginfo('url') ?>"><img src="<?php bloginfo('template_directory') ?>/custom/images/Sitelogo.png" width="610" height="100" alt="Whatever you want" /></a>
</div>
<div id="leaderboard_ad">
	<!-- Insert your banner code here (234x60) -->
</div>
<?php }
add_action('thesis_hook_header', 'my_header');

You must have Sitelogo.png image in the /custom/images/ folder of your Thesis theme. In this case the image size is 610×100 pixel. Obviously you can choose any other size but don’t forget to change the code in custom_functions.php.

You have to edit also your custom.css file (you can find it in custom folder of Thesis theme) and insert these lines:

.custom #my_header {
width: 100%;
float: left;
}

.custom #sitelogo {
float: left; height: 100px; width: 610px; padding: 0px;
}

.custom #leaderboard_ad {
float: left;
width: 234px;
height: 60px;
margin-top: 26px;
margin-left: 116px;}

That’s all, now you have a custom header with your logo on the left and a banner on the right.

Of course, you must adapt image and banner size according to your needs.

Tagged as: CSS, hacks, header, Thesis