Look at this image, we have the Home menu item and then three Categories and on the right we have a Page menu, pretty cool menu and not hard to achieve, you will need Artisteer 2.4 to complete this tutorial.

All we have done here was to copy the art-menu() function from the functions.php file and paste this in the demo-functions.php, then we added two parameter which we will use to great effect later, and changed some of the code.

The first parameter we pass in is the menu type ‘pages’ or ‘’ for categories, the second is the position of the ‘Home’ menu item ‘left’, ‘right’ or ‘’, in the screenshot above we have added the home menu item before categories as we always expect this menu item to be the first.

This is the categories function <?php demo_menu_items(”,’left’); ?> ,the first parameter blank for categories the second to place the home button left of the categories, the pages <?php demo_menu_items(‘pages’,”); ?> ,that is quite simple to use really.

As you can see we have also split the two menus, one left and one right, you can place either menu where you like, all on one line, left and right, and pages and categories in their own space,the menu function comes in a file that you can download the demo-functions.php

Horizontal functions download the file here Navigation Functions (834) however the bonus file is downloadable at the end of this tutorial and includes both Horizontal and Vertical Menu functions.

You do not need to copy and paste the code, but for those that want to integrate this  into their own code here it is.

/* Start CMS-Tutorial horizontal menu */
function demo_menu_items($menuType,$homePosition)
{
 global $artThemeSettings;
 if ('left' === $homePosition) {art_print_homepage();}
 if ('pages' === $menuType)
 {

 add_action('get_pages', 'art_menu_get_pages_filter');
 add_action('wp_list_pages', 'art_menu_list_pages_filter');

 wp_list_pages('title_li=&sort_column=menu_order');

 remove_action('wp_list_pages', 'art_menu_list_pages_filter');
 remove_action('get_pages', 'art_menu_get_pages_filter');
 }
 else
 {
 add_action('get_terms', 'art_menu_get_terms_filter');
 add_action('wp_list_categories', 'art_menu_wp_list_categories_filter');

 wp_list_categories('title_li=');

 remove_action('wp_list_categories', 'art_menu_wp_list_categories_filter');
 remove_action('get_terms', 'art_menu_get_terms_filter');
 }
 if ('right' === $homePosition) {art_print_homepage();}
}
/* end CMS-Tutorial horizontal menu */

Stylesheet

If you want to option to split the menus on one line like the screenshot we need to add two small blocks to the demo-custom.css or the style.css.

/* Start cms-lite menu left and right blocks */
.demo-left
{
float: left;
}
.demo-right
{
   float: right;
}
/* End cms-lite menu left and right blocks */

Functions File

We need to let WordPress know that our function exists to do this we add a line at the start of the functions.php file in the root directory of the theme.

/* Start code to load custom functions file */
if (file_exists(TEMPLATEPATH. '/demo-functions.php')) include_once(TEMPLATEPATH. '/demo-functions.php');
/* End code to load custom functions file */

Header File

This is where we call our new function, we have a few options here, if we just wanted to add our categories menu somewhere then we leave the Artisteer code and add in a call to our menu open header.php and add your line where you want the menu to appear.

<div class="art-nav">
  <ul class="art-menu">
   <?php demo_menu_items('',''); ?>
  </ul>
</div>

This is the call for the menu in the screenshot.

<div class ="art-nav">
  <div class="demo-left">
   <ul class="art-menu">
     <?php demo_menu_items('','left'); ?>
   </ul>
  </div>
  <div class="demo-right">
   <ul class="art-menu">
     <?php demo_menu_items('pages',''); ?>
   </ul>
  </div>
</div>

We will leave you to explore other options, we do love to hear from you so drop back and leave a comment or add a link to a live website.

Bonus Section

As you have taken the time to read this tutorial here is a bonus just for you, as well as the horizontal menu we have added the vertical, code is much the same except that you pass in ‘top’ or ‘bottom’ for the ‘Home’, and you set this up in the demo-functions.php file.

In the widgets you now have two Vertical Menus the Artisteer one and our Full Vertical Menu, so you could have pages on one and categories on the other, or use the Full Vertical Menu for both pages and categories in any order.

Just the code and the download to add now, for the code in the demo-functions.php you find this function and set the parameters as you want in the full_widget_verticalmenu function look for the code in the first block.

Download: Both Menu Functions (71)

<ul class="art-vmenu">
<?php demo_vmenu_items('','top'); ?>
<?php demo_vmenu_items('pages',''); ?>
</ul>

Categories only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('',''); ?>
</ul>

Pages only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('pages','top'); ?>
</ul>

Enjoy share and don’t forget to add some feedback.

-

We have used this plugin in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, you can view: The Wedding Theme here.

To have the slideshow embedded in the home page we cannot use a sidebar widget so you will have to add a line of code to the home page, this tutorial will use a 2.4 version theme created with the Artisteer template maker.

Stylesheet

We need to add a style to the stylesheet for our slideshow container, as we want to pad the slideshow, add borders, change margins to suit our theme, to start we need to open our style.css and find these two style blocks  making a note of the width settings, this will be used to calculate your slideshow width.

/* begin Layout */
.art-content-layout
{
 display: table;
 padding: 0;
 border: none;
 width: 996px;
}

/* begin LayoutCell, content */
.art-content-layout .art-content
{
 width: 75%;
}

We now know the width of our theme and we can calculate the width of our slideshow 996px * 75% =  747px we will be adding a nice left and right margin of 25px and padding 5px to suit our theme, different themes will need adjusting, so our div width = 747 – 60 =  687px we rounded this to 685px to suit our theme.

Next step open our demo-custom.css or style.css file and paste in the code below.

/* begin LayoutCell, sidebar1 */
.art-content-layout .demo-slideshow
{
 margin-top: 7px;
 margin-bottom: 7px;
 margin-left: 25px;
 margin-right: 25px;
 padding: 5px;
 width: 685px;
 border: dotted 2px #D1D1D1;
}

Include file

Next step is to create an include php file for our Slideshow which will be called from the index.php, copy the code below and paste into a new text editor file and save this as demo-slideshow.php .

<div class="demo-slideshow">
 <div class="inner">
<!-- cu3er Slideshow Start -->
 <?php if ( function_exists('install_cu3er') )  { install_cu3er(); } ?>
<!-- cu3er Slideshow End -->
 </div>
</div>

The last code step is to add a call to include our new file in our home.php or index.php or any other page file we may want the gallery on, find this line  <div class=”art-layout-cell art-content”> and insert the code below on the next line.

<!-- demo Slideshow Start -->
<?php if (file_exists(TEMPLATEPATH. '/demo-slideshow.php')) include(TEMPLATEPATH. '/demo-slideshow.php'); ?>
<!-- demo Slideshow End -->

Cu3er Setup

We can now adjust the settings from Admin > Settings > Cu3er, enter the width and height to match our theme, we have worked out the width from the two values we noted earlier, and you can suppress the slideshow category by following the other tutorial on this website.

We have used this in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, when we added the images the slideshow category and the posts appeared, not a problem if the images form a part of a full post, but messy when used as placeholders.

View: The Wedding Theme.

We could hardcode the category ID and exclude this, that is fine on a static theme where we already know the Category ID, but what if we wanted to make the theme available to other clients or for free download.

On looking for a solution for our Artisteer theme to return a category ID we could not find a simple WordPress function to use on the lists, we have to create our own function that returns a value from the database, if you have been following our tutorials then you will already have demo-functions.php file, if not you can add them to the Artisteer functions.php file.

Add to either your demo-functions.php or the Artisteer theme functions.php

function demo_get_categoryID($catName){
 global $wpdb;
 $category_slug = str_replace(" ","-",$catName);
 $category_slug = strtolower($category_slug);
 $thevalue = $wpdb->get_var( "SELECT term_id FROM $wpdb->terms WHERE slug = '" . $category_slug . "'" );
 if ($thevalue) {
 return $thevalue;
 }else{
 return "";
 }
}

Now we need to filter the categories list to exclude the slideshow category from the menu, you can change the name as required.

In the Artisteer theme functions.php we will add this block of code to the code that returns the categories list, look for this line and insert the code below.

Find: wp_list_categories(‘title_li=’); and replace with the following lines.

/* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
}
/* End demo Category add line */

So your code block should look like this:

add_action('get_terms', 'art_vmenu_get_terms_filter');
 add_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');

 /* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
 }
 /* End demo Category add line */
 remove_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');
 remove_action('get_terms', 'art_vmenu_get_terms_filter');

last step is to add our image into two Artisteer files, index.php and archive.php, look for this line and insert the code below.

Find: <?php while (have_posts()) : the_post(); ?> and paste in the following lines

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is -->

So your code block should look like this:

<?php while (have_posts()) : the_post(); ?>

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is-->
<div>

Now we have hidden our slideshow category from view, remember that this will hide all posts in the specified named category, so only add the category to posts you do not want displayed .

Please leave a comment if you have found this post of use to your workflow.