Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Customizing WordPress: Display a Better Title

Last updated Oct 17, 2003.

You can make a great first impression for your blog by customizing the first thing visitors see in bookmark lists and search engine results: the titles of your blog, its posts, and pages. This article shows you some easy ways to edit the title in the header file in WordPress version 2.3.1.

Customize the Header

The top section of any WordPress blog is the header. It usually includes the name and description of the blog, maybe a banner image, and perhaps some links to pages or other sites. In most themes, a separate file called header.php contains this part of the site.

We’ll work with the default Kubrick theme (see Figure 1). Get started on improving your header by opening the following file in your text editor:

yourblog/wp-content/themes/default/header.php
Figure 1

Figure 1 A new blog, using the default Kubrick theme with no modifications.

What’s in the default header.php? This file is included in each of your blog’s web pages. It contains the DOCTYPE and opening html tags, as required by the rules of XHTML. It also contains HTML head information and an opening body tag, and sets up the header image, blog name, and description (see Figure 2).

Figure 2

Figure 2 The file header.php from the default Kubrick theme, with no modifications. It includes HTML, PHP, and CSS.

The title meta tag should contain useful information, such as the name of your blog and/or the title of a single post or page, enclosed with title tags:

<title></title>

The default theme uses this coding:

<title><?php bloginfo(’name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php else is_page() ?><?php } ?> <?php wp_title(); ?></title>

Let’s break that down:

  1. Put the name of the blog first:
    <?php bloginfo(’name’); ?>
  2. Determine whether the visitor is on any "single" page, such as for a single post:
    <?php if ( is_single() ) { ?>
  3. If so, add further information after the blog name—a double right-angle quotation mark (»), and the words Blog Archive: Unicode character 00BB.

    » Blog Archive
  4. If the visitor is not on a "single" page, execute the else section:
    <?php else is_page()
  5. Display the title of the page or post, preceded by the double right-angle quote:
    <?php wp_title(); ?>
  6. 6. Close the if command:
    <?php } ?>

All of that stuff creates a title similar to the sample in Figure 3 for the post "TiKouka in bloom" from my blog, WordPress on Pluto. Figure 4 shows the source code.

Figure 3

Figure 3 The title of the post as shown in the title bar of my web browser, Flock.

Figure 4

Figure 4 The title of the post in the source code in my web browser.

Change the Symbols

The wp_title() template tag is a bit sneaky, as by default it sets up a double right-angle quotation mark (») to appear before the title. That is in no way obvious from what you can see in the header.php file. Instead, you have to read the Codex for wp_title:

http://codex.wordpress.org/Template_Tags/wp_title

If you don’t like that symbol as the first character of the title for a single post, you can edit the wp_title tag:

<?php wp_title(’’); ?>

Here I’ve added two single quotes () with nothing between them, which replaces the right-angle quote with nothing. If you’d prefer something else, such as an asterisk or other characters, add your preferred character(s) between the single quotes. Below, I’ve used the asterisk:

<?php wp_title(’*’); ?>

Same Old Title Versus Smart Title

The problem with the default title meta tag is that the name of the blog always comes first. Suppose you bookmarked a half-dozen of my posts or pages. Because bookmark lists generally display only the first few words of any title, all you’ll see is a list of names all starting with this:

WordPress on Pluto » Blog Archive

That’s not very helpful.

With tweaking and some logic, we can improve the title. I’m going to set up some conditional tags—like the default tags, but a little more sophisticated:

  • If the home page is displayed, the title will show the blog name and the blog description as set in the blog’s Dashboard.
  • If a page or post is displayed, the name of the page or post appears first, followed by the word in and the name of the blog.

Figure 5 shows how the title looks for the home page; Figure 6 shows the version for an About page, and Figure 7 shows the title for a post.

Figure 5

Figure 5 The customized title of the home page.

Figure 6

Figure 6 The customized title of the About page.

Figure 7

Figure 7 The customized title of a post.

Here’s the coding that does all this marvelous stuff:

<title><?php if ( is_home() ) { ?><?php bloginfo(’name’); ?>: <?php bloginfo(’description’); ?><?php } else { ?><?php wp_title(’*’); ?>, in <?php bloginfo(’name’); ?> <?php } ?></title>

Here’s how it works:

  1. If it’s the home page (is_home()), display the name of the blog, a colon, and then the blog description.
  2. If it’s not the home page (else), display an asterisk, the title of the page, a comma, the word in, and then the name of the blog (with appropriate spaces, of course).

It may look a little complex, but in fact this coding is fairly straightforward. Your blog will stand out from the rest, thanks to one small tweak!