Skip navigation

Creating a Clickable Header in Your WordPress Theme

WordPress ThemesWhile working on the CSS design for this site, I wanted two things:

  1. A site design that meet web accessibility standards as much as possible.
  2. A header design that was interesting, original, and clickable.

The accessible part was easy. The Sandbox WordPress Theme, which allows WordPress.com users to customize their blog Theme, puts the blog title into an H1 heading tag and link by default.

Header - example of Sandbox Theme with no stylesheet css showing

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="http://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.

Header example of the Lorelle on WordPress designed Theme with a clickable header

The CSS is:

body {
	background-image:url('http://lorelle.wordpress.com/.../low-logo.jpg');
	background-position: top left;
	background-repeat:no-repeat;
	background-color:#005771;... }
#header { height:150px; 
	background-color:transparent}
h1 { font-size:1pt;
	text-align:right; }
#blog-title, #blog-title a { color:#005771;
	background-color:transparent; }
#blog-title a { position:absolute;
	left:15px; top:6px; width:800px;
	height:150px; }
#blog-description { display:none; }

Here is what all this means:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. The blog-description is hidden from the browser’s display.

Example of clickable header in WordPress Theme - selected text shows hidden blog title

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.

Related Articles

Member of the 9Rules Blogging Network


Site Search Tags: , , , , , , , , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

19 Comments

  1. Posted September 29, 2007 at 9:37 am | Permalink

    Thank you! It was really irking me that I couldn’t make my header graphic clickable. I just subscribed yesterday, but it looks like you have a great blog. Thanks again.

  2. Posted October 27, 2007 at 11:42 pm | Permalink

    Great tutorial Lorelle!

    I hope I can make it work. i have already made quite a few changes in my CSS and I hope I can adjust this change as well!

  3. Posted November 22, 2007 at 11:17 pm | Permalink

    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?

  4. Posted November 23, 2007 at 9:49 am | Permalink

    @Terry:

    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.

  5. Posted November 23, 2007 at 3:51 pm | Permalink

    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 background
    Including 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.

  6. Posted November 23, 2007 at 8:17 pm | Permalink

    @Terry:

    >>>can cause your site to be perceived as untrustworthy<<<

    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.

  7. Posted March 12, 2008 at 6:18 pm | Permalink

    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.

  8. Posted March 12, 2008 at 7:19 pm | Permalink

    @ rebeccastable:

    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.

    Getting the image in your header is covered in
    Odds and Ends WordPress Plugins You Must Know About and Designing Headers.

  9. Phil
    Posted March 13, 2008 at 5:20 am | Permalink

    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”.

  10. Posted April 14, 2008 at 11:04 pm | Permalink

    Hi,

    Great Tutorial. You have revealed the information which can help people. Thanks,

    Jayant

  11. ben
    Posted April 20, 2008 at 12:07 pm | Permalink

    Could this method be used to put multiple links in the header? For example if there were several icons in the header image making them clickable with custom links?

    thanks!

  12. Posted April 20, 2008 at 4:13 pm | Permalink

    @ ben:

    You can put whatever you want in your header. This is the method of creating a clickable area when the image is in the background of the container using CSS. It’s up to you from there.

  13. Posted June 26, 2008 at 5:37 pm | Permalink

    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?

  14. Posted June 26, 2008 at 11:59 pm | Permalink

    @ Nikki:

    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.

  15. Posted September 1, 2008 at 2:37 pm | Permalink

    Hi Lorelle,

    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.

    Your thoughts?

  16. Posted September 23, 2009 at 10:03 pm | Permalink

    Thank you for this! It was the one glitch that was holding me back on a client’s project.

  17. Posted November 24, 2009 at 2:28 am | Permalink

    Thanks for the Great tutorial Lorelle!

    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.

    Regards, Vijay

    • Posted November 25, 2009 at 10:41 pm | Permalink

      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.

  18. Posted May 10, 2011 at 6:00 am | Permalink

    Thanks Lorelle.


8 Trackbacks/Pingbacks

  1. […] 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. […]

  2. […] (the “Lorelle on WordPress” logo) in the background, which I explain in more detail in Creating a Clickable Header in Your WordPress Theme. Below is a summary of the […]

  3. […] 1. Clickable header. 2. Maybe this plugin can help you. 3. You can add in layout.css this line: […]

  4. […] Creating a Clickable Header in Your WordPress Theme […]

  5. […] 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. […]

  6. […] 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 […]

  7. […] Creating a Clickable Header in Your WordPress Theme « Lorelle on WordPress (tags: wordpress wp header logo branding webdesign webdev) […]

  8. […] Creating a Clickable Header in Your WordPress Theme […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,194 other followers

%d bloggers like this: