H1 Hack for WordPress Pages

WordPress H1 Hack -
This allows you to change the H1 tag of the page without affecting the page name, title, and menu title of the page.

This has most commonly been used in the page.php file of the WordPress themes only, but can certainly be applied to any page that you would like the ability to set the h1 tag (or some cases, if you prefer, the h2 tag). Remember, it is recommended to set the default theme h2 tags displaying the header of the pages to H1 for an SEO advantage.

This documentation will demonstrate applying this hack to page.php in your theme, but can easily be understood from that point on doing the same to your template pages, index.php, single.php, etc.

Step by Step:
1. You will need to be using an installed version of WordPress at least 2.x or greater as this method uses the “Custom Fields” you will find toward the bottom of the page in the admin area as you create or edit pages or posts.

2. In your favorite editor for editing your theme pages, or using the Theme Editor under the Presentation tab of the WordPress admin area, open pages.php for editing.

3. In the default theme of WordPress or the theme you are using, you will see a section toward the top of the file that looks exactly like or similar to this:

It’s this line – <h2><?php the_title(); ?></h2> that you will be changing. It may not look exactly the same, but will almost always be enclosed in h2 tags.

You will want to replace the contents inside those tags, but it is highly recommended that if they currently say <h2></h2> to change those to h1.

4. Replace that line with the following:

  1. <h1><?php $thisPost = $post -> ID; if (get_post_meta($thisPost, changeH1, true) != ) {
  2.  
  3. echo (get_post_meta($thisPost, changeH1, true));
  4. } else {
  5. the_title();
  6. }
  7. ?>
  8. </h1>

So your file should now look similar to this:

5. Save the file and upload it to your theme folder or save the file in the theme editor.

6. Now you can edit or create new pages and use the custom fields to change the heading of the page without changing the actual title of the page.

7. To do this, as an example, let’s create a new page named “Test”.

8. Publish the page, then view it from your WordPress site.

9. You can see that not only the title in the browser, in the menu, and the heading of the page says “Test”.

10. Now back to the admin area, edit the page “Test”.
11. Scroll to the bottom of the editing area until you see “Custom Fields”.
12. You may have to click on the “+” sign to the right to see the area for editing these fields.

13. Here you will need to add “changeH1” to the key text box for the first time. Be sure that changeH1 is spelled exactly the same and the “H” is capitalized.

14. After you have done this the first time, you will be able to select the changeH1 from the drop-down box under the word Key instead. It is only necessary to add the key once with a value, and from that point, it will remain in the drop-down list to be selected easier.

15. Now change the header by typing a new one in the Value text box to the right. Let’s just test it out by typing “This is my new heading text”. Then click “Add Custom Field”.

16. Save and continue, or save the page now.

17. Go back to your site and refresh to see the change.

18. Now you can edit any page to display a different heading just by setting the “changeH1” key in the drop-down list and typing in the heading you want in value. Don’t forget to click “Add Custom Field”.

19. If you have already set a heading in a page using this method, you can also go back to editing the page, and change the value in the box just above where you set it originally. After making the change click on “update”.


Be Sociable, Share!

Heather

Web designer and programmer. Specializing in PHP and WordPress. I can solve any problem, just ask Scott!

104 thoughts on “H1 Hack for WordPress Pages

  1. Happy New Year! I don’t comment on here much, but I love this site and I was wondering if you happened to read the recent article about hot job skills for 2008 that features WordPress. In fact, it shows wordpress trends as having increased by 4 times from that of the previous year. I found this encouraging (and figured I’d share) because in this economy, it’s good to be a part of something that is actually in demand.

    Looking forward to your next post. :-)

  2. Heather, just want to make sure I’m doing this right. I used changeH1 on my blog post and it also changed the title of the post. Is there any way to decrease the font size of the title? Its coming through excessively large. Thank you

  3. Hello and thank you so much for this information! Is there anyway to reduce the font size of my H1 title? I added the code to my page.php file as described, but now my title is showing up in bold and bigger than expected. Is there anyway that I can reduce its size?

  4. Hi Scott, I have changd everything that makes sense (to me) to change in style.css but none of the chages affected the size of my H1 titles. Do you know the exact code that i need to change?

  5. It may not be predefined in your style sheet. Here is a piece of code to copy, paste and adjust to get you going:

    h1 {
    font-size: 12px;
    }

    Just copy that, paste it at the bottom of your style sheet and then adjust the number 12 up or down until you see the size that you want.

    If you want it to be bold, add:

    font-weight: bold;

    just below the font-size: 12px;, but above the }

    Heather

  6. HI, Thanks for the info. I am using Atahualpa with the All in One SEO plugin. I was able to change the code for the pages but when I change it on the single.php file all I get is an error message when visiting the post url.

    Is is because of the plugin I am having this problem?

    Thanks,

    Glenn M Smith Author of Lotus Petal

  7. Glenn,

    Not sure that it would be the combo of plugins – seems more likely to be an error in the code if you’re seeing an error.

    Rather than posting code here, could you make the edit that shows the error and send the file by email for me to look at? I can confirm if it’s the code or a combo of the plugins that way.

    Please send to heather@searchcommander.com.

    Heather

  8. Hi,I have tried this hack on my website but it is creating two H1 tags for every pages,first H1 tag is from home page and second H1 tag is what i entered in custom field.How can i remove the first H1 tag, i want only custom H1 tags to all other pages but in home page it should be default one

  9. I’m sorry Sandy, but what you claim is simply impossible. The theme you’re using is obviously creating the first (and unchanging) H1 tag, unless it’s coming from some plug in, although I know of none that will do that.

    Look in your themes header.php file, or maybe in other template pages, or contact your theme author, but I assure you, our hack is *not* creating two H1 tags.

  10. This is a great tutorial for custom H1 Tags… I have used this in one of my upcoming website… but there is a problem… All things work fine when I use a H1 value in my custom field (changeH1)… but when I do not use changeH1)custom field in some other page, that page do not show the_title(); value… so the else {
    the_title();
    })
    part is not working… I am using ‘All in One SEO Pack’ plug-in… is this causing the problem… please help if you can!!

  11. Nijay,

    Try changing the_title first to wp_title.

    If that doesn’t work, try: single_post_title.

    If neither of those work, your theme might be using a custom call. If it is, you should be able to pin it down by looking in the functions.php file of your theme.

    Heather

  12. Thanks for your reply Heather.. it was a life saver but nothing worked :(

    I am not using anything special in my custom theme’s functions.php… just using the following code to register sidebars:

    One thing… I am not using articles (or posts)just using Pages in my site with subpages till down level 3… any clue?

  13. For testing purposes, can you try the h1 hack with your default wordpress theme? If it works correctly, then we will definitely know that it’s theme related.

    If it’s theme related – the only way that I could help further would be to actually see your theme files. If that’s the case and you want me to help further, please comment that you want to do that and I will respond by email. Please DO NOT put your login or file copies on this comment section for security reasons. If and when we find the issue, the answer can be commented here. I’m sure it’s probably something simple, but just needs a fresh pair of eyes to see it.

  14. Ohh… I am really sorry to bother you Heather… It was my mistake… I have just copied and pasted the code in my theme never looked at it with opened eye :)… in the code above in your actual tutorial (end of 1st line in red) you have published, != ”) { and that must be like, != ‘) {

    :) :) Well Well Well… you are a great person, always looking to help other and you have tried your best to solve my problem… Thanks from my heart. Your H1 hack has really saved my life today!!!!

  15. just put

    tags around you H1 hack code… what I have written in previous comment is published same as in your code there must be (‘)nospace(‘) instead of ” :)

  16. Hello,

    This is a great “hack”, but really it should be included as a core feature of WordPress.

    Unfortunately, I’m using a theme that doesn’t seem to work with this hack. I’m using the Aesthete 1.1.4 theme and I really love the look of it. However, the code your hack calls for in many of the files simply doesn’t exist.

    I’ve been able to successfully implement this hack on many different themes, but cannot seem to get it to work with the Aesthete theme. Is there any way I can get some guidance on how to implement this using that WordPress theme??

    Thank you.

  17. Glad you like it, and thanks for saying so! I agree, and why WP chose an H2 remains a mystery! Anyway, have you commented at the developers theme page?

    Because that’s where you’re most likely to get some fast and free help – otherwise it’s a lot of trial and error, and poking through files to figure out what the heck they’ve done!

  18. This is a great hack but I can never get the standard post title to show if there is no changeH1 – does anyone else have this problem?

  19. Just figured this out – thanks Nijay.
    != ”
    should be
    != ‘
    Tried the change on a few Woo Themes and it works for me

  20. I would check you’re other theme files. You’re page.php code is non-typical, so without seeing the entire theme, I’m not sure which direction to point you in other than open each of them and see if you can track it down.

  21. I’ve been searching for a plugin that would do this in posts, but there is nothing available. Fortunately you took the time to list the steps for this hack and it’s great.
    Can’t believe WordPress doesn’t include something so valuable for SEO in adding the H1 tag to every post page.
    Thank you so much for this. Very detailed and simple.

  22. Yes. In your style sheet, first look to see if there is already a style set for your h1 tag. If there is, just edit the font-size: for it. If not, add this with the size you want:

    h1 { font-size: 12px; }

  23. Can i achieve the same thing by simply using the Heading 1 formatting option that’s available in the visual editor?

  24. No, not really – The concept here it that it changes the display of post subject or page title, (which most themes by default make an H2), into an H1.

    Could you add a second headline before your text on a page or post? Well sure, I suppose, but it will look sort of silly underneath the first headline, don’t you think?

  25. The H1 is now a not so important thing at a web page. Google decreased very much it’s importance. However, your tutorial is very good because you need to have just one H1 / page.

    Nice trick ! Thank you !

  26. Cool tutorial, and I still can’t get why WordPress hasn’t got yet such feature implemented. However it seems to work just in some of the themes, not all.

  27. I have been looking for a plugin too, that would automize the process, but i haven’t seen any yet. anyway your instructions were very clear and I’ll try to implement this little hack on my site too.

  28. Great information expressed here! That’s exactly what I was searching for. I am definitely going to implement it on my blog right away…….

  29. Is it possible to use this technique with the new version of wordpress, ie, 3.0 and afterwards?

    Also as far as I know there must be only one H1 tag on a single page. Is there any disadvantage of using more than one H1 tag?

    And my final question is about paid themes. Some of the paid themes does not allow editing, Is there any way to overcome this and use the trick you mentioned?

  30. For the 1st question, yes you can use it in 3.0+ as long as you can edit the theme.

    On the 3rd question (paid themes), if you can’t edit the theme, there isn’t any way around that. Best suggestion would be to check with the theme creator on making the edit for you or providing you with the code.

  31. On question #2, I prefer using just one H1 tag per page, and that was the “official” line by Google for a long time.

    Although Matt Cutts of Google recently said that there ARE legitimate times you can use more than one, conventional wisdom is to have only one H1 tag, and use H2, H3 etc. for sub-headlines.

    Think of H1 as the headline of a newspaper story – Why would you possibly want two?

    Read this Google SEO Guide for more details…

  32. Thanks for the hack Heather, it works like a charm.
    Question: I am using the hack on the file single.php and it works perfectly for changing the H2 tags to H1 tags for all posts when viewed individually. However, when I look at my homepage – which lists the latest posts, the titles are still showing as H2 tags. I tried applying the hack to my template’s index.php file, but it didn’t work.
    Is it possible to use this hack to modify the homepage? Thanks!

  33. I corrected an error in the hack to my index.php, and it now works on the homepage too!! Thanks again for this great hack.

  34. Heather this is just what im after but I dont seem to have the custom fields at the bottom of the edit page. Is there something I have to turn on?

    many thanks

  35. heather ignore last post i figured you got hat from screen options. However I too now have 2 H1′s the first of my blog title and the new one for the page, this surely isnt good , any ideas?

  36. It’s all a bit confusing to me, but I will give it a go that’s for sure.

    learning and actually understanding code is a skill that I really want to learn…

    PhP is the hardest of them all.

    Can you recommend a good learning resource?

  37. Best recommendation is to search google and start looking at the different tutorials until you find one that fits your learning curve. Some are overly complicated to some people and not others. The one I consider to be an excellent beginners resource is http://www.tizag.com/phpT/
    They do a very good job at a slow pace with good instructions.

  38. I would verify you’re other concept files. You’re web page.php code is non-typical, so with no viewing the complete theme, I’m not sure which course to level you in other than open each of them and see if you can track it down.

  39. I removed the link in your name and approved this on the off chance that this is a legitimate comment, and not just a blog spammer looking for backlinks with generic comments. Can you elaborate (explain) what you’re talking about?!?

  40. My homepage does not show up in PAGES, so I cannot edit it there. How to I get this to work for my Homepage H1 Tag? Thanks!

  41. You should actually be looking for index.php and home.php in your theme files to make that change. If you’re using a template file for your homepage, you’ll have to look for the file name the template has.

  42. Sorry, I’m not sure I understand. Yes you need permissions available on your server to edit files in wordpress admin, k, just use f t p

  43. It was a real pleasure discovering your site a short while ago. great looking blog. I found a lot of interesting things inside your blog, Thank you for having time to create H1 Hack for WordPress Pages article as well as sharing your notions. I have bookmarked your website to take a look at the newest stuff you post.
    kind regard erina from tour bangka

  44. Hi Heather

    I’m trying to use this in twenty eleven. The page.php file does not contain the above code.

    ID; if (get_post_meta($thisPost, changeH1, true) != ”) {

    echo (get_post_meta($thisPost, changeH1, true));
    } else {
    the_title();
    }
    ?>


    This is where i’ve added it, it gives me the title but I cannot locate the custom fields to be able to edit this. Any suggestions.

    thanks

  45. Kath,

    If you mean that when you’re editing the page in the wp-admin you aren’t seeing the custom fields, look at the very top right hand corner for the light grey screen options tab. When you click on it, you can see the other editable page section options. Just check the box next to custom fields, then click the screen options tab again to close that and you will be able to see the custom fields section below the visual editor again.

    Let us know if that’s what you couldn’t locate please.

    Thanks, Heather

  46. Hi Heather

    Thanks for the reply.

    With this theme there is no screen options under “appearance – editor”, I can see where you mean, it exists in widgets and other options.

    Again trying to locate the code in “appearance – editor” the page.php is nothing like your suggested code. I have copied the entire page template (page.php) code below.

    ID; if (get_post_meta($thisPost, changeH1, true) != ”) {

    echo (get_post_meta($thisPost, changeH1, true));
    } else {
    the_title();
    }
    ?>


    Hope that helps.

    regards
    kath

  47. In the twenty-ten and eleven themes, the code that you normally find in page.php is now in content-page.php.

    Not that the H1 hack can’t be used in those themes, but with the new built-in features of them and wordpress, it’s actually more work to use the hack than just using the features.

    You can change the page name at the visual editor to change the title, then edit the name on the navigation menu through Appearance > Menus. So you can accomplish all the same things with regular features as the H1 hack provided before those features were available.

  48. I don’t see the custom feild section anymore.

    I remember I used this guide to change the H1 successfully and now ( a year later) I want to change them again and i don’t see the custom feild section.

  49. Look in the TOP RIGHT of your admin – a rectangular box saying Screen Options right under “Howdy…” –
    Likely the “custom fields” box is not checked. This was a weird WP change a few versions ago.

  50. I know the thread post is a bit old, but still very useful!

    I just wanted to point out an error in the code you provided. I can see you have done the right thing in your print screen though. You should change:

    (get_post_meta($thisPost, changeH1, true) != ”)

    To:
    (get_post_meta($thisPost, changeH1, true) != ”)
    (” instead of ” in the end)

    Otherwise, the default title will not show up if the custom H1 is not set.

  51. Can you do this kind of a mod for category pages / archive pages? Thats what I am really looking for. Possible?

  52. This code does not work if you choose not to specify a custom h1. Maybe its the new version of wordpress that messed it up. Is there a way to have the default post displayed if you dont specify a custom h1?

  53. Nevermind – I figured it out. Here is the working code so it will display the H1 tag as default if you choose not to use a custom H1:

    ID; if (get_post_meta($thisPost, changeH1, true)) {

    echo (get_post_meta($thisPost, changeH1, true));
    }
    else {
    the_title();
    }
    ?>

  54. I have been looking exactly for this to function, and just as Greg reply, I’m interested this one on category/archive pages, as well.

    @Greg… Thanks for sharing what worked for you.

  55. Its Very useful documentation. really well explained and easy to implement. I have been looking for this hack for a long time as I had heard about it before. Thanks for sharing.

  56. Very useful tips that will make the page content more SEO friendly. Keeping main title of the page inside h1 tags really improves the page SEO score & quality.

  57. I tried and could not get it to work. I think people are checking this out because the H1 and H2 tags are messed up in wordpress twentythirteen theme.

    Good info though. Thanks. The custom post template looks different than what is pictured here.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>