This covered the accessible part of my goals. What wasn’t covered was how to keep the h1 heading text and link of my blog title while allowing the whole header area to be clickable, creating an easy way for a reader to click from any page on my blog to the front page.

When I added the background image for the header, I could only have the text in the H1 header clickable, but not the entire header image area. I wanted the entire header area clickable. I tried various text-image replacement techniques, researching the web for days for a solution, but none worked until I discovered this great technique from WestCiv Style Master Tutorials.

It’s not glamorous, but the code validates and it works.

So if you want a background image in your header and a header image and area that is clickable, this is one method to try.

Creating a Clickable Space

While the h1 heading tag is clickable for the blog title, I wanted the whole header image area clickable, so I had to expand the “link” tag to include the whole image area.

In the Sandbox Theme, the areas involved are the header, h1, #blog-title, and #blog-description divisions.

The HTML structure looks like this:

<div id="header">
<h1 id="blog-title">
<a href="https://lorelle.wordpress.com/" title="Lorelle on WordPress">Lorelle on WordPress</a>
</h1>
<div id="blog-description">
Helping you learn more and do more with WordPress
</div>
</div>

As you can see, the only area covered by the link in the header is the h1 tag, highlighted in red. I wanted to cover the entire header image area with a link.

Since my logo has the name of my blog in it, I didn’t need the redundant text in the blog title heading. The key was to enlarge the link area, while preserving the h1 tag and hiding it. I also needed to “hide” the blog-description tag as I define the information in my sidebar.

When viewed with a text reader or without the stylesheet, the h1 tag text with the title of my blog and the blog description are both visible. But when viewed in a traditional browser, they aren’t “seen”. All you see is the header image which is now in a clickable link.

The logo is set in the body tag at the top left corner of the page. This remains visible if all the containers above it are set to have the background be transparent and to accommodate the image height and width. I couldn’t get this to work with the logo in any of the other HTML containers. It had to be in the background.

The header DIV is set as a fixed height of 150px which stretched it high enough to allow the background image in the body tag to be visible.

The h1 heading tag for the blog title is reduced to 1 point in size, shrinking it “out of sight” but making it visible without a stylesheet and to text readers, and aligned to the right, pushing it over into the solid colored area.

The blog-title DIV includes the area of the blog title (h1) and any links within the blog-title area, setting the background-color to transparent, allowing the background color from the body tag to come through, and then the text is colored to match the color of the background. Thus, it’s disguised and blends in.

The blog-title anchor link is then “sized”. First, the position is set for the top, left corner of the page, and then the width and height are defined as 800px x 150px, filling the entire header image area. The 800px width covers the average screen width.

The blog-description is hidden from the browser’s display.

The end result is that the blog-title link covers the whole header area, making it clickable, the page meets web standards, and I get the clickable header I want.

Lorelle I’m working on this for a new theme as we speak and it originally contained code similar to what you’re outlining here. I couldn’t remove it fast enough…Isn’t this a no-no since it’s hiding text? The blog readers can’t see it, but the search engine spiders can. I think that could lead to problems, no? For example on your blog, this part here:

Helping you learn more and do more with WordPress

That’s not viewable at all to a human reader, but looking at the code (like a spider does) and there it is. I’d be careful with this. Or am I missing something?

Hiding what exactly? The title is text and there, visible, for the search engines and for accessibility. Just because it’s blended into the background color, allowing the image to take the front page, isn’t illegal, bad, or unethical. It’s a common design practice.

Now, if your blog title is “casinos, mortgages, drugs, britney spears, sex…” then I’d say that was bad. :D

There are many who use techniques to replace headings and such with images which involves “shoving” the text off the browser screen and all kinds of things. This is not a bad technique for anyone. Anything can be abused, sure, but this has been around for a long time. Besides, didn’t you hear that Google is going after blogs with ads in them? They got more important fish to fry than a few words blended in with the background color. ;-)

And you can leave the text there. The point of the technique is to enlarge the clickable space, not hide the text.

Lorelle it’s hidden text because the human visitors can’t see it. I’m just going by the google guidelines on this:

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including:

Using white text on a white backgroundIncluding text behind an image
Using CSS to hide text
Setting the font size to 0

It may be a common design practice and totally legit, but that doesn’t mean much to the powers that be. Paid links & ads were around long before Google was even thought of, that didn’t stop Google from making them “evil”.

I’d love for this technique to be doable, and it does make a lot of sense, unfortunately I believe this goes against Google’s guidelines.

And perception is what rules. As I said, if you use spam words, links, or ads hidden within the page, I think we can all agree that this constitutes illicit behavior, right? The title of my blog is not any of those. You have an option with this design to show the words. I’ve chosen to blend them in but they are still visible to search engines and for accessibility. It doesn’t matter. What matters is the perception.

You chose. Google will not penalize you, nor have they penalized me for this usage. It doesn’t meet their criteria. And if it bothers you, use the technique to enlarge the clickable space but don’t hide the text.

I want to add a header image to my blog. I understand your tutorial, but my question is how can I upload my image? I don’t see how placing a url with the image name in the style sheet can work. Thanks for your help.

Like any project, you need to use the right tool in order for the job to get done. This article is about creating a clickable header for your WordPress blog that makes the header, with artwork or text, “clickable” for the user to get to the front page of your blog.

Lorelle, your help is greatly appreciated. Additional to that adage; “Progress is made mainly be the application of the seat of the trousers to the seat of the chair, and knowing how to get the most from Lorelle on WordPress”.

Thanks for the info. I’m only having one problem. When I view my blog on different types of screens (reg vs widescreen) my header is in the wrong place and I can’t for the life of me figure out how to get it in the right place. Any advice?

Ah, welcome to the world of CSS and browsers. Your best help will be found in the WordPress Support Forums. Look for whatever is around your header that is pushing it around, or a float (float:right, or left) in your header’s CSS stylesheet that allows things to be moved around. Make sure the width is 100%. There are so many reasons this can happen and the Forums will give you the free individual attention you need to resolve this. Good luck.

Enjoy it as much as a newbie can. I have two areas on the header I want to link to external web pages. How do I set up specific areas on the header landscape and then set these links. The main header area will remain set to Home, within the blog.

I’m sure you’ve covered this elsewhere but I have limited html knowledge, can use html editors OK and would appreciate any help you can give.

On the website the contact us and the RedHouseMedia area need separate links.

I am loooking to place a contact form with a background image (made in coffeecup form builder) on the right corner of my clickable header image. And also some about me clickable details. How to do that….Please detail.

I’m not familiar with your form builder so you best ask them. Otherwise, the same effect can be done as described in this article. Just use the CSS as stated to expand the area for your image and link area to make it clickable.

8 Trackbacks/Pingbacks

[…] Creating a Clickable Header in Your WordPress Theme by me covers the challenge I had of creating the header for this blog, using a background image and expanding the blog title link to encompass the whole header area, not just the h1 tag of the blog title. […]

[…] Creating a Clickable Header in Your WordPress Theme by me covers the challenge I had of creating the header for this blog, using a background image and expanding the blog title link to encompass the whole header area, not just the h1 tag of the blog title. […]

[…] page, and I’m probably not alone. I did a lot of searching for a solution, and I found that Lorelle’s guide contained the perfect solution for me. To understand the elements that will be changed, take a look […]