Theme for Wordpress: The header

Construction of the header file for the site (header.php).

The page title

Since the header is shared by the home page, article, category or other types of pages, the title should be conditioned to the type which is achieved by a list of PHP if/elseif.

<title>
<?php 
if(is_404())                { _e('Page not found', ''); } 
elseif (is_home())      { bloginfo('description'); echo " - "; bloginfo('name'); } 
elseif (is_category()) { echo  single_cat_title(); }
elseif (is_date())       { _e('Archives', ''); echo " of "; bloginfo('name'); }
elseif (is_search())    { _e('Search results', ''); } 
else the_title(); 
?>
</title>

The following cases are considered:

The meta description is not taken into account natively by Wordpress. It depends on each post. We need an extension as All in seo to generate it.

The metas

They concern the type of document, style sheets, the names of RSS files. This information is provided through the administering panel (by the choice of theme and the options), and as seen in the source of header.php, it is integrated with PHP function calls.

Example:

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

The top

<body  class="hfeed">

<div id="header">
<div id="logo"  onclick="location.href='<?php echo get_settings('home'); ?>/';"></div>
<div id="navbar"> 
   <span id="navcat">
    <?php wp_list_categories('title_li=&sort_column=name&hierarchical=1') ?>
    </span>
    <span id="navpage"><a href="about">About</a></span>
</div>

The body tag is opened in the file header.php and closed in the footer.php file.

The header in the demonstration consists of a logo and a navigation bar.
It does not contain the title of the site in an H1 tag as seen often in themes, which is an aberration in terms of SEO (this come from the default Wordpress theme wich serves as a model to all other one).

Categories in the navigation bar

We chose to place the list of categories in the navigation bar and it is appropriate as long as they are not too many.

This is easily done with the function wp_list_categories and CSS rules. Actually the function displays categories in a vertical list with bullets. But the CSS description of navcat transforms it in a simple horizontal list.
The parameter title_li= without value removes the header of the category block.

On the right you can place a link on the static "About" or "The site" page which describes the purpose of the site and the terms and conditions of use.

Banner

Most of the graphics in the Cryonie theme is in the header of the pages. It has the following structure:

<div id="header"> 
      <div id="logoback"> </ div> 
      <div id="logo"> </ div> 
      <div id="navbar"> 
          <span id="navcat"> </ span> 
          <span id="navpage"> </ span> 
      </ div> 
 </ div>

The header tag includes the header of the entire site. It is given it in the background a gradient of gray. This one has the height of the header minus the height of the navigation bar, that has its own background.

Logoback and logo tags are superimposed by the stylesheet.

The logoback tag contains the background image of the logo, with a fading effect of opaque to transparent, made with The Gimp, and so it gradually merges with the background of the header.

The logo is superimposed over the background image through the z-index attribute at level 3, which is above that of the background image that is level 2 (and the background of the header level 1).

The navigation bar also uses a gradient of gray and white that is achieved very easily with the Gradient tool of The Gimp.

The disadvantage of this choice is that the graphic images of logo and its background should be in the format of GIF or PNG to have transparency, and have a larger size than JPG files.

You can obviously change the theme to use a different graphic choice.

See also: Image merged with the background using The Gimp.

Documentation: List of components of a page, provided by Wordpress and how to assign them in the interface.