Creating a Clickable Header in Your WordPress Theme

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

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 CSS is:

body {
	background-image:url('https://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.

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

• Problem Solving the WordPress Header
• Customizing wordpress.com Default Theme Headers
• New Kubrick Header Switcher for WordPress 1.6
• Random WordPress Plugins: Rotating Banners, Header Art, Images, Quotes, and Content on Your Blog
• Customizing WordPress.com Default Theme Headers
• Future of Header Art in WordPress 1.6?
• Putting the Description Back Into Your WordPress Head
• Don’t Get Rid of Your Home Link: How to Add a Home Link

---

Site Search Tags: wordpress themes, wordpress tips, header, header design, header link, clickable header, header art, header image, blog title, blog description, click header, link in header
Subscribe Via 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.