Changing the H1 on your WordPress Page or Post

22nd December 2008

We use WordPress to build a lot of websites, not only because it’s so easy, but because it’s great for search engine optimization.

However, when I began using it to build full sites as opposed to just supplementing existing sites with blogs, I noticed a big shortcoming.

If you create your static pages, then whatever you name the page becomes the menu item, as well as the headline at the top of the page. Therefore, on the homepage we would be stuck with a headline that said “Home” rather than an appropriate and relevant phrase.

Also, for some reason, 99 out of 100 WordPress themes (including Kubrick) don’t include an H1 tag up there, but instead are defaulted to H2 tags.

That made it not only ugly for visitors, but also not well optimized for the search engines, since I firmly still believe that webpages need headlines.

Calling this solution “mine” might not be fair, since all I did was identify the problem… It was my programmer Heather that solved it by coming up with the following solution.

As a bonus, it not only solved the default H2 problem, but it gave us an instant answer for having the menu say one thing, while the page says another aa the headline.

How to Change the H1 Tag
In your theme’s page.php and single.php files, look whatever is inside your H2 tags. Just replace whatever is between them with the following code:

<h1><?php $thisPost = $post -> ID; if (get_post_meta($thisPost, changeH1, true) != ”) {
echo (get_post_meta($thisPost, changeH1, true));
} else {
the_title();
}
?>
</h1>

Instantly, your H2 tag is gone from your pages and posts, replaced by an H1 that matches the subject of the post or the name of the page. Bingo, bango bongo, done.

*note that in some cases, the theme’s style.css file will treat these differently, making the font too large for your taste. If that happens, just change it in the style sheet.

Now is where it gets REALLY good….
Suddenly, we have the ability to edit each H1 tag as we see fit. If we do nothing, then it will still just match what we’ve written in the subject of the post or used as the name of the page, but we enter a bit of “Custom field” information, we can make it say whatever we want.

Be sure to use “changeH1″ (with a lowercase c and an uppercase H) just like you placed in the code above, and then put the headline you want in the value area.

After you use it the first time, you’ll never have to remember it again either, because it will be available from the pulldown menu, so all you have to do is select it and write the headline that you want to use as the H1 tag on the page.

To see a similar modification, look no further than the top of this page, where you can see that my H tag is different than the page title, nut I’ve also left in the behavior that makes the H1 a link – in this case, to itself.

Again, I have to thank my programmer Heather Barger, and if this all seems too complex, she’s laid it out nicely here with step by step WordPress H1 hack instructions.

Why am I giving away this secret now?

Well first, after using it for nearly two years, I doubt it’s much of a secret anymore,  and although I’ve still not read it elsewhere, I keep expecting to. If you have a link t osomeone else that’s posted it previously, please leave it as a comment here.

Second, because I’ve had this post in my drafts for almnost a year, and I already redi the screen shots once. Now with Wprdpress 2.7 out, I’m not doing them again, so I figured it was time to post it. !

Third, and more importantly,  I’m still trying to work on improving my Karma after my fiasco with Peak Studios from earlier in the month.  Maybe I can somehow overshadow the embarrassment of that voicemail I left…

Finally, because it’s the holidays, and I’m in the spirit of giving.

I’d like to wish all of you a Merry Christmas, Happy Hanukkah, a Joyus Kwanza, or just a gool old fashioned Happy New Year… Choose whatever least offends you.

Other stuff I've written that you might like:

1. Automatic Wordpress Theme Generator
2. Integrate Wordpress & Google Website Optimizer
3. Wordpress FAQ Plug-in – Very Cool
4. 10 Commandments of WordPress
5. WordPress Checklist Now a Plug-In