H1 Hack for WordPress Pages

December 22nd, 2008 by

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!
 

102 Responses to “H1 Hack for WordPress Pages”

  1. reza Says:

    wow , many thanks i say :D

     

  2. Becca Says:

    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. :-)

     

  3. Wordpress H1 Tag | Aspiring Affiliate Says:

    [...] is the link to the article: WordPress H1 Tag Hack This entry was written by Aspiring Affiliate, posted on March 27, 2009 at 11:17 pm, and filed [...]

     

  4. Lucas Says:

    Is it possible to do this for Posts as well?

     

  5. Heather Says:

    Yes, just follow the same instructions on your theme file “single.php”.

     

  6. Nadir Says:

    Thank you, Heather. It worked like a charm!

     

  7. Steph Says:

    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

     

  8. Jessica Says:

    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?

     

  9. Scott Hendison Says:

    You’re welcome –
    The size /font of your H1 (and everything else) is always defined in the individual style sheet of your theme – usually style.css

     

  10. Scott Hendison Says:

    Yes, the hack changes the title from an H2 to an H1 – the size for everything is defined in the style sheet of your theme – usually style.css

     

  11. Steph Says:

    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?

     

  12. Heather Says:

    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

     

  13. Jessica Says:

    Scott and Heather:

    Thank you so much! You’ve really helped me a lot. My site looks much better now that I’ve added that code.

     

  14. H1/free software Says:

    Amazing hack. Thank you for share this information.

     

  15. Catalin Says:

    It’s very easy to change the default H1 with your information. Thank you ! Works like a charm…

     

  16. V.C Says:

    I’m not quite sure it could optimize SEO.

     

  17. shootingthewar Says:

    Easier than I could imagine.

     

  18. Lee Says:

    Top tip – works a treat. Cheers for that.

     

  19. Alex Says:

    Useful and clear instructions, hope I’ve done everything correctly. Thanks!

     

  20. Anne Says:

    This trick can be useful. I must test it when I have little time. Thanks

     

  21. Glenn Says:

    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

     

  22. Heather Says:

    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

     

  23. Michel Says:

    Very useful documentation, many thanks !

     

  24. Pritush Says:

    WordPress has completely ignore h1 tag and even i use seo plugin it also doesn’t change h2 tag to h1 tag . nice info. thanks.

     

  25. Sandy Says:

    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

     

  26. Heather Says:

    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.

     

  27. Nijay Says:

    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!!

     

  28. Heather Says:

    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

     

  29. Nijay Says:

    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?

     

  30. Nijay Says:

    functions dot php code below:

    if ( function_exists(‘register_sidebars’) )
    register_sidebars(2);

     

  31. Heather Says:

    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.

     

  32. Nijay Says:

    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!!!!

     

  33. Nijay Says:

    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 ” :)

     

  34. Nijay Says:

    again HTML was missing… I mean to say please put HTML code tag around you php code in red

     

  35. Jeff Says:

    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.

     

  36. Heather Says:

    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!

     

  37. jeff Says:

    Heather,

    Thanks for the reply…I’ll try the theme creator’s page and see what I get.

     

  38. e-xronos.gr Says:

    thnx for sharing this…

     

  39. Steve Says:

    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?

     

  40. Steve Says:

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

     

  41. Branko Says:

    I need help. I can’t find the H1 in my page.php file.

    All I see is:

    What would I modify here?

     

  42. Heather Says:

    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.

     

  43. smilesquare Says:

    Thank you so much.
    This post is really useful. I’m looking for H1 hack and I can say this post is the coolest.

     

  44. Heather Says:

    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.

     

  45. John Says:

    What about h1 size in post content? Can you change it?

     

  46. Heather Says:

    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; }

     

  47. Ella Says:

    Awesome, thanks a lot for the tip. This will really help us, specially me, who is still a novice.

     

  48. Vik Says:

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

     

  49. Scott Says:

    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?

     

  50. Gertrude Says:

    Fantastic, this is really amazing! This will really make editing very simple. Thanks for the tip.

     

  51. Realizare site Says:

    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 !

     

  52. Internet Income Opportunity Says:

    Great tips at this site – I’m glad to have found it. I found it by reading comments on Matt Carter’s Blog – someone left a link to this page.

    Thanks!

     

  53. ItalianPop Says:

    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.

     

  54. Techno Lab Design Says:

    Great info on H1 tag change for WordPress pages!
    Implemented the tut at one of our network sites. Will do the same at the rest.

    Big thanks, Heather!

     

  55. Sandro Says:

    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.

     

  56. Charles Says:

    Thanks for this, really well explained and easy to implement!

     

  57. Emeka Says:

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

     

  58. Orjin Says:

    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?

     

  59. Gaz Pieprzowy Says:

    It’s not entirely about google and value in SEO. I use this trick to simply change the post display. It works for me. Thanks for the nice tut.

    Regards, Gaz

     

  60. Heather Says:

    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.

     

  61. Scott Says:

    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…

     

  62. Emmy Says:

    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!

     

  63. Emmy Says:

    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.

     

  64. Heather Says:

    Sounds great, glad you got it working.

     

  65. Murat Says:

    A great plug-in application has been very successful

     

  66. φωτοβολταικα Says:

    H1 is so important finally???

     

  67. Ciaran Says:

    That is a brilliant post, I have been looking for this hack for a long time as I had heard about it before.

    Thanks

     

  68. tim Says:

    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

     

  69. tim Says:

    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?

     

  70. Hudson Says:

    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?

     

  71. Heather Says:

    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.

     

  72. ağva tatili Says:

    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.

     

  73. Scott Says:

    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?!?

     

  74. Darian Says:

    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!

     

  75. Heather Says:

    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.

     

  76. σχολες οδηγων θεσσαλονικη Says:

    It depends if my hosting does not have account and permission for the user???

     

  77. Scott Says:

    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

     

  78. tourbangka Says:

    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

     

  79. Next Big Thing SEO Says:

    Thank you so much.This post is really useful. I’m looking for H1 hack and I can say this post is the coolest.

     

  80. Kath Says:

    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

     

  81. Scott Says:

    Sorry Kath, Heather is out of town all week, not returning until Sunday, when she’ll be buried in several thousand emails i’m sure.

    Unfortunately, i’m not much help here either, since we don’t use that theme, but this might steer you in the right place – http://wordpress.org/support/topic/change-duplicate-h1-tags-for-single-pages-twenty-eleven-theme

     

  82. Heather Says:

    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

     

  83. Kath Says:

    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

     

  84. Heather Says:

    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.

     

  85. φωτοβολταικα Says:

    Thanks for the code bro! very helpfull!

     

  86. Soulside Says:

    Thanks a lot Heather, this is so useful to me and you save my time :-)

     

  87. Branko Says:

    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.

     

  88. Scott Says:

    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.

     

  89. Nicklas Says:

    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.

     

  90. αποτρίχωση laser Says:

    So precious code! I was searching for hours! You are the man dude!

     

  91. Greg Says:

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

     

  92. Scott Says:

    Sorry, not to my knowledge, no.

     

  93. Greg Says:

    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?

     

  94. Greg Says:

    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();
    }
    ?>

     

  95. Michael Says:

    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.

     

  96. Scott Says:

    Hmm, Heather?

     

  97. Greg Says:

    I must be doing well to warrant people looking up my backlinks hahaha.

     

  98. Jenkins Isaac Says:

    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.

     

  99. Sophia Says:

    I have been looking for this hack for a long time as I had heard about it before. This post is really useful. Thanks.

     

  100. naser Says:

    hey
    Thank you for your great site but my theme doesnt have h1 or h2 tags what shoud I do?

     

  101. Wilson Amelia Says:

    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.

     

  102. Scott Says:

    Well… add them!

     

Leave a Reply

Subscribe without commenting



  Satisfaction

Wordpress Services |Privacy & Security | Refund Policy | Sitemap

Copyright © 2014; Search Commander, Inc. Portland, Oregon - All Rights Reserved. --- #Login -