Upgrading Artisteer to Version 3 Part 6

In part two we added three Menu Locations, and said we will be using the other two later in the series, for our second menu we are going to add a second horizontal menu bar, this will be a single level text menu and in our example it will sit just under the main menu, you could place it anywhere before or after the main header.

In part one we looked at creating a child theme for an existing Artisteer theme, in part two we added the changes in WordPress version 3 for menu functions, in part three another nice little function is the new backgrounds, WordPress has a lot more header support and applying these changes from the admin panel in part four and part five we extended the header section.

You can download the example Parent theme Here : Example 2.4 Theme (2427)

You can download the example Child theme part 2-6 Here: Artisteer Theme Upgrade Part 2-6 (1065)

If you have been following this series of tutorials you will have your child theme, download the Child Theme part 2-6 file and replace the file called header.php, and style.css.

All we have done for our second menu bar is use the code from the WordPress twenty ten theme, changed a few style settings and values, and told WordPress we are using our secondary menu. 

We copied these style blocks from the twenty ten theme style.css added them to our child themes style.css and changed the colors, width and height to match our theme, you will have to do this for your own theme.

/* =Secondary Menu copied from the twenty ten theme
-------------------------------------------------------------- */

/* The main theme structure */
#access .menu-header, div.menu
 margin: 0 auto;
 width: 874px; /* change value */

#access {
 background: #FFF9BD; /* change value */
 margin: 0 auto;
 width: 874px;  /* change value */
 border-bottom: solid 1px #D4CCAA; /* change value */
 z-index: 80000;
#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 12px;
#access .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
#access .menu-header li,
div.menu li {
 position: relative;
#access a {
 padding:0 10px;
 line-height:28px;  /* change value */
#access ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 width: 180px;
 z-index: 99999;
#access ul ul li {
 min-width: 180px;
#access ul ul ul {
#access ul ul a {
 background:#FFF9BD;  /* change value */
 width: 160px;
#access li:hover > a,
#access ul ul :hover > a {
 color:#393E37;  /* change value */
 background:#D4CCAA;  /* change value */
#access ul li:hover > ul {
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
 color: #393E37;  /* change value */

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
 color:#393E37;  /* change value */

 In the header.php we have added these lines to display our secondary menu, notice the last three settings, theme location is our secondary setting, depth is top level items only and fallback which tells WordPress that if we have not setup our menu then do not display anything.

<div id="access" role="navigation">
 <?php /* Our secondary navigation menu. The menu assiged to the secondary position is the one used. */ ?>
 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'secondary', 'depth' => 1,'fallback_cb' => '' ) ); ?>
</div><!-- #access -->

Now we can visit the admin panel create and assign values to the secondary menu, for our example we are just going to create a new menu called secondary and add some Custom Links menu items, then assign the new menu to the Theme Locations item Secondary Navigation.

Now when we visit the website the secondary menu is active.

Now we can have custom header selections in our Legacy Artisteer theme, this is only a simple single level menu and we would love to hear back from you with any multi level working examples that you would like to share.


Code Samples: Twenty Ten Theme


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

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.


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

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these 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.

Leave a Reply


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

Related Posts

Posted in Migration


To much information and still finding it a bit scary, lets us make it very easy, this quick guide is all the code changes except the styling, there are only three code block to do honest, first we need to find the header.jpg in … Continue reading

Read More