|
December 22nd, 2008 by Heather 
Wordpress H1 Hack - 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: 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: <h1><?php $thisPost = $post -> ID; if (get_post_meta($thisPost, changeH1, true) != ”) {
echo (get_post_meta($thisPost, changeH1, true)); 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”. 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”. | ||||
|
||||||||
|
|
| ||||||
Wordpress Services | Sitemap
Copyright 2009; Get WordPressed - Portland, Oregon
All Rights
Reserved. --- #Login -
January 4th, 2009 at 12:10 am
wow , many thanks i say
January 11th, 2009 at 8:39 am
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.
March 27th, 2009 at 8:34 pm
[...] 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 [...]
March 31st, 2009 at 7:15 am
Is it possible to do this for Posts as well?
April 1st, 2009 at 8:42 am
Yes, just follow the same instructions on your theme file “single.php”.
April 2nd, 2009 at 4:55 pm
Thank you, Heather. It worked like a charm!
April 14th, 2009 at 12:32 pm
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
April 18th, 2009 at 10:47 pm
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?
April 19th, 2009 at 8:44 am
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
April 19th, 2009 at 8:46 am
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
April 22nd, 2009 at 12:50 pm
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?
April 22nd, 2009 at 2:55 pm
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
April 22nd, 2009 at 10:08 pm
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.
May 28th, 2009 at 12:39 am
Amazing hack. Thank you for share this information.
May 28th, 2009 at 12:41 am
It’s very easy to change the default H1 with your information. Thank you ! Works like a charm…
June 12th, 2009 at 3:04 pm
I’m not quite sure it could optimize SEO.
July 28th, 2009 at 2:59 pm
Easier than I could imagine.
September 11th, 2009 at 3:17 am
Top tip – works a treat. Cheers for that.
October 14th, 2009 at 2:41 pm
Useful and clear instructions, hope I’ve done everything correctly. Thanks!
November 19th, 2009 at 9:26 am
This trick can be useful. I must test it when I have little time. Thanks
November 19th, 2009 at 6:54 pm
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
November 23rd, 2009 at 6:29 am
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
December 8th, 2009 at 2:06 pm
Very useful documentation, many thanks !
December 28th, 2009 at 1:45 am
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.
January 16th, 2010 at 2:10 am
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
January 18th, 2010 at 9:37 am
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.
January 19th, 2010 at 4:24 am
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!!
January 22nd, 2010 at 9:53 am
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
January 23rd, 2010 at 12:05 pm
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?
January 23rd, 2010 at 12:07 pm
functions dot php code below:
if ( function_exists(‘register_sidebars’) )
register_sidebars(2);
January 23rd, 2010 at 12:55 pm
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.
January 23rd, 2010 at 1:08 pm
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, != ”) {
January 23rd, 2010 at 1:12 pm
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 ”
January 23rd, 2010 at 1:14 pm
again HTML was missing… I mean to say please put HTML code tag around you php code in red
February 21st, 2010 at 12:45 pm
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.
February 24th, 2010 at 8:41 am
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!
February 25th, 2010 at 4:48 pm
Heather,
Thanks for the reply…I’ll try the theme creator’s page and see what I get.