Artisteer Image Menu

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.

View My Portfolio

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.

screenshot

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: Pet Stories Theme (1056)

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/.

pet-stories-2

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

lesson-8-1

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.

pet-stories-3

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

pet-stories-4

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.

pet-stories-5

View My Portfolio

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

4 thoughts on “Artisteer Image Menu

  1. I’m a complete novice, trying to follow these instructions…they are a bit confusing for me…can you help? Under the instructions for “options.php”…you talk about the pet_ prefix….is this something I should change to the prefix of my own theme then? And if so…how do I decide what prefix to use?
    Also, you say that you add them at lines 32 to 71…when I insert them at line 32 it only goes to 69 for me…I am guessing something has changed at some point that made the difference and the specific line numbers just weren’t edited?

  2. I’ve been here three seconds and I see I’m gonna LOVE IT here.. I was on my way to trying to figure out how to do this by adapting part 8 of the Investica tutorial when I stumbled on this tutorial accidentally.. This site rocks!!!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More