Rodo Abad

Ever since I got addicted to W3C’s Markup Validation, I started having this urge that I have to check every single page in a website if it’s XHTML 1.0 Valid or not (OCD anyone?). And since my blog (At the time of this writing) is XHTML 1.0 Strict valid, I wanted to make sure that it stays that way for as long as I maintain it.

Anyway, it’s quite common to see clickable header images (Not just the text within the header image) in WordPress installations and they usually take you back to the main page if you click on them. And since the default WordPress theme (Kubrick) only lets you click on the text and not the entire header, I wanted to make a header image clickable too. The first website that I found that teaches you how to make your header images clickable is WordPress’ own tutorial about designing headers. I never knew that finding a solution would be that easy!

However I noticed a couple of things that made me feel like what the heck? If you take a look at the image below (I took a screenshot just incase they change it in the future, lol!)…

They were wrapping the <a> element around the <h1> element. That is something that you mustn’t do especially if you want your WordPress installation to pass the XHTML 1.0 Strict validation test.

Here’s the error that you will get if you try and validate your WordPress installation wherein the <a> element is around the <h1> element.

Doesn’t that error tick you off? That ticks me off a lot! So in order to fix that error, we’ll have to edit two files, the header.php and the style.css file. Please remember that not all of us have the same header and CSS files! So make a couple of backup files before you do anything. I don’t want you refreshing your WordPress installation and then finding a blank page staring back at you.

Add the following to your header.php file if you don’t have it.

<div id="header">
	<h1>
		<a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>"></a>
	</h1>
</div>

We use <?php echo get_option(‘home’); ?> instead of just /index.php because you might change it later to something else. Using <?php echo get_option(‘home’); ?> ensures that WordPress will always go back to your home page no matter what name you give it.

We then add the blog name and description under the title attribute. That way when you hover the image it shows you a small tool tip-like image that says your blog name and description.

Now open your style.css file and then add the following.

#header {
	float: left;
	width: 100%;
}

#header h1 {
	padding: 0px;
}

#header h1 a {
	height: 425px;
	width: 760px;
	display: block;
	background: url('images/header_image.gif') no-repeat top center;
}

Please take note that my header image is called header_image.gif and it has a width that’s 760px and a height that’s 425px. Yours might differ so just change it depending on your header image name and size. Just make sure that you have display: block;. If you wanted to know that those two words to, here’s their definitions.

The display property sets how/if an element is displayed.

The block value sets the element to be displayed as a block-level element, with a line break before and after the element.

And…that’s it! Save your changes and then refresh your page. If everything’s working your header image should now be a clickable header image and XHTML 1.0 Strict valid! Hooray!

Tags: CSS, OCD, XHTML

This entry was posted on Tuesday, November 25th, 2008 at 3:05 PM and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.