How to Create Title Tags in the Twenty Fifteen WordPress Header Template

By Lisa Sabin-Wilson

Here’s a useful tip about your WordPress site’s <title> tag: Search engines pick up the words used in the <title> tag as keywords to categorize your site in their search engine directories.

The <title></title> tags are HTML tags that tell the browser to display the title of your website in the title bar of a visitor’s browser. Look at the example to see how the title of the blog sits in the title bar of the browser window. The title bar is the top bar in your browser. It says Lisa Sabin-Wilson — Designer, Author: WordPress For Dummies.

The title bar of a browser.

The title bar of a browser.

Search engines love the title bar. The more you can tweak that title to provide detailed descriptions of your site (otherwise known as search engine optimization, or SEO), the more the search engines love your blog site. Browsers show that love by giving your site higher rankings in their results.

The blog <title> tag is the code that lives in the Header template between these two tag markers: <title></title>. In the default Twenty Fifteen theme, this bit of code looks like this, and is found in the functions.php template file of the theme:

add_theme_support( ‘title-tag’ );

The add_theme_support( title-tag ); in the functions.php template tells WordPress to place the title tag in the <head> section of the website.

It may help you to put this example into plain English. The way the add_theme_support( title-tag ); function displays the title is based on the type of page that’s being displayed — and it shrewdly uses SEO to help you with the browser powers that be.

The title bar of the browser window always displays your site name unless you’re on a single post page. In that case, it shows your site title plus the title of the post on that page.

Displaying your site name and tagline

Most WordPress themes show your site name and tagline in the header of the site, which means it is displayed in easy, readable text for all visitors (not just search engines) to see. For example

Site name: Lisa Sabin-Wilson

Site tagline: Designer, Author: WordPress For Dummies

You can use the bloginfo(); tag plus a little HTML code to display your site name and tagline. Most sites have a clickable title, which is a site title that takes you back to the main page when clicked. No matter where your visitors are on your site, they can always go back home by clicking the title of your site in the header.

To create a clickable title, use the following HTML markup and WordPress template tags:

<a href=“<?php bloginfo( ‘url’ ); ?>“><?php bloginfo( ‘name’ ); ?></a>

The bloginfo( url ); tag is your main site Internet address, and the bloginfo( name ); tag is the name of your site. So the code creates a link that looks something like this:

<a href=“http://yourdomain.com”&gt;Your Site Name</a>

The tagline generally isn’t linked back home. You can display it by using the following tag:

<?php bloginfo( ‘description’ ); ?>

This tag pulls the tagline directly from the one that you’ve set up on the General Settings page in your WordPress Dashboard.

This example shows how WordPress is intuitive and user-friendly; you can do things such as change the blog name and tagline with a few keystrokes in the Dashboard. Changing your options in the Dashboard creates the change on every page of your site — no coding experience required. Beautiful, isn’t it?

In the default Twenty Fifteen templates, these tags are surrounded by tags that look like these: <h1></h1> or <p></p>. These tags are HTML markup tags, which define the look and layout of the blog name and tagline in the CSS of your theme.

The header.php template file also includes the sidebar.php template file, which means it tells WordPress to execute and display all of the template functions included in the Sidebar template (sidebar.php). The line of code from the Header template that does this looks like this:

get_sidebar();