Optimize WordPress Page Headings

... it also allows for keyword insertion into the WordPress Page titles - something that can only increase page rankings in the search engines.

Note: This post has been republished due to new interest in it. In addition, more detailed information and instruction has been included with the post.

I have always thought that one of the main flaws of many WordPress themes is that the main Page navigation, when called by using the wp_list_pages() function, applies a title to each of the navigation links with whatever value is used in the the_title() of that particular Page.

Wouldn’t it be great if you could have a Page title that was more descriptive than the short title that WordPress wants to display in your navigation link?

Don’t get me wrong, this is a good idea, but because of the way most navigation links are designed, the page titles need to be quite short and not very descriptive. Similarly, these themes tend to also use the_title() as the main H1 or H2 tag for the page display itself. In other words, if the navigation link says “Home”, the page title for that page usually displays as “Home” as well. This may be the way a designer wants it, but often it seems that a more descriptive page title is what’s really needed.

By applying a nice bit of coding and sharing it with the world, Mike Cherim gave me the idea about how to solve this problem. I adapted the code he uses to display WordPress pull quotes, and now use it to afford the WordPress user the option to add their own, more descriptive page title rather than relying on the_title() alone. By using Mike’s technique, along with the built in custom fields feature of WordPress, the user is not required to to add a more descriptive page title, and if they don’t, the code defaults to using the_title() as normal. However, it does afford the user the option to be more descriptive in their page titles. Not only is this a neat feature that allows for more descriptive titles, but it also allows for keyword insertion into these WordPress Page titles - something that can only increase page rankings in the search engines. After all, which H1 page heading is more SEO friendly, “Home” or “Welcome to LifePlan Financial“?

The code below shows how I implement thee page titles in the PHP code. (Sorry, I could not get the actual PHP code to display correctly in this post, so what you see below is an image.)

main_title.jpg

Essentially, the code above says the following: If the custom field named main_title is NOT empty, display the text contained in that field as the H1 title. If the custom field named main_title IS empty, display the standard WordPress the_title() tag as the H1 title.

Putting the Code to Work for You

Based upon our example above, let’s put this into action. We’ll add one custom field called “main_title”. The following instructions will demonstrate how to add this information to a post using Custom Fields.

  1. From the Write Post panel, choose Advanced Editing. If you are using the Simple Editing screen, look for a button with Advanced Editing » next to the Publish button. Click the button to go to the advanced editing screen.
  2. After you have written your post, scroll down to the bottom of the Advanced Editing screen and look for an area titled Custom Fields.
  3. To create a new Custom Field called “main_title”, enter the text “main_title” (without the quotes) in the text entry field titled Key.
  4. The newly created Key should now be assigned a Value, which in our case is the name of H1 title you would like displayed on your page. Type this text in the Value field, again without the quotes.
  5. All done. If I explained this correctly, and you followed the directions, your WordPress pages will now display the custom page title field!

You can add a page title to each of your WordPress pages meta-data. In the Custom Fields section, the Key will now feature a pull down list with the previously entered Custom Fields. Choose “main_title” and then enter the new page title in the value. Click Add Custom Field.

You only need to create a new “KEY” once, after which you can assign a value to that key for every post, if you so desire. If you do not enter any value in the main_title key, the code I wrote will default to using the standard WordPress page title contained in the_title() function

You can see this technique in action right here at 1955 Design. Just navigate the menu and see what titles I have chosen to add to the pages, rather than just the default navigation text. I think it’s a great idea, and thank Mike for both the code and the concept.

[eof]


del.icio.us| Digg| blogmarks| Ma.gnolia| StumbleUpon| Technorati|

11 Comments & Trackbacks to “Optimize WordPress Page Headings”

 

[…] It’s just one in a series of WordPress enhancements that I have learned of recently. I think it’s a neat feature that is very often overlooked by […]

[…] there are thousands of free plugins available that enhance the usability of WordPress, as well as custom features that can make your website more search engine […]

[…] I learned how to use custom fields in WordPress, I could think of dozens of reasons to use them. Using custom features gives the […]

[…] Optimize WordPress Page Headings […]

[…] considerable thought, I decided to use two WordPress custom fields to accomplish this task. I use one custom field as a logical marker to identify which post to […]

This almost worked for me.

The main_title from custom fields was displayed as the post title off of my main page but it is no longer presented as a link. Plus the actual single post view has a page title of just the blog name .

I placed the code in the index.php file.

Testing on a local install of WP from my computer.

Paul,

This code is designed to work with a WordPress “Page” and not a “Post”. This code would be therefore be placed in the “page.php” file, not the “index.php” file. That is why there is no link attached to the title, because a “Page” does not link to anything.

Your post can already have as long a Title as needed. The purpose of this code was to allow you to have a short title for your navigation link, such as the word “About”, but a longer title on the page, such as “What You Need to Know About Me”. The implementation of this is on most of my navigation links on this blog, such as my About page.

Does that make sense?

Yeah, makes sense.. it was late when I read it the 1st time. I found your page because I was trying to find a way to get rid of the leading spaces in front of the page/post title (as seen in the page source). It bugs me becuase I like clean code and have hand coded html for years, ….wordpress/php /css, etc is new to this ‘ol html guy.

This works perfectly. I’ve been searching for a plugin or hack to get around this for a while now.

One thing though… For those who are not too friendly with codes, just search for in the page.php file, then replace it with the codes David provided above. That’s it.

I am glad my post helped you out, Chris. It is a neat feature and I use it now on almost all of my WordPress installs.

Thanks for taking the time to vist and to comment.

[…] of mine, David Zemens (who I suspect also cares about the small stuff like this) came up with a cool method of manipulating page/post titles in WordPress to fix this specific issue. It uses WordPress’s Custom Fields function, which, […]

0 Trackbacks to Other Blogs

Enter Your Details

  • First time commenters will have their comment moderated before it appears.
  • If there is a link in your comment, it will also require moderation.
  • This site uses Akismet to stop Spam in it's tracks.
  • So, if you are sending Spam, just forget about leaving a comment, OK?

Please Leave Your Comments Below