The fourth in this series of tutorials is adding a header panel to the theme, we created our header panel with two different areas for a logo and content information.

If we follow the steps in this tutorial we will be able to add a header panel section to our WordPress theme, have looked at the clickable logo, and an information panel with four lines.

We will need to do the following steps, create the template parts, styles and add the supporting files to our theme, install the logo image, and populate the website information from the options page we created in the last tutorial.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two, this code does require the sample theme, you must work through the last tutorial on the options page as we will be calling the theme options to populate the header section.

In the download for this tutorial is the ‘logo.png’ image, you can create your own image or use the sample logo, before we can use this in our theme we should copy the logo image to the child themes ‘images’ folder.

In the download for this tutorial are all the files, in the changes folder are the parts of code we will be adding to existing files, in the final folder are the files after the changes so we can compare our code and two new ‘template part’ files that we will be creating.

Download Support Files: Tutorial 2 Header Section (939)

Stylesheet

In the changes folder find the file called lesson-4-style.css, this is the code below and should be added to our child themes style.css file.

/* Lesson 4 style starts here */
/* Container for the section */
#info-container
{
 float: left;
 height: auto;
 width: 100%;
 margin: 5px 0;
 overflow: hidden;
}

/* Start Header Logo */
#header-logo
{
 float: left;
 height: 100px;
 width: 350px;
 overflow: hidden;
 color: transparent;
}
/* End Header Logo */

/* Start Information Block */
#info-block
{
 color: #999;
 float: right;
 font-size: 12px;
 margin-top: 10px;
 overflow: hidden;
 width: 200px;
 height: auto;
}

.info-item
{
 float: left;
 width: 100%;
}

.info-title
{
 font-weight: bold;
 float: left;
}

.info-text
{
 float: right;
}

.info-text a:link,
.info-text a:visited,
.info-text a:active
{
 color: #999;
 text-decoration: none;
}

.info-text a:hover {
 text-decoration: underline;
}
/* End Information Block */
/* Lesson 4 style ends here */

The first ‘section’ is the info-container, this will wrap our logo and information sections, margin: 5px 0; this will add a bit of space top and bottom.

Next is our header-logo 100px * 350px this can be adjusted to suit a different logo, we are not assigning the logo path here we will do that in the template part.

The information-block is set at 200px wide and can be adjusted, this is floated to the right, inside this block will be four information-items that have a title and a text element, this will give us a nice information block, the text will underline for an email or website address when hovered.

Logo Template Part

In the child themes folder we create a new file called header-logo.php and add this code and save the file.

<div id="header-logo" onclick="location.href='<?php bloginfo('url'); ?>'" style="cursor: pointer;" >
  <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />
</div>

Here the code is adding a style element “header-logo” notice the onclick calling the websites home url, “img src” is calling our logo fronm the images folder.

Information Template Part

In the child themes folder we create a new file called header-info.php and add this code and save the file, we have included the file in the final folder if we are not comfortable in copying and pasting large code blocks.

<?php $shortname = "drcms"; ?>
<div id="info-block">
 <?php if( get_option($shortname."_info_title_1") && get_option($shortname."_info_text_1") ): ?>
  <div class="info-item">
   <div  class="info-title">
    <?php echo get_option($shortname."_info_title_1"); ?>
   </div>
   <div class="info-text">
    <?php
    $info = get_option($shortname."_info_text_1");
    $infoText = $info;
    $infoName = stripslashes(get_option($shortname."_info_nicename_1"));
    if ($infoName){
     $pos = strpos($info, "ttp:");
     if ($pos) $infoText = '<a href="'.$info.'">'.$infoName.'</a>';
      $pos = strpos($info, "@");
    if ($pos) $infoText = '<a href="mailto:'.$info.'">'.$infoName.'</a>';
    }
    echo $infoText;
    ?>
   </div>
  </div>
 <?php endif; ?>
 <?php if( get_option($shortname."_info_title_2") && get_option($shortname."_info_text_2") ): ?>
  <div class="info-item">
   <div class="info-title">
    <?php echo get_option($shortname."_info_title_2"); ?>
   </div>
   <div class="info-text">
    <?php
    $info = stripslashes(get_option($shortname."_info_text_2"));
    $infoText = $info;
    $infoName = get_option($shortname."_info_nicename_2");
    if ($infoName){
     $pos = strpos($info, "ttp:");
     if ($pos) $infoText = '<a href="'.$info.'">'.$infoName.'</a>';
      $pos = strpos($info, "@");
     if ($pos) $infoText = '<a href="mailto:'.$info.'">'.$infoName.'</a>';
    }
    echo $infoText;
    ?>
   </div>
  </div>
 <?php endif; ?>
 <?php if( get_option($shortname."_info_title_3") && get_option($shortname."_info_text_3") ): ?>
  <div class="info-item">
   <div class="info-title">
    <?php echo get_option($shortname."_info_title_3"); ?>
   </div>
   <div class="info-text">
    <?php
    $info = get_option($shortname."_info_text_3");
    $infoText = $info;
    $infoName = get_option($shortname."_info_nicename_3");
    if ($infoName){
     $pos = strpos($info, "ttp:");
     if ($pos) $infoText = '<a href="'.$info.'">'.$infoName.'</a>';
      $pos = strpos($info, "@");
    if ($pos) $infoText = '<a href="mailto:'.$info.'">'.$infoName.'</a>';
    }
    echo $infoText;
    ?>
   </div>
  </div>
 <?php endif; ?>
 <?php if( get_option($shortname."_info_title_4") && get_option($shortname."_info_text_4") ): ?>
  <div class="info-item">
   <div class="info-title">
    <?php echo get_option($shortname."_info_title_4"); ?>
   </div>
   <div class="info-text">
    <?php
    $info = get_option($shortname."_info_text_4");
    $infoText = $info;
    $infoName = get_option($shortname."_info_nicename_4");
    if ($infoName){
     $pos = strpos($info, "ttp:");
     if ($pos) $infoText = '<a href="'.$info.'">'.$infoName.'</a>';
      $pos = strpos($info, "@");
    if ($pos) $infoText = '<a href="mailto:'.$info.'">'.$infoName.'</a>';
    }
    echo $infoText;
    ?>
   </div>
  </div>
 <?php endif; ?>
</div>

This may look quite scary but it is the same code four times once for each information line, the four lines are wrapped inside the element “info-block”.

Each info-item is inside its own element, the code is quite simple, it looks to see if both the title and text has a value if they do then output the values, notice the calls to the options, get_option($shortname.”_info_title_1″) this call returns the value we set in the options page.

We need to see if the text is a link this is done by $pos = strpos($info, “ttp:”); and $pos = strpos($info, “@”); This looks to find the sub string, notice we left the ‘h’ from http that is because the h is at position 0 (zero) and would return a false, the “_info_nicename_1″ is what is displayed rather than the url or email address.

Header.php

In the changes folder find the file called lesson-4-header.php, this is the code below and should be added to our child themes header.php file.

   <?php /* Add our Logo and Information Bar */ ?>
   <div id="info-container">
    <?php get_template_part( 'header', 'logo' ); ?>
    <?php get_template_part( 'header', 'info' ); ?>
   </div>

These calls are to the new files we created, and are placed in the header file just below the call to our searchbar (line 65), compare your file to the header.php in the download final folder.

Updating the Options Page

To populate the information block visit the options page in the WordPress Admin area left hand column.

We have included the files in the final folder so we can check the placement of the code, now when we visit our local website we will see our header information.

In our next tutorial we will be adding the social icon bars to our theme.