The Header template

Google Sniper

Search Engine Traffic Guide

Get Instant Access

The Header template for your WordPress themes is the starting point for every WordPress theme, because it tells Web browsers the following:

✓ The location of the CSS

✓ 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'll 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 Ten 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, it's information about the document.

In the header template of the Twenty Ten, 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, 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>.

Using 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 quotes. For the most part, these parameters pull information from the settings in your WordPress Dashboard. The template tag to get your blog title, for example, looks like this:

Table 12-1 lists the various parameters you need for the bloginfo(); tag and shows you what the template tag looks like. The parameters in Table 12-1 are listed in the order of their appearance in the Twenty Ten header.php template file, and pertain to the bloginfo(); template tag only.

Table 12-1 Tag Values for bloginfoO; in the

Default Twenty Ten Template Header

Table 12-1 Tag Values for bloginfoO; in the

Default Twenty Ten Template Header





Character settings set

<?php bloginfo

in Settings/General

('charset'); ?>


Blog title, set in

<?php bloginfo


('name'); ?>


Tagline for your blog,

<?php bloginfo

set in Settings/General

('description'); ?>


Table 12-1 (continued)





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'); ?>

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 Web site in the title bar of a visitor's browser. Figure 12-4 shows how the title of my personal blog sits in the title bar of the browser window. (The title bar is the top bar in your browser. In Figure 12-4, it says Lisa Sabin-Wilson — Designer, Author: WordPress For Dummies.)

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 will love your Blog site. Browsers will show that love by giving your site higher rankings in their results. For more information and tips on SEO with WordPress, see Chapter 14.

The blog <title> tag is the code that lives in the Header template between these two tag markers: <title></title>. In the default Twenty Ten theme, this bit of code looks like this (don't let this code scare you! I promise I'll break it down for you!):

// Returns the title based on the type of page being viewed if ( is_single() ) { single_post_title(); echo ' | ' bloginfo( 'name' );


elseif (

is_home() || is_front_page() ) {bloginfo( 'name' ); echo ' | '; bloginfo( 'description' ); twentyten_the_page_number();


elseif (

is_page() ) {single_post_title( '' ); echo ' | '; bloginfo( 'name' );


elseif (

is_search() ) {printf( _( 'Search results for "%s"', 'twentyten' ), esc_html( $s ) ); twentyten_the_page_number(); echo ' | '; bloginfo( 'name' );


elseif (

is_404() ) { _e( 'Not Found', 'twentyten' ); echo ' | '; bloginfo( 'name' );

} } ?

else {wp_

_title( '' ); echo ' | '; bloginfo( 'name' ); twentyten_the_page_number();


The title bar displays your site name.

apologize toi

Thanks for stopping by. You can find out a little more about IDC, if you'd like; or browse my archives, thai go back to 2002. ¡ma designer who keeps herself pretty busy and an author of Wordl'ress For Dummies.

You can keep up with me by subscribing to my RSS Feed or follow 1110 on Twitter ..and yea. I like pink

P.iln J1, wisikni".1. liF.iv Ihg llui bmfy. - itnknau/n

Figure 12-4:

The title bar of a browser.

#post_class(); .„ Take advantage of the new "Sticky Post" feature in WordPress 2.7

bw.- iSki' 1 wd Ihiirm rtrrrri 153 ton iof the many excellent new features coming in WordPress 2.i, seme are applauding the arrival of itiiky posts,

First - wtiat are tiiey?Stfeky posts are posts that you can "stick" to your front page. For instance, »f you have a post that you published a year ago and would IHte to republish it to the Irnnt i of yniit ".ill- inr .1 liiriii ynu ejiI wlil pu'.l .jihI Miliirl "r.!kk !hi\ fxr.t tu tf»" frwrt p\jvi'" in Uic Edit Puvt pa^u in your WtirtlPrui> jdniin jNnul. Ju'jI du>n% tfut will ¡»tick it TO your front page, ahead of all the other posts on your site.

Li-ia ie-bn WJ-iwi; fee-sKi ley-bri - prmvwn mnthnr ft frlenri; J. R/.j A Wrt#iri5tj.}. Aiittinr

W0nJPne:i Tor Out»-«.-; 4. icubs diver, i. DowMJUe Ftwtojrapheri V. Eipreiio upper?

J 1 wrote the l irrt LdRion or WordPro» 1 or I Dumnlei. pjyMfied Now. Ut. On cmrerVUv writrig I tfw 2nd Ldrtwri, a* to be puMlified in I e(

Buu: Cliefter: Mfliat'i New «1 WonJPrni 2 5

Linked □ twitttil

It may help for me to put this example into plain English. The way the Twenty Ten Header template displays the title is based on the type of page that is being displayed — and it shrewedly uses SEO to help you with the browser powers that be. Table 12-2 breaks down what's happening.

Table 12-2

Title Tags and What They Do

Title Tags and Parameters

Tags Used

What Is Displayed in the Title Bar

if ( is_single() ) { single_post_ title(); echo ' | '; bloginfo ( 'name' ); }

single_post_ title();


If the reader is viewing a single post, the post title and blog name are displayed.

elseif ( is_home() || is_front_page() ) {bloginfo( 'name' ); echo ' | '; bloginfo ( 'description' ); twentyten_the_ page_number();}


bloginfo ('description');

twentyten_the_ page_number();

If the reader is viewing the home page or the front page, the blog name and description are displayed. Also displays the page number if the reader is visiting a page.

elseif ( is_page() ) {single_post_ title( '' ); echo ' | '; bloginfo ( 'name' ); }

single_post_ title();


If the reader is viewing a page, the post title and the blog name are displayed.

'Search results for "%s"', 'twentyten' ), esc_html( $s ) ); twentyten_the_ page_number(); echo ' | '; bloginfo ( 'name' ); }

twentyten_the_ page_number();


If the reader is viewing the search results page, the words 'Search results for', are displayed, as well as the search phrase and the name of the blog. It also displays the page number of the page the reader is viewing.

Title Tags and Parameters Tags Used

What Is Displayed in the Title Bar elseif ( is_404() ) {

_e( 'Not Found', 'twentyten' ); echo ' | '; bloginfo( 'name' )

If the page is not found and a 404 error page is visible, the words "Not Found" followed by the blog name are displayed.

} else {wp_title( '' ); echo ' | '; bloginfo( 'name' ); twentyten_the_ page_number(); }


twentyten_the_ page_number();

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, are displayed. Also displays the page number.

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

Within some of the WordPress template tags, such as the <title> tag in the earlier example, you may notice some weird characters that look like a foreign language. You may wonder what &raquo; is, for example. It isn't part of any PHP function or CSS style. Rather, it's a character entity — a kind of code that enables you to display a special character in your blog. The &raquo; character entity displays a double right-angle quotation mark. See Table 12-2 for examples of common character entities.

Displaying your blog name and tagline

The default Twenty Ten theme header displays your blog name and tagline. My blog name and tagline are

✓ Blog name: WordPress For Dummies

✓ Blog tagline: by Lisa Sabin-Wilson

Refer to Figure 12-4 to see these two elements in the header of the site.

You can use the bloginfo(); tag plus a little HTML code to display your blog name and tagline. Most blogs have a clickable title, which is a site title that takes you back to the main page when it's 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 code:

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

The bloginfo('url'); tag is your main blog Internet address, and the bloginfo('name'); tag is the name of your blog (refer to Table 12-1). So the code creates a link that looks something like this:

<a href="">Your Blog Name</a>

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

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 changing 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 Twenty Ten templates, these tags are surrounded by tags that look like these: <h1></h1> or <h4></h4>. These tags are <header> tags, which define the look and layout of the blog name and tagline in the CSS of your theme. I cover CSS further in Chapter 13.

Was this article helpful?

0 0
Authority Blog Success

Authority Blog Success

Blogs With an Authoritative Voice Attract a Loyal Audience. There are Lots of Rambling Blogs on the Web Today, but Blogging as an Authority on a Particular Subject is the Best Strategy for Generating a Perpetual Income. Blogging as an Expert on Your Subject is the Key to Blogging Success.

Get My Free Ebook

Post a comment