WordPress Theme Templates: Header - dummies

By Lisa Sabin-Wilson

The Header template is a very important part of your site design because it is the starting point for every WordPress theme. It communicates to web browsers the following information:

  • The title of your site

  • The location of the CSS

  • The RSS feed URL

  • The site URL

  • The tagline of the site

In many themes, the first elements in the header are a main image and the navigation. These two elements are usually in the header.php file because they load on every page and rarely change. The following statement is the built-in WordPress function to call the Header template:

<?php get_header(); ?>

Every page on the web has to start with a few pieces of code. In every header.php file in any WordPress theme, you find these bits of code at the top:

  • The DOCTYPE (document type declaration) tells the browser which type of XHTML (Extensible Hypertext Markup Language) standards you’re using. The Twenty Thirteen theme uses <!DOCTYPE html>, which is a declaration for W3C (World Wide web Consortium) standards compliance mode and covers all major browser systems.

  • The <html> tag (Hypertext Markup Language) 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, it’s information about the document.

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

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

On the Edit Themes page (choose Appearance→Editor on the WordPress Dashboard), 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 appear in the template.

The <head> tag needs to be closed at the end of the Header template, which 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>.

There is one line of code that should exist in every Header template for any WordPress theme: <?php wp_head(); ?>. This tag serves as a hook in WordPress that plugin developers use to insert necessary code and functions. Without this tag, the majority of plugins for WordPress will not function correctly.

How to use bloginfo parameters

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

What differentiates the type of information that a tag pulls in is a parameter. Parameters are placed inside the parentheses of the tag, enclosed in single quotations. 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’); ?>

How to create title tags

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

Search engines love the title bar. The more you can tweak that title to provide detailed descriptions of your site, the more the search engines will love your site. Browsers will show that love by giving your site higher rankings in their results.

The site <title> tag is the code that lives in the Header template between these two tag markers: <title></title>. In the default Twenty Thirteen 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 Thirteen Header template displays the title is based on the type of page that appears — and it shrewdly uses SEO to help you with the browser powers that be.

Within some of the WordPress template tags, such as the <title> tag, you may notice some weird characters that look like a foreign language. You may wonder what &raquo; is. &raquo; is a character entity — a kind of code that enables you to display a special character. The &raquo; character entity displays a double right-angle quotation mark.

How to display your site name and tagline

The default Twenty Thirteen theme header displays your site name and tagline on the top of your site, on every page. 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 home page when it’s clicked.

To create a clickable title, use the following code:

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

The bloginfo(‘url’); tag is your main 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”>Your Blog 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 (choose Settings→General).

This example shows how WordPress is intuitive and user-friendly. Changing your options on the Dashboard creates the change on every page of your site — no coding experience required.

In the Twenty Thirteen templates, these tags are surrounded by tags that look like these: <h1></h1> or <h2></h2>. These tags are <header> tags, which define the look and layout of the site name and tagline in the CSS of your theme.