On the Artisteer WordPress Forum the question was asked about an all image menu, there is no option in Artisteer to do this as a setting, we have a similar post on doing this in a WordPress “Twenty Ten” child theme.

How would we then transfer that knowledge to Artisteer, having just completed a series of posts for the Investica Theme, where we added a ribbon banner in part eight we will use this code as a starting point.

The Theme

We wanted to use the latest Artisteer Version 3 RC1 for our theme, and we thought we would have a bit of fun as well, so we downloaded the Sample Pet Stories artx file, opened this in the latest version converted it to WordPress and exported the theme.

Images

In the download we have replaced any copyrighted images, these include our menu images and the dog image in the header as we are not allowed to re-distribute these under the Artisteer terms of use.

Download: [download id="64"]

Like Artisteer for our tutorials we only use licensed images, these we purchase from IstockPhoto, it is just not worth using illegal images when for $10-$20 gets us a few images to make a post more fun.

Note: The IstockPhoto banners used in this post are referral links and any revenue generated from these links will be converted back into images for future tutorials.

We found the width of the header image was 782px so allowing for padding we created four menu images and one blank.png (default image) each of the images we used is 190 * 220, four images at 190px wide is 760px, so we can have a 10px left margin or padding.

It is important to plan the menu allowing for padding and work out where the title will go, in our images we have a place in the image for a small title, it is important that the menu images are placed in a folder called /images/menu/.

In the Investica series post eight we created a banner with five boxes, we are going to use some of the code, adding and changing as we go along, we also added functions these we will add in our theme but not in the functions.php

options.php

We have added to /library/options.php the functions at lines 32 to 71 these functions mean we do not have to hard code for our images and post or page links, if you have followed any other tutorials notice we have made these functions for the theme by the pet_ prefix.

// Get the ribbon Image Array
function pet_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;
}
//Get an Array of Posts
function pet_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;
}
//Add arrays for our Image and post Lists
$ribbon_images = pet_list_images( TEMPLATEPATH. '/images/menu/');
$post_list = pet_list_posts();

Now we add the new options for our image menu a lot of these are from the Investica code at line 91 we added the code below, download the theme and study, copy and use the code to save mistakes, adding a sections as required.

/* Ribbon Menu Settings */
array(
'name'    =>    __('Image Menu', THEME_NS),
'type'    =>    'heading'
),
/* Show Main Menu Default True */
array(
'id'    =>    'theme_menu_show',
'name'    =>    __('Show Main Menu', THEME_NS),
'desc'    =>    __('Yes', THEME_NS),
'type'    =>    'checkbox'
),
/* Show Main Menu Default True */
array(
'id'    =>    'theme_home_only',
'name'    =>    __('Show Image Menu only on Home Page', THEME_NS),
'desc'    =>    __('Yes', THEME_NS),
'type'    =>    'checkbox'
),
/* Ribbon Box 1 Settings */
array(
'id'    =>    'theme_ribbon_caption_1',
'name'    =>    __('Ribbon caption 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
),
/* Ribbon Box 2 Settings */
array(
'id'    =>    'theme_ribbon_caption_2',
'name'    =>    __('Ribbon caption two', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_ribbon_url_2',
'name'    =>    __('Ribbon two page or post', THEME_NS),
'type'    =>    'select',
'options'    =>    $post_list
),
array(
'id'    =>    'theme_ribbon_image_2',
'name'    =>    __('Ribbon Image Two', THEME_NS),
'type'    =>    'select',
'options'    =>    $ribbon_images
),
/* Ribbon Box 3 Settings */
array(
'id'    =>    'theme_ribbon_caption_3',
'name'    =>    __('Ribbon caption three', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_ribbon_url_3',
'name'    =>    __('Ribbon three page or post', THEME_NS),
'type'    =>    'select',
'options'    =>    $post_list
),
array(
'id'    =>    'theme_ribbon_image_3',
'name'    =>    __('Ribbon Image Three', THEME_NS),
'type'    =>    'select',
'options'    =>    $ribbon_images
),
/* Ribbon Box 4 Settings */
array(
'id'    =>    'theme_ribbon_caption_4',
'name'    =>    __('Ribbon caption four', THEME_NS),
'type'    =>    'text'
),
array(
'id'    =>    'theme_ribbon_url_4',
'name'    =>    __('Ribbon four page or post link', THEME_NS),
'type'    =>    'select',
'options'    =>    $post_list
),
array(
'id'    =>    'theme_ribbon_image_4',
'name'    =>    __('Ribbon Image Four', THEME_NS),
'type'    =>    'select',
'options'    =>    $ribbon_images
),
/* End of Image Menu */

defaults.php

In /library/defaults.php at line 4 we add the following default options, adding a sections as required and changing defaults.

/* Start add a section for the Image Menu */
'theme_menu_show' => 1,
'theme_home_only' => 0,
'theme_ribbon_caption_1' => 'Meeow!',
'theme_ribbon_url_1' => 0,
'theme_ribbon_image_1' => 'blank.png',
'theme_ribbon_caption_2' => 'Meeow!',
'theme_ribbon_url_2' => 0,
'theme_ribbon_image_2' => 'blank.png',
'theme_ribbon_caption_3' => 'Meeow!',
'theme_ribbon_url_3' => 0,
'theme_ribbon_image_3' => 'blank.png',
'theme_ribbon_caption_4' => 'Meeow!',
'theme_ribbon_url_4' => 0,
'theme_ribbon_image_4' => 'blank.png',
/* Ends the section for the Image Menu */

style.css

We add styles to the styles.css for our image menu, we will need to change the widths etc: for different themes but the structure is there, we just add these at the end of the file, so we can find and adjust them if needed.

/* Menu Ribbon */
#menu-ribbon {
 display: block;
 background-color: transparent;
 position: relative;
 border: none;
 margin: 0 auto;
 padding-top: 10px;
 padding-left: 10px;
 height: auto;
 width: 788px;
}
.ribbon-item {
 float: left;
 display: block;
 background: inherit;
 position: relative;
 overflow: hidden;
 margin: 0;
 height: 210px;
 width: 190px;
}
h4.ribbon-heading {
 font-family: "Lucida Sans Unicode",Verdana;
 color: #B25000;
 font-size: 14px;
 margin-top: 55px;
 font-weight: bold;
 text-transform: uppercase;
 text-align: center;
 width:100%;
}

menu-images.php

We create a new file in the themes folder for our template part menu, this we have called menu-images.php this file contains the html layout and returns the options from the options page, we can choose to only show this menu on the home page if we are keeping the main menu.

<?php
if( theme_get_option('theme_home_only') ) {
  if (!is_home() || !is_front_page() ) return;
}
//Get the permalink by ID return hash is not set
function pet_post_link( $postid ) {
  if( !$postid ) return "#";
  return get_permalink( $postid );
}
?>
<div id="menu-ribbon">
  <?php $link =  pet_post_link( theme_get_option('theme_ribbon_url_1') ); ?>
  <?php $style = 'background-image: url(' .get_template_directory_uri() .'/images/menu/' .theme_get_option('theme_ribbon_image_1') .'); cursor: pointer;'; ?>
  <div class="ribbon-item" style="<?php echo $style; ?>" onclick="location.href='<?php echo $link; ?>'">
   <h4 class="ribbon-heading"><?php echo theme_get_option('theme_ribbon_caption_1'); ?></h4>
  </div>
  <?php $link =  pet_post_link( theme_get_option('theme_ribbon_url_2') ); ?>
  <?php $style = 'background-image: url(' .get_template_directory_uri() .'/images/menu/' .theme_get_option('theme_ribbon_image_2') .'); cursor: pointer;'; ?>
  <div class="ribbon-item" style="<?php echo $style; ?>" onclick="location.href='<?php echo $link; ?>'">
   <h4 class="ribbon-heading"><?php echo theme_get_option('theme_ribbon_caption_2'); ?></h4>
  </div>
  <?php $link =  pet_post_link( theme_get_option('theme_ribbon_url_3') ); ?>
  <?php $style = 'background-image: url(' .get_template_directory_uri() .'/images/menu/' .theme_get_option('theme_ribbon_image_3') .'); cursor: pointer;'; ?>
  <div class="ribbon-item" style="<?php echo $style; ?>" onclick="location.href='<?php echo $link; ?>'">
   <h4 class="ribbon-heading"><?php echo theme_get_option('theme_ribbon_caption_3'); ?></h4>
  </div>
  <?php $link =  pet_post_link( theme_get_option('theme_ribbon_url_4') ); ?>
  <?php $style = 'background-image: url(' .get_template_directory_uri() .'/images/menu/' .theme_get_option('theme_ribbon_image_4') .'); cursor: pointer;'; ?>
  <div class="ribbon-item" style="<?php echo $style; ?>" onclick="location.href='<?php echo $link; ?>'">
   <h4 class="ribbon-heading"><?php echo theme_get_option('theme_ribbon_caption_4'); ?></h4>
  </div>
</div>

header.php

The last part here is to add our menu to the header.php file, the fist part is to make the main menu conditional, the next is to call the new template part.

Open the header.php in the download to see where the code is inserted as this may differ slightly from header to header in the first part we add the first and last line.

<?php if( theme_get_option('theme_menu_show') ) : ?>
  <div class="cleared reset-box"></div><div class="art-nav">
   <div class="art-nav-l"></div>
   <div class="art-nav-r"></div>
   <div class="art-nav-outer">
   <?php
   echo theme_get_menu(array(
    'source' => theme_get_option('theme_menu_source'),
    'depth' => theme_get_option('theme_menu_depth'),
    'menu' => 'primary-menu',
    'class' => 'art-hmenu'
   )
  );
 ?>
 </div>
</div>
<?php endif; ?>

In this part we add the last two lines

<div class="cleared reset-box"></div>
<?php /*Add our Menu Images here */ ?>
<?php get_template_part('menu','images') ?>

Making it Work

Lets look at what we have now if we preview our theme, notice the default theme and the default titles.

In our WordPress admin area we navigate to Admin > Appearance > Theme Options and here we can assign our images titles and posts.

Here we can see our defaults to show the main menu and show images only on the first page, these would be set by preference, in our screenshot we have hidden the main menu on all pages.