Making your header image in WordPress clickable, and code-markup
There has been a single annoying link titled “home” sitting all by itself at the top of the sidebar menu for a while now, because I couldn’t find the way to make the header image a clickable link to my homepage. After trying a bunch of different techniques, I found what worked and was by far the easiest:
In your theme’s header (believe it or not, I use the default theme “Kubrick” - but I’ve hacked it all to hell) you’ll find the code for the header display. The location is: wp-content > themes > default (for me anyway, you will need to get the header.php file from your theme directory. duh). Here’s the part that displays the blog title and header image (around line 32):
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/">
<?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
Replace it with this:
<div id="header">
<a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>">
<div id="headerimg">
<h1><?php bloginfo('name'); ?></h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</a></div>
EDIT: I noticed that even though the header image was clickable in IE, the cursor stayed the same (not turning into the pointing finger - and not the finger I would like to point at the Internet Explorer developers either). I fixed that by inserting:
cursor: pointer;
into BOTH the #header and #headerimg div ids in the theme’s style sheet.
Bada bing bada boom, your header is clickable very easily. Which led to another problem, namely how to display this code in a post? Google….google…..google……
And that’s how I found another really cool widget by Thunderguy Semicolon: Code Markup. It is VERY cool, and made the tedious task of trying to show the code without it actually rendering in the browser a breeze. Good job Thunderguy!
.