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 (1359) 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 (111)

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

-