The confusion between WordPress h1s and h2s

One thing that confuses me about many WordPress powered sites is the fact that on a single post the title is a link to itself and is a h2. Why?! I know that this problem isn’t restricted to just WordPress sites but I find they tend to be the worst offenders.

I expect the answer is that whatever theme you have was developed using WordPress’s default theme as a framework.

What makes more sense semantically is that on the homepage the website name is the h1, but on all other pages the page title should be the h1.

Here are a few snippets that can be used on every WordPress powered site, from blogs to portfolios, e-commerce to magazine – there are just some things that defy genre.

Logo is a link but not on the homepage

It is a popular convention that a website’s main logo should link back to the homepage and most sites have that down. However, as Webcredible rightly point out, a page should not link back to its self – that just doesn’t make sense and can cause usability problems.

So, here is the snippet that will make sure that on the homepage the logo is the h1 and on all other pages it is a link that takes the user back to the home page.

<?php if (is_front_page()) { ?>
	<h1><?php bloginfo('name'); ?></span></h1>
<?php } else { ?>
	<a class="faux-h1" href="<?php bloginfo('url'); ?>">
		<span><?php bloginfo('name'); ?></span>
	</a>
<?php } ?>

Note that I have used is_front_page() as opposed to is_home() – this is to ensure that any WordPress powered sites that use a static page as their front page still benefit.

To go with that here is the CSS – note that I have styled the h1 and a.faux-h1 the same. The user will see no difference but semantically the code makes far more sense.

#header h1, #header .faux-h1 {
background:url('images/logo.gif') no-repeat;
width:200px;
height:50px;
display:block; /* For the A tag */
}

Single post & Page title is not a link

Continuing on the idea that on the homepage the site title is the h1 but on all other pages the page title is the h1, in all of your templates (404.php, archive.php, archives.php, fullwidth.php, links.php, page.php, search.php, single.php, sitemap.php, etc.) replace your title with this snippet:

<h1><?php the_title(); ?></h1>

You might not be keen on the fact that your page title was perhaps a h2 on the homepage and is now a h1 on the single post page which could affect the size or overall styling so try attaching a class of .post-title - this will give you the opportunity to style the post titles to look the same in the CSS no matter what tag they are using and still remain semantic.

Adopting this method with all your templates should now mean that you have a more standard structure. For example, on a search results page the h1 is "Search results" and the individual post titles are h2s, just like on your archives and the homepage.