Dissection of a WordPress theme: Part 2

Apr 22, 2005 | Tags: guide, meta-data, php, plugin, rss, theme, wordpress | Written by Administrator

Step 3 – The header

Our design should now be fully finalised and robust enough to handle any browser thrown at it. It’s time to take a break from all this CSS activity and focus on the header.

The header is one of the few places where you have almost complete creative autonomy – photographs, adverts, Flash animations - pretty much anything you want can be placed here. One thing to remember is that the header is the first thing a visitor will see on your site, and it’s important that it attracts rather than distracts.

Let’s look at the code contained within header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
  <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } wp_title(); ?></title>
 
   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
 
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
  <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
  <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
  <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
  <?php wp_get_archives('type=monthly&format=link'); ?>
  <?php wp_head(); ?>
</head>
 
<body>
<div id="page">
<div id="header">
  <div id="headerimg">
    <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
 
    <div class="description"><?php bloginfo('description'); ?></div>
  </div>
</div>
 
<hr />

The first two lines are fundamental XHTML information. We can safely leave this alone and wonder at the obscurity of the syntax.

This leaves us with:

Head data section (everything inside the <head> element - lines 3 to 18)
Opening page div (line 21)
Header div (line 22)

We can ignore most of the code within the <head> section. It defines our RSS and Atom feeds, and we don’t need to change it. Note we get a link to our stylesheet here:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen"/>

WordPress fills in the exact location via the bloginfo ('stylesheet_url') function so we don’t need to hardcode the path.

The call to wp_head allows plugins to add their own head data. Again we can leave this alone. The only item we might want to change is the title definition:

<title>
  <?php bloginfo('name'); ?> 
  <?php if ( is_single() ) { ?> <?php } wp_title(); ?>
</title>

The title is what you see in the window bar of the browser window.

Window bar

Here the title is set to the name of our blog - bloginfo (‘name’) - which is defined in the administration section of WordPress.

Following this is some bizarre code which doesn’t appear useful and can be boiled down to:

wp_title ();

This displays the title of the current page. By default WordPress will use the raquo symbol '»' to separate the title from the other details. You can change this as follows:

wp_title ('-');

This will use a dash as a separator. If you wish, you can change the title to your own liking:

<title><?php bloginfo ('name'); ?> is a product of my imagination</title>

The title currently seems fine, so I will leave it alone.

The rest of header.php is more pertinent:

<div id="page">
 
<div id="header">
  <div id="headerimg">
    <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
 
    <div class="description"><?php bloginfo('description'); ?></div>
  </div>
</div>
<hr />

Here you can see the opening of the div page, with the closing tag found in the footer. The page element wraps everything up – the header, content, sidebar, and footer.

Immediately in the page element we see another div – header – followed closely by headerimg. We do not have to use this structure at all, but for the purposes of this guide I will keep it. You may want to insert images or other items here.

Help me to save time by reading these instructions!

If you are asking a question please read the FAQ to see if it has already been answered. All support questions should be directed to the support forum. Thanks!

Urban Giraffe