like a juicy WordPress Watermelon Patch

Note: For a much easier method of accomplishing the task of customizing page titles as well as post titles skip this article and read the following: Customizing WordPress page and post titles.

Question: How can I give a descriptive title to a page, that appears at the top of that page when viewed, and still have a short title that appears as the link to that page in side bars and navigation bars?

Answer: The answer may seem long but it’s fairly straightforward — hang in there. But first, a couple of notes:

A note to those for whom I’ve developed a WordPress powered site: If you have a site that I’ve developed all you have to do is ask and I’ll add the functionality described below to your site. Then all you’ll need to do is skip to the part two of these instructions to find out how to use this method on your pages.

A note about this method: I realize that there may be is a better way to do this. If you think this can be improved upon I’d love to hear from you in the comments. There may even be is a plugin that adds this functionality, but I’ve not found it so far. As to the source of the code that I’ve posted here, I’ve been using this for some time and I’m not certain of the source. But I believe the source of my original inspiration was this article at Beast-Blog.com on WordPress Titles & Descriptions.

Part One: The Custom Field function

The solution I’m presenting here takes advantage of the “Custom Field” function in WordPress and requires adding a bit of code to the “Page Template” file for your chosen theme. As with any changes to your templates you should be certain you have a current backup of your files in case something goes wrong. I cannot guaranty that this will work for you but this has worked very well for me on several sites.

First let’s deal with the code that needs to be added to the “Page Template” file.

In the page template you will find the PHP code that places the “Title” at the top of your page content. It looks like the following code snippet and is usually surrounded by <h1></h1> or <h2></h2> tags and is likely near the top.

<h1><?php the_title(); ?></h1>

If you’ve found the WordPress title tag as demonstrated above you’ll now be adding an “if, else” php statement combined with WordPress tags that uses content from the custom fields if you’ve placed anything there for the page otherwise it uses the Title of the page.

Here’s what the code looks like that needs to be placed before the above title tag in your “Page Template.”

<?php if( get_post_meta($post->ID, 'customtitle', true) ) { ?>

<h1><?php echo get_post_meta($wp_query->post->ID,'customtitle',true); ?></h1>

<?php } else { ?>

Then following the exsisting Title tag in your “Page Template” place this php code:

<?php } ?>

So when you’re done pasting in the code above, your “Page Template” should contain the following:

<?php if( get_post_meta($post->ID, 'customtitle', true) ) { ?>

<h1><?php echo get_post_meta($wp_query->post->ID,'customtitle',true); ?></h1>

<?php } else { ?>

<h1><?php the_title(); ?></h1>

<?php } ?>

Get a code sample text file here: custom-title.txt

Just note that I’ve used <h1> tags to style the title in the example above, and your theme may style the title with something else, so be sure to adjust to match your theme.

And I’ve demonstrated here how to make this work for “Pages” and not “Posts”, but this same method can be used to add this functionality to “Posts”.

Part Two: Using the custom fields to customize the page title

To create a custom title for any particular page, go to the Manage > Pages section in WordPress and chose a page to edit. You may also choose to create a new page.

Near the bottom of the Write Page screen you’ll see a section called Custom Fields.

In the Key field enter “customtitle” and in the Value field enter the custom title you wish to appear at the top of your page, then click “Add Custom Field“, then save your page. As you look at your site, you’ll now have a link in your list of page links or navigation bar that uses the “Title” field contents as before, but now the title that shows on the page itself will be pulled from the contents of the custom field “customtitle”.

And once you’ve entered the “customtitle” label in the Key field under Custom Fields the first time, from then on you can choose “customtitle” from the Select pull-down menu.

That’s how to customize the titles of individual pages. You can see how it all works on this site. If you examine the link to the page “About”, when you visit that page, it’s title is “About this site…” instead of “About”.