Yesterday, I was trying to work on the design of a couple of my blogs, and ran into the problem of trying to make my header graphic a clickable link back to my homepage. I don’t have much experience with either HTML, or editing the CSS Stylesheet, so it was not surprising that everything I tried on my own failed. Instead of having a clickable graphic, I ended up with no graphic at all.

So, I did what any rational person would do…I Googled it! I came across a great site that gave me just the information I needed, and I was happy to find out that it wasn’t going to be too difficult to do. It turns out that there are only a couple of lines of code that have to be inserted into the code to make the header a link.

This is important to do because the graphics that come in most WordPress templates leave a lot to be desired. Most of the time, you will want to create, or have created for you, a graphic that you can use to customize the template to your theme. Most of the time, this means that you will not want the default text to show on your graphic, as you will probably design that yourself as well.

First, go into your Stylesheet and look for a block of code that looks like this:

h1 {
margin: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
font: 220% “Book Antiqua”, “Times New Roman”, georgia, times, serif;

Now, you want to enter one line of text immediately following the “{”. Type: “display: none;”. Make sure you don’t forget the semicolon! So now, it should look something like this:

h1 {display:none;
margin: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
font: 220% “Book Antiqua”, “Times New Roman”, georgia, times, serif;

Remember, your code may be a little different, as this defines the text that will appear on the graphic you have created. What this line of text does is tell the text to not appear at all. So, it will still show up as the title of the page, but will not actually appear on your graphic. Make sure and save your template before moving on to the next step.

Next, you will want to go into the “header” element of your template, and make another small change. You want to look for the line of code that says:

<div id=”header”>

You want to delete that line, and insert in its place:

<div id=”header” onclick=”location.href=’http://YourDomainName.com/’;” style=”cursor: pointer;”>

Make sure to insert your own domain name in the line of text so that it will link to the right place. On one of my templates, the “header” was named the “masthead”, so if you find something like that, just change “header” to “masthead” in the line of code above. Make sure and save your template, and now your header graphic should be a clickable link.

This will improve the look and functionality of your site tremendously. You can use a template that is used all over the internet, but if you make some changes to personalize it, your blog will stand out from all the others!

Though this is pretty easy to do, you may want to go over to 1Cat.biz, and see the video that was created to walk you through the process. He also has a cool WordPress plugin that you will want to get and use…I will be adding that to my “to do list” for my blogs soon!

WARNING:  If you are new to editing templates, make sure to copy all the code from your template and paste it into a text document.  Save that document so that you can always go back, copy it into your template, and have it to revert to if anything goes wrong.  It is always better to be safe than sorry!