Many of us have downloaded the Artisteer 2.4 Beta, and one of the items from the ‘wish list’ was the Categories menu, you can choose a vertical and horizontal menu, but not two horizontals, Artisteer have done most of the work for us here, so lets explore the options and add some more functionality.

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 [download id="3"] 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: [download id="4"]

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

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.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

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year 'Free Account' from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

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