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.)
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.
- 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.
- After you have written your post, scroll down to the bottom of the Advanced Editing screen and look for an area titled Custom Fields.
- To create a new Custom Field called “main_title”, enter the text “main_title” (without the quotes) in the text entry field titled Key.
- The newly created Key should now be assigned a Value, which in our case is the name of
H1title you would like displayed on your page. Type this text in the Value field, again without the quotes. - 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]
