This is the penultimate post in this series and we are going to tackle the five box banner, we will add some new functions, change some of the options we have already used, create an image array and post array so we can offer the administrator dropdown lists.

We will add some default images into a folder, use the Artisteer get option function to call the images by name and add default values to our new Theme Options to prompt the administrator to populate the values.

The Ribbon Banner

We will be creating a banner similar to the banner in the html theme, we will refer to this as the Ribbon Banner, before we start to add the code lets look at the ribbon banner we want to create.

In the image we can see we have four elements, a title, image, text and a link button, these are not from the WordPress page or post so we will create the links to call a page or post.

Using Images

Most images that we find online are subject to a licence, because we have a licensed copy of Artisteer that does not mean we can redistribute the images inside a download.

We are going to source the images for the sample theme from My Site My Way using the grunge brushed metal pewter icon sets, these we are allowed to add in our download.

Download the files for Investica Part Eight: Investica Part Eight (262)

Inside the zip there is a folder called images and a subfolder called ribbon (/images/ribbon/) we have select a few images from the icon sets, all we have done is resized them to 128 * 128 and saved them with a meaningful name, we created a default ‘prompt’ image called blank.php.

functions.php

We will be adding new functions to the /library/inv-functions.php that are used on the theme options page, In part one we added two lines to the functions.php and we need to move one of the lines to the top of the file, open functions.php and cut the line:

if (file_exists(TEMPLATEPATH .'/library/inv-functions.php')) include(TEMPLATEPATH .'/library/inv-functions.php');

Paste this at line 16 and add a comment:

/* Add our function file this keeps our changes apart from the core theme code */
if (file_exists(TEMPLATEPATH .'/library/inv-functions.php')) include(TEMPLATEPATH .'/library/inv-functions.php');

inv-functions.php

We are adding three functions to the file /library/inv-functions.php the first will get the list of image names for our images lookup, we pass in the folder name where our ribbon images are and the function returns an array of names.

// Get the ribbon Image Array
function inv_list_images($path){
$list = array();
//Start with the prompt image
$list['blank.png']='blank.png';
$dir_handle = @opendir($path) or die("Unable to open $path");
while($file = readdir($dir_handle)){
if($file == "." || $file == ".."){continue;}
$filename = explode(".",$file);
$cnt = count($filename); $cnt--; $ext = $filename[$cnt];
if(strtolower($ext) == ('png' || 'jpg')){
if (!strpos($file, 'blank') > 0) {
$list[$file]=$file;
}
}
}
return $list;
}

In our second function an array of Page and Post Titles are returned, these are referenced and stored as the post id but the administrator will see the titles and will not need to know the post id, notice in line four we add a hash # this is the default if no page or post has been selected.

//Get an Array of Posts
function inv_list_posts(){
$list = Array();
$list[0]='#';
$args = array( 'order'=> 'ASC', 'orderby' => 'title' );
//Add the Pages to the Array
$list_posts = get_pages( $args );
foreach( $list_posts as $post ) {
$list[$post->ID]=$post->post_title;
}
//Add the Posts to the Array
$list_posts = get_posts( $args);
foreach( $list_posts as $post ) {
$list[$post->ID]=$post->post_title;
}
return $list;
}

In our third function we want a permalink returned based on the passed in post id, if the post id is not set (zero) then the hash is returned instead of a permalink.

//Get the permalink by ID return hash is not set
function inv_post_link( $postid ) {
if( !$postid ) return "#";
return get_permalink( $postid );
}

options.php

In the /library/options.php we are calling the new functions, changing the main banner options and adding options for the Ribbon Banner, first we add a call to the functions and populate two list arrays, we place this code at line 32.

//Add an array for our Image and post Lists

$ribbon_images = inv_list_images( TEMPLATEPATH. '/images/ribbon/');
$post_list = inv_list_posts();

The section we wrote in part seven we update or replace the block with this block of code which allows a page or post to be selected.

/* Start add a section for the Home Page */
array(
'name'    =>    __('Home Banner', THEME_NS),
'type'    =>    'heading'
),
array(
'id'    =>    'theme_home_banner_caption',
'name'    =>    __('Main banner caption', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_home_banner_caption2',
'name'    =>    __('Main banner caption two', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_home_banner_URL',
'name'    => __('Select a page or post', THEME_NS),
'type'    =>    'select',
'options'    =>    $post_list
),

After this we add a new section for our Ribbon Banner this consists of a title and five sections, in this sample we are only showing the first, look at the file in the download for the other four sections, notice that we are calling both the $post_list and $ribbon_images arrays and Box 1 id values are post fixed with _1 .

/* Ribbon Banner Settings */
array(
'name'    =>    __('Home Ribbon Banner', THEME_NS),
'type'    =>    'heading'
),
/* Ribbon Box 1 Settings */
array(
'id'    =>    'theme_ribbon_caption_1',
'name'    =>    __('Ribbon caption one', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_ribbon_text_1',
'name'    =>    __('Ribbon short text one', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_ribbon_url_1',
'name'    =>    __('Ribbon one page or post', THEME_NS),
'type'    =>    'select',
'options'    =>    $post_list
),
array(
'id'    =>    'theme_ribbon_image_1',
'name'    =>    __('Ribbon Image One', THEME_NS),
'type'    =>    'select',
'options'    =>    $ribbon_images
),

defaults.php

When the Theme Options are reset or the theme is first activated we want to populate the theme options with values to prompt the administrator to change the settings, to do this we add defaults in the file /library/defaults.php, we insert these at line 4 of the file, notice the URL values are set to 0.

/* Start add a section for the Home Page */
'theme_home_banner_caption' => 'Enter Caption',
'theme_home_banner_caption2' => 'Enter Caption 2',
'theme_home_banner_URL' => 0,
'theme_ribbon_caption_1' => 'Caption 1',
'theme_ribbon_text_1' => 'Enter Text 1 from Admin > Appearance > Theme Options',
'theme_ribbon_url_1' => 0,
'theme_ribbon_image_1' => 'blank.png',
'theme_ribbon_caption_2' => 'Caption 2',
'theme_ribbon_text_2' => 'Enter Text 2 from Admin > Appearance > Theme Options',
'theme_ribbon_url_2' => 0,
'theme_ribbon_image_2' => 'blank.png',
'theme_ribbon_caption_3' => 'Caption 3',
'theme_ribbon_text_3' => 'Enter Text 3 from Admin > Appearance > Theme Options',
'theme_ribbon_url_3' => 0,
'theme_ribbon_image_3' => 'blank.png',
'theme_ribbon_caption_4' => 'Caption 4',
'theme_ribbon_text_4' => 'Enter Text 4 from Admin > Appearance > Theme Options',
'theme_ribbon_url_4' => 0,
'theme_ribbon_image_4' => 'blank.png',
'theme_ribbon_caption_5' => 'Caption 5',
'theme_ribbon_text_5' => 'Enter Text 5 from Admin > Appearance > Theme Options',
'theme_ribbon_url_5' => 0,
'theme_ribbon_image_5' => 'blank.png',
/* Ends the section for the Home Page */

inv-style.css

Our Ribbon Banner, has several elements that will need to be styled, the background color, text colors, text styles and borders, in the html template Artisteer have use uppercase for the captions, we feel that lowercase italic is preferred, this is a matter of personal choice and easy to change.

We open the /library/inv-style.css file and add in the styles for our ribbon, we can adjust these later if required, we have a container, article, header and text styles, we have used blocks so we can set the fixed heights.

/* Ribbon Banner on home Page */
#home-ribbon {
display: block;
background-color: #f0f0f0;
position: relative;
border: solid 1px #BFBFBF;
border-bottom: none;
margin: 0 auto;
height: 215px;
width: 898px;
}
.ribbon-article {
float: left;
display: block;
background: inherit;
position: relative;
border-right: solid 1px #BFBFBF;
margin: 0 auto;
padding: 5px;
height: 215px;
width: 168px;
}
h4.ribbon-heading {
font-family: "Lucida Sans Unicode",Verdana;
color: #636363;
font-size: 16px;
padding-bottom: 5px;
font-weight: normal;
font-style: italic;
text-align: center;
width:100%;
}
.ribbon-text {
display: block;
overflow:hidden;
font-family: "Lucida Sans Unicode",Verdana;
color: #636363;
font-size: 10px;
font-weight: normal;
font-style: italic;
text-align: center;
height: 40px;
}

header-ribbon.php

In the themes main folder we create a new file called header-ribbon.php we suggest that we copy the file from the download as there are five repeating sections, we will only look at the first block now, where we can see the is_home() condition the first theme element is the container “home-ribbon”, then the article with the header, image, text and button, notice the image class which is one of the Artisteer styles.

We can see our theme options being called like the caption which is echoed as theme_get_option(‘theme_ribbon_caption_1′) and notice the _(‘More’, THEME_NS) this is for language localisation.

<?php if( is_home()): ?>
<div id="home-ribbon">
<div class="ribbon-article">
<h4 class="ribbon-heading"><?php echo theme_get_option('theme_ribbon_caption_1'); ?></h4>
<img class="aligncenter" width="102" height="102" alt="" src="<?php echo get_template_directory_uri(); ?>/images/ribbon/<?php echo theme_get_option('theme_ribbon_image_1'); ?>" />
<span class="ribbon-text"><?php echo theme_get_option('theme_ribbon_text_1'); ?></span>
<div style="text-align: center;">
<span class="art-button-wrapper" style="margin:5px auto;">
<span class="art-button-l"></span>
<span class="art-button-r"></span>
<a href="<?php echo inv_post_link( theme_get_option('theme_ribbon_url_1') ); ?>" class="art-button"><?php echo __('More', THEME_NS) ; ?></a>
</span>
</div>
</div>

header-banner.php

A small change is required to the header-banner.php file this is so a page or post can be selected from theme options and one of the conditions removed to always show the banner on the home page.

<?php if( is_home() ): ?>
<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 inv_post_link( theme_get_option('theme_home_banner_URL') )?>" class="art-button"><?php echo __('Learn More', THEME_NS) ; ?></a></span>
</p>
</div>
</div>
<?php endif; ?>

header.php

The last change is to the header.php file where we call the Ribbon Banner this slots below the main banner template part, so with the other parts we now have this block.

<?php /*Add our main banner here */ ?>
<?php get_template_part('header','banner') ?>
<?php /*Add our home ribbon here */ ?>
<?php get_template_part('header','ribbon') ?>
<?php /*Add our subtitle here */ ?>
<?php get_template_part('header','subtitle') ?>

Setting the Options

If we visit our website now we will see the ribbon and the default image and text, this is to prompt the website admin to update the Theme Options page.

The Admin > Appearance > Theme Options page now has the changes and we can setup some test pages and assign these to the Home Banner and Ribbon Banner here we can see the dropdown list boxes and the defaults.

See it live at http://investica.digitalraindrops.net

Part nine will be the wrap-up part, we will set a category for the posts on the home page, hide some of the theme options that we do not want the administrator to change, create a template page for one category, look at a custom background option, and remove any widgetized areas we do not want to spoil our theme.