Javascript Technique – How to make DIV a Link

Hello guys! It’s been awhile since the last time I’ve posted something. But here’s something I’m gonna share that will make it worth the wait. This is regarding how to get rid of that annoying texts, blog title with a link and the description in your Wordpress Blog. Ok let me start it with an actual example that just happened few minutes back. Zorlone asked me to put a link into his banner since he doesn’t want to click that HOME button from time to time. If you’re asking me what’s the purpose of this, it’s simple. Some people wants to use their customized banner that includes the blog title or even with a description. Well, everyone would want their own design anyway. Wouldn’t you?

By default, most of the themes display the blog title texts and the description. The blog title usually comes with a link to the main page (See image). The header you are seeing right now is actually the customized one. Notice it has the blog title on the upper right part of the image. Ok going back to the real deal. What I did is simply edit the header.php which is easily seen on your Appearance section under Editor link on your wordpress dashboard. I looked for the code where it displays the banner image, the blog title and the description, and I found this one:

<div id=”logo”>
<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<p><?php bloginfo(’description’); ?></p>
</div>

Since my plan was to actually put a link in the entire banner without showing the irritating title and the description, I took out the lines which obviously displays it. And here’s what I did, a simple javascript technique:

<div id=”logo” onclick=”location.href=’http://www.zorlone.com’;” style=”cursor:pointer;”></div>

Here’s the product of this code.

By this method, the whole block is clickable with just a single line of code.  Effortless isn’t it? Try it out yourself.

Good luck!