Dan Cederhom of Simplebits has just announced his release of a WordPress theme that you can use to create your own pattern library.

It’s called Pears.

He’s hosting it on github, so you can tweak/improve it as you will.

Check it out now.

“if you tell me again that this tag must be used inside The Loop, I will destroy you.”

[via Twitter]

Since then I’ve done a bit more work on WordPress, and so I thought I’d share a few WordPress title modications I’ve used in a recent project.

I’m also going to throw in some <h1> modifications, since <h1> and <title> contents are fairly similar.

The <title>

Read this first.

You got that? Good.
Okay, so what I did was take the reshuffled code, as follows:

<title> <?php wp_title(' '); ?> <?php if(wp_title(' ', false)) { echo ' - '; } ?> <?php bloginfo('name'); ?> </title>

… and prepended a piece of code to check if this is a search page, and if so, show the search query, like this: <?php if (is_search()){ ?> Search for "<?php the_search_query(); ?>" - <?php } ?>

So we get:

<title> <?php if (is_search()){ ?> Search for "<?php the_search_query(); ?>" - <?php } ?> <?php wp_title(' '); ?> <?php if(wp_title(' ', false)) { echo ' - '; } ?> <?php bloginfo('name'); ?> </title>

So if you did a search for “free iPhones”, your browser’s title bar would show:

“Search for “Free iPhones” – Your Site Name”

It’s nothing amazing, but just makes the <title> that much more useful.

The <h1>

This is a unique title for a given page.
There should be — according to me, anyway — just one <h1> element per page.

Here’s some code to look at:

<h1><?php if (!is_home()) { ?><a href="<?php echo get_bloginfo('url'); ?>" title="Back to the home page"><?php if (is_search()){ ?> Search for "<?php the_search_query(); ?>" - <?php } ?><?php wp_title(' '); ?><?php if(wp_title(' ', false)) { echo ' - '; } ?><?php bloginfo('name'); ?></a><?php } else { bloginfo('name'); } ?></h1>

Well, that’s rather hard on the eyes, isn’t it? One day I’ll move this blog off the default WordPress template and onto something that makes code chunks look better.

It’s all wrapped in an ‘if’ statement that checks to see if this is the home page. If it is, then the <h1> contains just the name of the site:
bloginfo('name');

If this is not the home page, then the <h1> element contains the page title as per the <title> element above, wrapped in an <a> element that links back to the home page:
<?php if (!is_home()) { ?><a href="<?php echo get_bloginfo('url'); ?>" title="Back to the home page"> ... title code ... </a><?php } else { bloginfo('name'); } ?>

So there you have it.

Again, I’m sorry this is so hard to read; maybe one day I’ll go into a bit more detail.
Let me know if anything here requires further clarification.

So you’ve made a typo in your WordPress category.

It’s easy to log in to your WordPress administration site and correct the category name, right?

Yep, but that’s only half the job done; any existing external links to posts in that category will still have the old incorrect category in the URL, and will now return a 404 error, i.e. the links will now be broken.

The solution

What you need to do is create a redirect from the old incorrectly spelled URL to the nice new one.
To create this redirect you’ll need to be able to modify your site’s .htaccess file (NB: this only works for Apache web servers).
You’ll find it in the root folder of your site. You can access it via FTP, or through your web host’s administration interface, if you have one.

So, once you’ve got it open, you’ll see some existing rules: you can ignore these.

Look for this section:

<IfModule mod_rewrite.c>
RewriteEngine On

... (some other stuff here)

</IfModule>

If it doesn’t exist, you’ll need to add it.

Between the <IfModule> tags, append the following line:

Redirect 301 /rwong http://yoursite.com/wrong

…and when you save your .htaccess file, your old incorrect URLs should still work!

The explanation

Let’s break down each part of this new line:

Redirect

This is a directive for your web server; it tells it what to do with what comes next.

301

This is the type of redirect to execute. A ’301′ is a permanent redirect – this tells Google (and anyone else) that this resource had moved permanently. (Here’s a list of HTTP status codes for your reference.)

/rwong

This string is the trigger for the redirect, i.e. the incorrectly spelled part of your URL.

http://yoursite.com/wrong

…and this is the correct URL to redirect to.

In conclusion

So to wrap it all up, you should have something that looks like this:

<IfModule mod_rewrite.c>
RewriteEngine On

... (some other stuff here)

Redirect 301 /rwong http://yoursite.com/wrong
</IfModule>

I hope you might find this useful.
Please comment if you’ve got something to ask, something to add or if you know of a better way to do this.

The problem with default WordPress titles

The default WordPress title displays something like this:

[blog name] » [category name] » [post title]

There are two key problems here:

1. Item order: The order of the items in the title should read from most specific to least specific (left-to-right). So the post title should be first, and the blog title should be last. This makes them more readable and useful in lists of favourites, for example.
2. The separator: The separator shouldn’t be anything that needs to be escaped and it should be something that comes out nice in screenreaders, too. Here’s an article at 456 Berea Street regarding document titles and separators. I find this comment in particular to be most useful.

The solution

Let’s take a look at the standard code:

<title> <?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?> </title>

We’ll reshuffle this as follows:

<title> <?php wp_title(' '); ?> <?php if(wp_title(' ', false)) { echo ' - '; } ?> <?php bloginfo('name'); ?> </title>

So you can see the title of the current page/post comes first. ‘wp_title’ takes an empty string as a parameter; this parameter denotes the separator. We’re not using the default, and since we’ve reversed the order, we don’t need to display a separator at all.

We then have an ‘if’ statement that checks if the ‘wp-title’ holds a value and displays a separator, ‘ – ‘, if it does.

Lastly, we display the name of the blog with bloginfo(‘name’).

So now we get this in our title bar:

[post title] – [category name] – [blog name]

Much friendlier!

Some useful links

• Document titles and title separators.
• Template Tags/wp title – from the WordPress documentation
• How to use the title tag.