HTTP

The following guide was developed using WordPress 2.3.2. Previous versions have not been tested.

As part of the recent redesign of this site, I looked into the subject of page titles — the content of HTML’s TITLE tags.

Previously, I was using a theme which output titles in this form: “Post at Site.” For example, a page title may have been, “How to Do This, That, and the Other at Foo’s Really Cool Bar.”

I had two problems with that.

First, the word “at” is extraneous; I should hope search engines ignore it as a minor word, but I would much rather have some form of punctuation or other symbol which unquestionably demarcates the post title and the site title. To deal in a hypothetical, imagine a blog named “Science at Home”; that blogger decides to write a post about an experiment which took place in his freezer, a post which he titles “Various Liquids at Sub-Freezing Temps.” Now put them together: “Various Liquids at Sub-Freezing Temps at Science at Home.”

I hope I’m not the only one who thinks such a title is less than great. We’re smart enough these days to distinguish “Article Titles” from Magazine Titles, so why not bring some clarity to the new media of blogging?

Second, when using Mint to track my stats, the pages that people visited would be organized based upon whatever was in the TITLE tags of the pages. That area of Mint’s stats very quickly looked cluttered with overly long titles containing useless information — it’s reasonable to assume that if you install Mint on “Science at Home,” the pages which are tracked will be part of “Science at Home.” We shouldn’t need Mint to tell us that. Resolving that became a priority as well.

In solving these issues, I came up with a nifty little function that can be added to your WordPress blog theme’s functions file. You’ll also need to edit your theme’s header.php file to take advantage of our new function.

• Open and/or create the file functions.php in your theme’s folder. If you had to create the file, go ahead and add this content:

  <?php
  
  ?>

• Next, you’ll need to add the following code, which is designed to put together what I consider to be a fairly optimal title. Various archives, page not found errors, pages, posts, and so on are all accounted for. If there is already content in the file aside from the tags added in the previous step, scroll all the way down. Now you’ll need to add the following code just before the closing ?> (keeping ?> on its own line at the end, of course).

  function title_construct($mint = false)
  {
  	$separator = ' — ';
  
  	if (is_home())
  	{
  		if ($mint)
  		{
  			echo 'Home page';
  		}
  		else
  		{
  			bloginfo('description');
  			echo $separator;
  			bloginfo('name');
  		}
  	}
  	elseif (is_404())
  	{
  		echo 'Content Not Found', $separator;
  		bloginfo('name');
  	}
  	else
  	{
  		// Page / Single post
  		if (is_page() || is_single())
  		{
  			if (have_posts())
  			{
  				echo trim(wp_title('', false));
  			}
  			else
  			{
  				echo 'Content Not Found';
  			}
  		}
  		// Category archive
  		elseif (is_category())
  		{
  			single_cat_title();
  			echo ' (category archive)';
  		}
  		// Tag archive
  		elseif (is_tag())
  		{
  			single_tag_title();
  			echo ' (tag archive)';
  		}
  		// General archive
  		elseif (is_archive())
  		{
  			wp_title('');
  			echo ' (archive)';
  		}
  		// Search results
  		elseif (is_search())
  		{
  			echo get_query_var('s'), ' (search results)';
  		}
  
  		if (!$mint)
  		{
  			if (!is_home() && !is_404())
  			{
  				echo $separator;
  			}
  			bloginfo('name');
  		}
  	}
  }

  That code is based off of the title-generating code in the header file of K2.

• Save and upload the functions file; visiting your blog should confirm that nothing has broken, but it will also confirm that the above code does nothing. That’s because we haven’t actually called that function anywhere. So go ahead and open your theme’s header.php file.
• Locate the TITLE tags; they look like <title>...</title>. What is actually between them will vary from theme to theme. However, what you will want to do is delete everything between the tags and add a call to our function which we defined just a bit ago. In other words, modify the TITLE tags so that they look like this and then save and upload that file:
• You should now see a difference in how page titles are rendered when you visit your blog.

Excellent, you now have optimized titles which emphasize the title of the current page while still providing the site name as well as tertiary data such as “(tag archive)” or “(category archive).”

The above code can very easily be customized, too! For instance, I have it outputting “Content Not Found” in 404 situations. You can change that text to whatever you want (e.g., “HTTP 404″ or “Uh-oh, You Broke It!”). Likewise, the tertiary info mentioned in the previous paragraph is very much based upon my own tastes. You may prefer a tag archive to have a title of “Tagname Tag Archive,” in which case you’ll want to find and replace “(tag archive)” with “Tag Archive.” My theory is that by using the parenthetical form, the name of the tag itself will be further emphasized.

Moving along, you can take advantage of the title_construct() function in tracking stats with Mint as well. If you followed the Mint install instructions correctly, you should have a bit of code in header.php which follows the title of your site and looks similar to this: <script src="/mint/?js" type="text/javascript"></script>

It has been reported that you can override the title that Mint sees with a very brief bit of JavaScript, which is exactly what we’ll be doing here. Between the TITLE tags that we added title_construct() to above and the Mint JavaScript code, go ahead and add the following:

<script type="text/javascript">// <![CDATA[
	var Mint_SI_DocumentTitle = '<?php title_construct(true); ?>';
// ]]></script>

It is very important that the code appears after your page’s regular title but before the call to Mint’s JavaScript. If it appears anywhere else, you’re just wasting your time as Mint will not pick up on the code.

If you want a live example, go ahead and view the source of this page. I choose to keep most of my JavaScript in the footer of the page, so you’ll have to scroll nearly to the end to see the added code. Note that by adding the code to the footer, it’s definitely doing to be after the regular page title!

Once that code is added and you’ve saved and uploaded the header.php file, you should start seeing nicer titles appearing in your Mint stats; keep in mind, though, that it may take a while for old data to cycle through.

And yes, I know that there is a plugin available which allows you to specify custom titles for Mint. However, I didn’t want to go that route because it was a whole lot less “set it and forget it” than the above method is. The plugin only set custom titles for Mint on posts, and it only did that if a custom title was specified in the post’s custom fields. If that’s all you need, by all means go get the plugin! And I gotta admit, I’m impressed with how quickly the plugin was developed and released!

So anyway, that’s what I’m doing to get optimized titles around here. If you have any questions, recommendations, or concerns, feel free to drop a comment!

I’m pretty sure if you end a post title with a “\” you will break the JavaScript which sets a custom title for Mint; the ending “\” will escape right out of the apostrophes enclosing the custom title. That is bad. I’d appreciate any possible solutions to that problem, though I’d imagine ending a post title with a “\” is a rare enough occurrence for me to let it slide for the time being.

Popularity: 7%