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.

Documentation

Components and examples.