Theme for Wordpress: Header

Create a site header file (header.php).

Page Title

Since the header is shared by a home page, page, category, or other page type, the header must be bound to a type that is executed by a list of conditions in PHP.

<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:

Error Page: Displays an error message.
Home: Description, not site in admin panel
Category List: Category Name
Archive by date: Displays the word "Archive" followed by the site name.
Internal search result: Displays search results.
Part Page-Displays the part name.

The meta-description is not initially considered by Wordpress. It depends on each article. To create it, an extension of the All in seo type is required.

Metas

They relate to document type, style sheets, RSS file names. The corresponding information is provided by the administrative panel (by choosing a topic and in the options), and, as you can see from the header.php source, it is built in with PHP instructions.

Example:

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

Top of Page

<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 opens in the header.php file and closes in the footer.php file.

The title in our demo consists of a logo and a navigation bar.
It does not contain the name of the site in the H1 tag, as is often seen in themes, which is a deviation in terms of links (the shortcomings of the former themes are repeated in all others, which simply reuse and modify them).

Categories in the navigation bar

We've chosen to list categories in the navigation bar, which is fine until there are too many.

This is easily done using the wp_list_categories function and CSS rules. The function displays them as a vertical list with markers. But the CSS handle id navcat turns it into a simple horizontal list.
The title_li= option with no value overrides the category header.

On the right, there is a link to a static O or Site page that describes the purpose of the site and the terms of use.

Banner

The main thing in the graphics in the Cryonie theme is in the page header. 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 entire site header. At the bottom, it is given a shade of gray. It has a header height minus the height of the navigation bar, which has its own background.

Logobak and logo labels are superimposed on the style sheet.

The logobak tag contains a background image of the logo, thanks to the melting effect from opacity to transparent, made with The Gimp, it gradually melts with the bottom of the title.

The logo is superimposed on the background image using the third level z-index attribute, so it is larger than the level 2 background (and level 1 header background).

The navigation bar also uses a gray-on-white gradient, which is very easy to implement with the gradient tool in The Gimp.

The disadvantage of this graphical choice is that logo and background images must be in GIF or PNG format to have transparency and are larger than JPG files.

Obviously, you can change the theme to use a different graphical choice.

Useful documentation

The page components specified by WordPress and how they are assigned in the interface.