Altering WordPress H1 and H2 display for search engine optimization

While using the default display for WordPress is fine, I feel it is worth the little bit of extra effort to change the way WordPress creates your posts and pages.

By default, most themes use the H1 tag for your sites title. While that is nice for branding purposes, I’m not typically trying to be the next Target, Toys R Us, Walmart, or Amazon, so I’d prefer to use my H1 tags for page and post titles.

Fortunately, WordPress has a simple php mechanism for determining what kind of page is being displayed, and we can use them to swap out tags on single posts and pages while leaving the site title in H1 tags on other pages.

The WordPress Heirarchy determines which pages will need to be edited. Typically, you will need to edit one of the following pages and/or the header.php file for the theme in question:

• index.php
• single.php
• post.php

Which file(s) you need to edit are determined by the theme which you are using.

H1 and H2 Swapping of Site and Post or Page Title

Below, I will cover exactly how to go about changing your H1 and H2 tags about when pages and posts are displayed. The instructions are specific to the Atahualpa theme, but should give the clues necessary to modify most other themes without too much trouble.

NOTE and WARNING:

Before making ANY changes to a theme, please read WordPress Theme Editing Best Practices.

With the new built in editor to wordpress which uses color highlighting, a typo could break your ability to edit a file in WordPress, resulting in loss of previous customizations if you don’t have a backup!

If you want everything to be displayed smoothly, even while visitors are seeing your pages, you should first make any needed css changes and then make changes to the way your site and page titles are displayed.

That way, when you make the changes to site and page titles, the style information will already be in place to handle them.

If that is the case, you should perform step 3 before steps 1 and 2.

Step 1: Updating your title to display as H2 when on single pages.

In the Atahualpa Theme, the site title is created in the "bfa_header_config.php" file. We want the title to be H2 when on individual posts and pages, but h1 otherwise.

1. In your WordPress Admin Panel, select "Appearance" → "Editor"
2. On the right, select "bfa_header_config.php" to load the file we need to edit.
3. Once it loads, scroll down and look for the Blog Title section.
4. Find the section that starts with if ($bfa_ata_blog_title_show) == "Yes".

That sections should read:

if ( $bfa_ata_blog_title_show == "Yes" ) {
	$logo_area .= '<h1 class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></h1>';
}

We want to add a test to see if it is a single page and change it if so. When finished, that section should read:

if ( $bfa_ata_blog_title_show == "Yes" ) {
	$xtTag = "h1";
	if ( is_single() ) {
		$xtTag = "h2";
	}
	$logo_area .= '<' . $xtTag . ' class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></' . $xtTag . '>';
}

Save your changes and your title will now be written in an H2 tag when displaying individual posts and pages on your site.

Step 2: Update post and page titles to be H1 tags when displayed on single pages.

For themes with a "single.php" file, this change will probably be done to them.

For the default Atahualpa theme, you will need to load "index.php" and edit it. To do so, select "Appearance" → "Editor" then select "Main Index Template (index.php)" on the right side of the page.

Find the code section for the Post Headline ( it has <!– Post Headline –> before it ), which should start and end with an h2 tag.

We want that H2 tag to be an H1 tag on single pages and posts, so we need to test to see if the current page is single or not and display H1 instead of H2 if it is. Your results on Atahualpa will look like the following:

<div class="post-headline">
<?php
	$xtTag = "h2";
	if ( is_single() ) {
		$xtTag = "h1";
	}
	echo("<{$xtTag}>");
	if( !is_single() AND !is_page() ) { ?>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
		if (function_exists('the_title_attribute')) {
			the_title_attribute();
		}
		elseif (function_exists('the_title')) {
			the_title();
		} ?>"><?php
	} the_title();
	if( !is_single() AND !is_page() ) { ?>
		</a><?php
	}
	echo("</{$xtTag}>");
?>
</div>

There are numerous ways to write this. I chose to have a default tag (h2) and then override it for single pages..and simply echo the tags within appropriate html brackets in order to display them.

Save the changes and your individual posts and pages will have h2 for the site title and h1 for the post title.

Step 3: Updating styles so individual posts look normal.

You may need to alter your styles in order to have things look right after making these changes. Typically, you just need to copy any style information for the current title in h1 tags and make a new version for h3 tags as well…then do the same for content titles as well.

Fixing the title style for Atahualpa

In the bfa_header_config.php file, we saw that the h1 tag for the title looked like:

•<h1 class="blogtitle">

This means there is a css style called .blogtitle or h1.blogtitle for displaying the blog title and we will need to create a new one for h2.blogtitle.

In Atahualpa, there are entries in style.css and header.php for the blog title. Copy them, paste them in below the h1 entries you just copied, change the h1 to an h2 in all items you just placed in, and save your changes. When done, you should have a new section to each of the two files.

Added in header.php

h2.blogtitle {
	<?php echo $bfa_ata_blog_title_style; ?>
}

h2.blogtitle a:link,
h2.blogtitle a:visited,
h2.blogtitle a:active {
	color: #<?php echo $bfa_ata_blog_title_color; ?>;
	font-weight: <?php echo $bfa_ata_blog_title_weight; ?>;
}

h2.blogtitle a:hover {
	color: #<?php echo $bfa_ata_blog_title_color_hover; ?>;
	font-weight: <?php echo $bfa_ata_blog_title_weight; ?>;
}

Added in style.css

h2.blogtitle {
	display: block;
	/* more  ... */
}

h2.blogtitle a:link,
h2.blogtitle a:visited,
h2.blogtitle a:active {
	text-decoration: none;
	/* more  ... */
}

h2.blogtitle a:hover {
	text-decoration: none;
	/* more  ... */
}

Fixing the post or page title in Atahualpa

In the index.php file, we saw that post and page titles are contained in a div with the class "post-headline&quot within h2 tags by default. This means that we are looking for styles such as the following to copy:

• div.post-headline h2

Upon checking, you will find such in both header.php and style.css, so copy them, change the copy to use h1, and save your changes.

The new section in header.php should look like:

div.post-headline h1 {
	<?php echo $bfa_ata_post_headline_style_text; ?>
	}

div.post-headline h1 a:link,
div.post-headline h1 a:visited,
div.post-headline h1 a:active {
	<?php echo $bfa_ata_post_headline_style_links; ?>
	}

div.post-headline h1 a:hover {
	<?php echo $bfa_ata_post_headline_style_links_hover; ?>
	}

The new section in style.css should look like:

div.post-headline h1 {
	margin: 0;
	padding: 0;
	/* more  ... */
	}

div.post-headline h1 a:link,
div.post-headline h1 a:visited,
div.post-headline h1 a:active {
	/* more  ... */
	}

div.post-headline h1 a:hover {
	/* more  ... */
	}

Similar Posts:

• Setting up kickers, bylines, and footers for Atahualpa themed sites
• Creating custom sideboxes for product showcases
• How to create a customized homepage for your store traffic site