The WordPress Header Template - dummies

By Lisa Sabin-Wilson

You will need to know some basic information about the header template to get started with WordPress themes. The Header template is the starting point for every WordPress theme because it tells web browsers the following:

  • The title of your blog

  • The location of the CSS

  • The RSS feed URL

  • The blog URL

  • The tagline (or description) of the blog

In every header.php file in any WordPress theme, you find these bits of code at the top:

  • The DOCTYPE tells the browser which type of XHTML standards you’re using. The Twenty Fourteen theme uses <!DOCTYPE html>, which is a declaration for W3C standards compliance mode and covers all major browser systems.

  • The <html> tag tells the browser which language you’re using to write your web pages.

  • The <head> tag tells the browser that the information contained within the tag shouldn’t be displayed on the site; rather, that information is about the document.

In the Header template of the Twenty Fourteen theme, these bits of code look like the following example, and you should leave them intact:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

On the Edit Themes page, click the Header template link to display the template code in the text box. Look closely and you see that the <!DOCTYPE html> declaration, <html> tag, and <head> tag show up in the template.

The <head> tag needs to be closed at the end of the Header template, and the closing tag looks like this: </head>. You also need to include a fourth tag, the <body> tag, which tells the browser where the information you want to display begins. Both the <body> and <html> tags need to be closed at the end of the template, like this: </body></html>.

Using bloginfo parameters

The Header template makes much use of one WordPress template tag in particular: bloginfo();.

A parameter differentiates the type of information that a tag pulls in. Parameters are placed inside the parentheses of the tag, enclosed in single quotes. For the most part, these parameters pull information from the settings on your WordPress Dashboard. The template tag to get your blog title, for example, looks like this:

<?php bloginfo(‘name’); ?>
Parameter Information Tag
charset Character settings set in Settings/General <?php bloginfo(‘charset’);
name Blog title, set in Settings/General <?php bloginfo(‘name’);
description Tagline for your blog, set in Settings/General <?php
bloginfo(‘description’); ?>
url Your blog’s web address, set in Settings/General <?php bloginfo(‘url’);
stylesheet_url URL of primary CSS file <?php bloginfo(‘stylesheet
url’); ?>
pingback_url Displays the trackback URL for your blog on single post
bloginfo(‘pingback_url’); ?>

Creating title tags

Here’s a useful tip about your blog’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.


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

<title><?php wp_title( '|', true, 'right' ); ?></title>

It may help to put this example into plain English. The way the Twenty Fourteen Header template 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 template tag: wp_title(); displays, or returns, the title of the page that has different parameters:

  • $sep: Or separator; this is the text that gets displayed before or after the post title. In the case of Twenty Fourteen, the $sep is defined as ‘|’.

  • $display: This accepts only two arguments: true or false. Set to true, as in the Twenty Fourteen theme, tells WordPress to display the actual title of the page. Set to false tells WordPress to return the title to be used within a PHP function. In Twenty Fourteen, the value is set to true.

  • $seplocation: This tells WordPress exactly where to place the separator text in relation to the title of the post. The separator is always placed in front (or to the left) of the post title, unless you set the value to right, as in the Twenty Fourteen theme. Set to right, the location of the separator is after the post title.

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.

  • 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 (refer to Table 12-1). So the code creates a link that looks something like this:

<a href=””>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 on your WordPress Dashboard.