If we look at the Artisteer html template we can see that there are two banner sections, the first is a wide section with a title and a learn more button, the second is a ribbon section containing five images and links.

In this part we will deal with the first of these, the wide banner we will refer to this as the banner or main banner, on the sample website we think that to much of the websites real estate is lost with a 350px high banner, so we are going to use a new image that is 200px high.

Browser Size

Google Labs have a webpage called Browser Size here we can enter our websites URL and get a rough idea of what can be seen by what percentage of browsers recorded by Google.

Download the files for Investica Part Seven: [download id="61"]

We entered the Artisteer HTML website and we can see that only 30% of visitor could see the more buttons on the second header section.

The Main Banner

We have created a new image that is included in the download file for our example, we used a program called xHeader there is a free version available from their website, we used one of their samples and adjusted it in both xHeader and Photoshop.

For the main banner we need the background image, over this we will be adding two <h4> text strings and a ‘Learn More’ button, we could have used a slideshow plugin but we feel that for a business site a rotating header is not appropriate.

By reducing the height we should be able to have the same visual impact and show more of the website in all browsers, the first thing is to add a new section called ‘Home Page’ to the Theme Options, we open the file in the /library/ folder called options.php we want our new section to be the first section so we add our options after the line $theme_options = array (

options.php

We add a heading and three text boxes, two of the text boxes are the titles the third is the page or post we want to load when a visitor presses the ‘Learn More’ button.

$theme_options = array (
/* Start add a section for the Home Page */
array(
'name'    =>    __('Home Page', THEME_NS),
'type'    =>    'heading'
),
array(
'id'    =>    'theme_home_banner_caption',
'name'    =>    __('Home main banner caption', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_home_banner_caption2',
'name'    =>    __('Home main banner caption two', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_home_banner_URL',
'name'    =>    __('Home main banner full URL Link starting http:// ', THEME_NS),
'type'    =>    'text'
),
/* Ends the section for the Home Page */

header-banner.php

In our main theme folder we create a new ‘template part’ file called header-banner.php we will add conditional code to see if we are on the home page and if the main banner has a URL link entered.

We can also see that the captions are returned by the Artisteer theme_get_option function and the URL is echoed in the button with a <a href statement.

<?php if( is_home() && theme_get_option('theme_home_banner_URL') ): ?>
<div id="home-banner">
<div style="padding: 45px 20px;">
<h5><?php echo theme_get_option('theme_home_banner_caption'); ?></h5>
<h5><?php echo theme_get_option('theme_home_banner_caption2'); ?></h5>
<p>
<span class="art-button-wrapper" style="margin-top: 10px;"><span class="art-button-l"></span>
<span class="art-button-r"> </span>
<a href="<?php echo theme_get_option('theme_home_banner_URL')?>" class="art-button"><?php echo __('Learn More', THEME_NS) ; ?></a></span>
</p>
</div>
</div>
<?php endif; ?>

inv-style.css

In the /library/ folder we find and open our custom stylesheet and add a style block for our banner, this is a copy of the subtitle style with a few small changes

/* Main Banner on home Page */
#home-banner {
display: block;
background: url("../images/banner_bg.png") no-repeat scroll left top transparent;
position: relative;
border: solid 1px #BFBFBF;
border-bottom: none;
margin: 0 auto;
color: #888888;
height: 200px;
width: 898px;
}

header.php

The last file we edit is the header.php we added the subtitles in an earlier post, now we add the header banner code, we find our call to the header subtitles and add our new template part.

We find these lines:

<div class="cleared reset-box"></div>
<?php /*Add our subtitle here */ ?>
<?php get_template_part('header','subtitle') ?>
<div class="art-sheet">

Adding a call to our new file lines two and three below:

<div class="cleared reset-box"></div>
<?php /*Add our main banner here */ ?>
<?php get_template_part('header','banner') ?>
<?php /*Add our subtitle here */ ?>
<?php get_template_part('header','subtitle') ?>
<div class="art-sheet">

Activating the Banner

To activate the banner navigate to WordPress Admin > Appearance > Theme Options and enter the captions and a link to a page or post.

Custom Menu

As we can see we have the banner and we also have a new page we created in the main menu, we can deal with this by creating a custom menu.

We created a menu called main and added two pages, we also created a Custom Link called ‘Home‘ with the home page url link to the home page, we saved this and added the menu as Primary Navigation in the Theme Locations and saved these options.

Visit the test website to see the menu changes in the next part we will be looking at the banner ribbon which will have five link option panels.