The WordPress Header Template
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, and the tagline (or description) of the blog.
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 (which stands for document type declaration) tells the browser which type of XHTML standards you’re using. The Twenty Eleven theme uses <!DOCTYPE html>, which is a declaration for W3C standards compliance mode and covers all major browser systems.
The <html> tag (HTML stands for 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, that information is about the document.
In the header template of the Twenty Eleven theme, these bits of code look like the following example, and you should leave them intact:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head>
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>.
Use 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’); ?>
The table lists the various parameters you need for the bloginfo(); tag and shows you what the template tag looks like. The parameters are listed in the order of their appearance in the Twenty Eleven header.php template file and pertain to the bloginfo(); template tag only.
|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 pages||<?php bloginfo(‘pingback_url’); ?>|
Create 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 title bar is the top bar in your 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 Eleven theme, this bit of code looks like this:
<title> <?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) ); ?> </title>
The way the Twenty Eleven 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.
|Title Tags and Parameters||Tags Used||What Is Displayed in the Title Bar|
|global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
|If the reader is viewing any page or post, the title and site name appear.|
|$site_description = get_bloginfo(
'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
|If the reader is viewing the home page or the front page, the site description appears along with the site name.|
|if ( $paged >= 2 || $page >= 2
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
|if( $paged >=2 | $page>=2)||If the reader is viewing any other page within the site other than what has already been defined in the previous tags, the title of the page followed by the blog name appear, and these tags also display the page number.|
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.
Display your site name and tagline
The default Twenty Eleven theme header shows your site name and tagline.
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>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.
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 on the Dashboard. Changing your options on the Dashboard creates the change on every page of your site — no coding experience required.
In the Twenty Eleven 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 blog name and tagline in the CSS of your theme.