The easiest way to add a “clickable” header image

I wrote an earlier tutorial about showing the easiest way to add a header image HERE.  I had a lot of feedback saying that it wasn’t clickable. That’s absolutely correct because it isn’t. That tutorial shows how to add a header image and that’s it. It never said anything about being clickable.

The following tutorial, in my opinion, is the easiest way to add a clickable header image….

First, make sure your image is in your custom.css file…

Next, in your custom_functions.php file, create a simple function and assign it a div tag with a unique name so you can style the header area in your custom.css…

function myheader() {?>
<div class=”myheader-space”></div>
}

Next, add the image to the function with the complete file path to the image and give it a class name so you can style the image size in your custom.css…

function myheader() {?>
<div class=”myheader-space”><img class=”myheader” src=”http://www.my site.com/wp-content/themes/thesis/custom/images/headerimage.jpg”/></div>
}

Next, wrap the image with the link to where you want the header image to click to…

function myheader() {?>
<div class=”myheader-space”><a href=”http://www.where I want it to go.com”><img class=”myheader” src=”http://www.hedonism-inc.com/wp-content/themes/thesis/custom/images/headerimage.jpg”/></a></div>
}

Finally, remove the default header and replace it with your new one…

function myheader() {?
<div class="myheader-space"><a href="http://www.where I want it to go.com"><img class="myheader" src="http://www.my-site.com/wp-content/themes/thesis/custom/images/headerimage.jpg"/></a>>/div>
<?
}
remove_action(’thesis_hook_header’,'thesis_default_header’);
add_action(’thesis_hook_header’,'myheader’);

Tagged as: clickable header image, clickable image, header, header image