Making your header image in WordPress clickable, and code-markup

Here is by far the easiest way I found to make the header image in WordPress Clickable:

In your theme’s header you’ll find the code for the header (believe it or not, this website is the default theme “Kubrick” – but I’ve hacked it all up and renamed it Dr_C). The location is: wp-content > themes > default (for me anyway, you will need to get the header.php file from your theme directory. duh). Find this line

<div id="header">

Replace it with this:

<div id="header" onclick="location.href='';" title="Name of your site, or Home" style="cursor:pointer;">

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? A quick google and 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. Nice job Thunderguy!

Facebook Comments


There are no comments yet...Kick things off by filling out the form below.