More WordPress - make header image clickable

Another common issue seems to be making the header image clickable once you've managed to remove that mess of a clickable title that was cramping your style. A whole bunch of solutions are simple enough but require for you to edit the header.php file - which is a pretty bad idea if you're making a child theme (in my case it's a child of Twenyten).

Here's a cleaner solution that only requires for you to add a few lines to your child theme's functions.php file. We'll use the JavaScript and JQuery to attach a click() event to the custom header image.

First add this function:


<?php
function make_header_clickable()
{
//get our site's URL from the WP database
$opts = get_option('siteurl');
//add some jquery to make the header image clickable
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language='javascript' type="text/javascript">
$(document).ready(function(){
$("#branding img").click(function(){
window.location.href='<?php echo $opts; ?>';

});
});
</script>

<?php
}
?>


In the case of 2010 template #branding img is the identifier of the custom header image so you might have to change that according to your base theme.

Now make sure to add the action hook for the function to execute once the WP finished loading:


add_action( 'wp_loaded', 'make_header_clickable');


And Voila! Your header now functions as a HOME link.