Customising the title bar in the head section of Wordpress

Written by Kevin Muldoon from System0 on April 27, 2007

The <title> tag in the <head> section of an html based webpage displays the title of the page you are viewing.

In this post i will show you how you can display the information you want to display on your wordpress powered page.

Title Bar Information

The title bar is a very important part of your page. It gives information about the page that is being displayed. The title bar carries a lot of weight in search engines and how your blog is ranked so its something all bloggers should optimise in their blog design.

There are 3 pieces of information that can be used in your title bar. The first two are the Weblog Title and the Tagline. Both of these can be found under the General Tab in the Options page of your blog admin area. The third is the title of the post or page you publish ie. for this page the post title is ‘Customising the title bar in the head section of Wordpress’.

As im sure you realise, Weblog Title and the Tagline are the same for every page on your blog but the post/page title will be different for every page on your blog.

For this page, the information is as follows :

Weblog Title : Blogging Tips
Tagline : Guides, News, Tips, Resources
Post Title : Customising the title bar in the head section of Wordpress

Essentially there are 3 different areas of a wordpress blog and the title bar is usually displayed a little differently for each one. The 3 areas are :

Home page
A wordpress page (eg your about page or contact page)
A blog post

Default Title Bar code found in Kubrick

In the default theme of wordpress (kubrick), the <title> information in the <head> section of header.php is :
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> Blog Archive <?php } ?> <?php wp_title(); ?></title>

The above code has two variables. Namely, bloginfo(’name’) and wp_title(). These correspond to :

bloginfo(’name’) : Your Weblog Title eg. for this page it is ‘Blogging Tips’
wp_title() : Your Tagline eg. for this page it is ‘Guides, News, Tips, Resources’.

Again, you need to remember that 3 areas of your wordpress blog will display slightly different information.

So if the default code was used on Blogging Tips the title bar would be :

Blogging Tips on http://www.bloggingtips.com
Blogging Tips » About on http://www.bloggingtips.com/about/
Blogging Tips » Blog Archive » Customising the title bar in the head section of Wordpress on http://www.bloggingtips.com/2007/04/27/customising-the-title-bar-in-the-head-section-of-wordpress/

If you look at the default code again you will notice the if statement ‘if ( is_single() )’. This makes wordpress display slightly different information on blog posts. Specifically, it adds the term Blog Archive before the blog title is displayed - a bad idea in my opinion.

Changing the Title Bar code to suit your blog

I’m not a big fan of the code that is used in the default theme of wordpress since the title is very long on blog posts and your keywords are pushed to the end of the title. Not to mention the ‘Blog Archive’ phrase which is added to blog posts.

This is the code i use for my title bar.
<title><?php if ( is_home() ) { ?><? bloginfo('name'); ?> - <?php bloginfo('description'); } else { wp_title(''); } ?></title>

This code uses the if conditional statement ‘if ( is_home() )’ which displays slightly different information for the home page for your blog. It also includes the variable bloginfo(’description’) which is the tagline i mentioned earlier in this post :

bloginfo(’description’) : Your Weblog Tagline eg. for this page it is ‘Guides, News, Tips, Resources’

My code displays the following in the title bar :

Blogging Tips - Guides, News, Tips, Resources on http://www.bloggingtips.com
About on http://www.bloggingtips.com/about/
Customising the title bar in the head section of Wordpress on http://www.bloggingtips.com/2007/04/27/customising-the-title-bar-in-the-head-section-of-wordpress/

I prefer this as the title of your blog post is the same as your page title.

Some more examples of how you can customise your Title Bar

Here are some more examples of how you can customise your title bar in wordpress.

Example 1
<title><?php if ( wp_title(' ', false) ) { ?><?php wp_title(' '); ?> - <?php } ?><?php if ( is_single() ) { ?>Blog Archive - <?php } ?><?php bloginfo('name'); ?></title>

will display :

Blogging Tips on http://www.bloggingtips.com
About - Blogging Tips on http://www.bloggingtips.com/about/
Customising the title bar in the head section of Wordpress - Blog Archive - Blogging Tips on http://www.bloggingtips.com/2007/04/27/customising-the-title-bar-in-the-head-section-of-wordpress/

Example 2
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

will display :

Blogging Tips on http://www.bloggingtips.com
Blogging Tips » About on http://www.bloggingtips.com/about/
Blogging Tips » Customising the title bar in the head section of Wordpress on http://www.bloggingtips.com/2007/04/27/customising-the-title-bar-in-the-head-section-of-wordpress/

Advanced Title Bar Techniques

So far the if statements i have shown you use is_home() or is_single() which relate to the home page and blog posts respectively. I have been mentioning 3 main areas. The last main area is is_page() which displays info on wordpress pages (eg. your about or contact page).

For simplicity, i have kept my title code pretty simply. However, you can make it as long and as complicated as you wish and control the title information of absolutely any page on your blog.

Here are some more areas of your site you can control (i know i said at the start of this post there were only 3 but i didnt wanna overcomplicate things too much at the start) :

is_page() : When a page is displayed.
is_category() : When a category page is displayed.
is_author() : When an author page is displayed.
is_archive() : When an archive page is displayed.
is_search() : When a search result page is displayed.
is_404() : When a 404 error page is displayed.

There are a few more conditional tags you can use but the above tags are the most useful in my opinion.

All of these tags allow you to add paramaters to the title. I could specify a different title for individual pages on my site if i wanted. For example, if i wanted to add the title ‘Here are my favourite links’ on my links page i could use the if statement :
<?php if ( is_page(Links) ) { ?>Here are my favourite links<?php } ?>
The above if conditional is pretty straight forward. Wordpress is looking to display certain info if the page is called ‘Links’. These parameters can be used for all of the if statements and will allow you to specify a specific title for any page on your blog.

Overview

You can make your title bar as simple or as complicated as you wish. Once your blog is established and you are tweaking your site for certain keywords and phrases you may find yourself going back to the title code to optimise your <title> tag to suit your needs.

I hope this guide has made it a little easier to understand how the <title> tag works in wordpress. As always, if you are having problems with it or have any questions, start a thread in the forums or leave a comment here and i will do my best to help.

Good Luck,
Kevin

Share and Enjoy:

Written by Kevin Muldoon from System0 on April 27, 2007 | Filed Under WordPress Coding & Design

3 Responses so far | Have Your Say!

chuck | March 19th, 2008 at 11:22 am #

Good deal - made the changes and they worked for me. Thanks!
Danielle | June 14th, 2008 at 9:53 am #

Thanks, Kevin! I tried to find this information in the WordPress Codex, but was unable to do so. Your clear presentation allowed me, a coding newbie, to make the title bar display what I want! Thanks again!!!
Martial | July 5th, 2008 at 2:52 pm #

Thanks for this tip. Everyone needs to follow this tip and change the title tags of their blogs. You made it very clear what to change and how to change it. Great job and thanks for the tip.
Martial