Adding a second menu


  Page 1 of 2 Next Last 
Author Message
Natalie

Posted: 4/8/2013
Quote message 

:-@

I'm trying to add a secondary menu to my site by making two exact templates, one with the menu over the header and one with the menu under header. Can someone explain to me how to merge one menu into the other template so that I have one theme with both menus incorporated.
 
Abland

Posted: 4/8/2013
Quote message 

Hi, Natalie,

In your header.php find the header code: (I'm using prefix art-)
<?php if(theme_has_layout_part("header")) : ?>

<header class="art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?></header>
<?php endif; ?>

Either above or below you have:
<nav class="art-nav">

<div class="art-nav-inner">
<?php
if ( !theme_get_option('nav_display')){
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu'
)
);
get_sidebar('nav');
}
?>
</div>
</nav>

May not be exact but it's everything between and including <nav and /nav>"

If it's below the header code, copy and paste it above the header code so you have one above and one below.

Create a custom menu - lets's say: "my-menu" - in either the top or bottom menu change:
'menu' => 'primary-menu',

to
'menu' => 'my-menu',

 
Nick

Posted: 4/8/2013
Quote message 

I will try this too Abland. You have never wrong, and this is one of the best tips I've ever seen here.

Thank you.
 
Abland

Posted: 4/8/2013
Quote message 

Hi, Nick,

Thanks - but I made a mistake :-(

On the last section of creating the custom menu, do this instead:

In functions.php find approx. line 196:
register_nav_menus(array('primary-menu' => __('Primary Navigation', THEME_NS)));

Copy, paste below that line and modify as follows:
register_nav_menus(array('secondary-menu' => __('Secondary Navigation', THEME_NS)));

Now in the admin Appearance > Menus you have a second menu drop down under Theme Locations. Select a menu for that location.

In the header.php where you selected one menu:
'menu' => 'primary-menu',

change now to:
'menu' => 'secondary-menu',

 
Nick

Posted: 4/8/2013
Quote message 

Sorry Abland. Your tutorial above must be for earlier versions of Artisteer. In v4.1 themes, the nav class does not exist. I need to investigate where to locate that code, but at least you gave me some ideas what to look for.

The file sidebar-header.php has the nav class, but I can't make it work, yet !


 
Nick

Posted: 4/8/2013
Quote message 

AHA !!!

We were posting at the same time! I will follow the new instructions and post back in a few minutes.


 
Nick

Posted: 4/8/2013
Quote message 

OK, I got it to work, sort of!

As I said before, I created the code of the second menu in the sidebar-header.php, and not in the header, and registered the secondary menu in the functions.php per your instructions. The problem now is that both menus occupy the same space (they are on top of each other). Any ideas how to position the second menu?

My first inclination is to create a new class for this secondary menu, and try to position it with CSS. By creating a second custom class for it, I can also create the second menu to look different from the first one. What are your thoughts on this?

This is nothing that a learning exercise for me now, but if we can get this working, it can be very useful with Woocommerce. Have one menu for regular cms pages, and blog, and a second menu for the product Categories.
 
Nick

Posted: 4/8/2013
Quote message 

Looks like my idea of creating a custom class is working. I did not even start fresh of course. Copy paste the code from the original menu class, and change some of the values.

We are going to run into a new problem though, which I will have to wait to solve it tomorrow, or in the next 2-3 days, as I will have to see some clients tomorrow! The secondary menu does not show up in the responsive layouts, so I guess I have to look into the style.responsive.css file, to see if I can do some damage there.

You pointed me in the right direction Abland, so I owe you one more favor. This is actually fun!
 
Nick

Posted: 4/8/2013
Quote message 

OK, after playing some more with it, I got 2 different results, depending how your header is setup I guess, and I wonder, how many variations there are:

Case 1: The menu is inside the header, and the menu's bar is invisible (I don't think the second info is relevant).

Results:

-The nav code is in the sidebar-header.php, and it is different than what Abland posted. But it's enough to figure it out.
-The second menu does not show up in the responsive layouts.

Case 2: Typical, regular template, where the header is the width of the page, and the menu is below the header.

Results:

- The code is located in the header.php file this time, exactly the way Abland explained it.
- The menu shows up in the responsive menus.

Hopefully more to come soon...

 
Zach

Posted: 4/9/2013
Quote message 

I don't wanna barge in here and try to sell you my stuff, but I do cover this in my Wordpress training, so it may be worth checking out if you get stuck. The training's $27 though, so if you're a WP pro outside of this one thing, it may not be worth it for you.

http://artisteertutorial.com/wordpress-training-dashboard/section-4-additional-training/4-1-how-to-add-a-second-menu-to-your-wordpress-site/
 
Nick

Posted: 4/9/2013
Quote message 

Thanks, but I solved the second menu problem. I am now working on having the 2 horizontal menus with different stylings. I even sorted out the responsive menus for both menus. To see what I mean, I am making a replica of "Styleshop" by Elegant Themes - http://elegantthemes.com/preview/StyleShop/

Not that difficult actually, but definitely not for beginners...
 
Abland

Posted: 4/10/2013
Quote message 

Hi, Nick,

That's a nice little project. For styling the new menu, in case you didn't know, in the nav code:
'class' => 'art-hmenu'

add another class:
'class' => 'art-hmenu art-yabba'

Use what you want for a name, but that menu will still have all the rules and stability of .art-hmenu with the exception of the ones you override with rules using .art-yabba
 
Natalie

Posted: 4/10/2013
Quote message 

Quote Abland:

Hi, Natalie,

In your header.php find the header code: (I'm using prefix art-)
<?php if(theme_has_layout_part("header")) : ?>

<header class="art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?></header>
<?php endif; ?>

Either above or below you have:
<nav class="art-nav">

<div class="art-nav-inner">
<?php
if ( !theme_get_option('nav_display')){
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu'
)
);
get_sidebar('nav');
}
?>
</div>
</nav>

May not be exact but it's everything between and including <nav and /nav>"

If it's below the header code, copy and paste it above the header code so you have one above and one below.

Create a custom menu - lets's say: "my-menu" - in either the top or bottom menu change:
'menu' => 'primary-menu',

to
'menu' => 'my-menu',



Hi Abland, thank you so much for your response. I am just now coming back to the forum. One thing I forgot to mention is that the two menus I have are different styles. Do you know how to transfer one menu with all it's styles to the other theme? I need to create the theme with 2 menus asap. I'm so frustrated.

 
Abland

Posted: 4/10/2013
Quote message 

Hi, Natalie,

You'll need this part:

Quote Abland:

Hi, Nick,

Thanks - but I made a mistake :-(

On the last section of creating the custom menu, do this instead:

In functions.php find approx. line 196:
register_nav_menus(array('primary-menu' => __('Primary Navigation', THEME_NS)));

Copy, paste below that line and modify as follows:
register_nav_menus(array('secondary-menu' => __('Secondary Navigation', THEME_NS)));

Now in the admin Appearance > Menus you have a second menu drop down under Theme Locations. Select a menu for that location.

In the header.php where you selected one menu:
'menu' => 'primary-menu',

change now to:
'menu' => 'secondary-menu',



 
Abland

Posted: 4/10/2013
Quote message 

And this to set up new style rules:

Quote Abland:

Hi, Nick,

That's a nice little project. For styling the new menu, in case you didn't know, in the nav code:
'class' => 'art-hmenu'

add another class:
'class' => 'art-hmenu art-yabba'

Use what you want for a name, but that menu will still have all the rules and stability of .art-hmenu with the exception of the ones you override with rules using .art-yabba


 
Abland

Posted: 4/10/2013
Quote message 

If the other style is already created in a different theme then find all the style rules for that other theme's art-hmenu class.

Do a search and replace to the art-Yabba class (or whatever class you used)

Copy those rules to the new style.css - there may be images of the same name in both themes related to the menus so you'd need to change those names and references to avoid conflict when you bring those images over.
 
Natalie

Posted: 4/11/2013
Quote message 

Hi Abland I am doing my best to understand your instructions, but I am at a loss because I have pretty much 0 knowlege of html. FIrst thing I did is rename all the images relating to my bottom menu (nav2, separator2, etc) and transferred them to the image folder of the top-menu archive. Now I'm trying to do your first step which is copy the nav code from the header.php of my bottom menu to the header.php of my top menu archive, correct? However, my header.php doesn't have the code you mentioned. This is the code it has pertaining to nav:

<?php tt_header_after(); } ?>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<?php tt_nav_before(); ?>
<div class="art-bar art-nav">
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
<div class="art-nav-center">
<?php
tt_nav_inside_top();
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu'
)
);
tt_nav_inside_bottom();
?>
</div>
</div>
</div>
</div>
<?php
tt_nav_mod_top();
if (theme_get_option('enable_nav_mods') == 1) {
$social_icons = stripslashes(theme_get_option('image_content'));
ob_start();
if (theme_get_option('nav_mod_type') == 'search') { get_search_form(); } else { echo '<div style="text-align:right;">' . $social_icons . '</div>';}
$nav_mods = ob_get_contents();
ob_end_clean();
$items .= '<div class="sbox">' . $nav_mods . '</div>';
echo $items;
}
tt_nav_mod_bottom();?>
</div>
<?php tt_nav_after(); ?>
<div class="cleared reset-box"></div>
<div class="art-box art-sheet">
<div class="art-box-body art-sheet-body">
<?php tt_sheet_inner_top(); ?>

I don't know what to copy from there or rename and what not. Thank you so much for your responses.
 
Abland

Posted: 4/11/2013
Quote message 

Hi, Natalie,

What version of Artisteer (+ templateer) is this? And do you have a link available?
 
Abland

Posted: 4/11/2013
Quote message 

As close as I can tell this will be the code you need - the new menu will not have the templateer options available.
<div class="art-bar art-nav"> 

<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
<div class="art-nav-center">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'secondary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu art-hmenu2'
)
);
?>
</div>
</div>
</div>
</div>
</div>

I've called is secondary-menu in the code above and added the new class art-hmenu2

When I know the version I should be able to tell you how to register the new menu.
 
Natalie

Posted: 4/11/2013
Quote message 

Hi Abland, I have the mac version of artisteer and templateer 3.1. Hope that helps somehow.


 
Nick

Posted: 4/12/2013
Quote message 

Thanks Abland, I have it all figured out...

One thing you did not mention though is that you have to take care of the art-nav in the style.responsive.css files too, to add the second menu in the responsive layouts.

Last 2 quick notes.

1. It is much easier when dealing with headers that are fixed. Fluid headers, are more challenging.

2. It's easier to use the same styling for both menus. If you want different styles for each, you have to create a new class for art-hmenu too, as Abland mentioned.

Since it's a lot of work, I let Artisteer do the heavy lifting for me. So I create 2 variations of the themes with the 2 different menus, and copy/paste (rename the classes) of the second variation into the first theme. with practice I am getting my dev. to about 15-20 minutes. The only tools that I use are Artisteer of course, Notepad++, and Firebug for double checking the code.

It's not that difficult, but it's not for beginners either. Adding a second horizontal menu would be a great welcome to the next version of Artisteer, specially when with responsive design, the vertical menu is practically useless.
 
Abland

Posted: 4/12/2013
Quote message 

Hi, Natalie,

Mac version won't matter as we're editing the published theme. Here we go:

In your header.php you need this code for your second menu:
<div class="art-bar art-nav"> 

<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
<div class="art-nav-center">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'secondary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu art-hmenu1'
)
);
?>
</div>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>

I have added a call to 'secondary-menu':
'menu' => 'secondary-menu',

and added another class, 'art-hmenu1':
'class' => 'art-hmenu art-hmenu1'

Paste the menu code immediately above your header div:
<div class="art-header">

** I'm not certain about templateer in this version but if there's code for header_before then paste above that if it's before art-header:
<?php tt_header_before(); } ?>

Next, in functions.php find:
register_nav_menus(array('primary-menu'	=>	__( 'Primary Navigation', THEME_NS)));

Mine is approximately line 53 but with templateer it's likely a different line. Copy that line then paste back in immediately below and edit as follows: (change primary to secondary)
register_nav_menus(array('secondary-menu'	=>	__( 'Secondary Navigation', THEME_NS)));

In the admin: Appearanace>Menus you can now assign a custom menu to the secondary menu spot.

Now, in your alternate theme search: art-hmenu
and replace with: art-hmenu1

Copy all those new style art-hmenu1 rules into your main theme, and edit any image names called. Bring in the related alternate images and make sure they have the new names.

As mentioned, your new menu will not have the templateer options.
 
Abland

Posted: 4/12/2013
Quote message 

Hi, Nick,

Send a link when you have things ready - I'd be interested to see how you achieve the look of that elegant theme example.

And yes, menu in the header does present a challenge. I stopped using them when they presented layout problems - when they were first introduced. It's been fixed but I still haven't used them so they completely slipped my mind when posting to Natalie on my first reply :*)
 
Natalie

Posted: 4/12/2013
Quote message 

Hi Abland, I followed your instructions but when I uploaded my theme, my website went blank. I couldn't even sign into wordpress. I had to go through filezilla and delete the theme file from the server. Any idea why this is?
 
Zach

Posted: 4/12/2013
Quote message 

Hi guys, to make your lives easier, I have decided to make this part of my Wordpress tutorial free to access. Here's a link to a video that will show you how to add a second menu to your WP site:

http://artisteertutorial.com/wordpress-training-dashboard/section-4-additional-training/4-1-how-to-add-a-second-menu-to-your-wordpress-site/

Hope it helps!

=========================
Zach Swinehart

www.artisteertutorial.com

Learn how to create great Artisteer websites with my free step-by-step video training!

 
Abland

Posted: 4/12/2013
Quote message 

Hi, Natalie,

Quote Natalie:
Hi Abland, I followed your instructions but when I uploaded my theme, my website went blank. I couldn't even sign into wordpress. I had to go through filezilla and delete the theme file from the server. Any idea why this is?


A white screen is usually a code error that the server can't process, so check the functions.php part to see if a comma or apostrophe or something is missing or out of place.
 
Natalie

Posted: 4/12/2013
Quote message 

The error is in the functions.php code like you said Abland because I'm getting a red signal in dreamweaver when I open the functions.php at line 104. Here is my code:
if (function_exists('register_nav_menus')) {
register_nav_menus(array('primary-menu' => __( 'Primary Navigation', THEME_NS),
register_nav_menus(array('secondary-menu' => __( 'Secpondary Navigation', THEME_NS),
'footer-menu' => __( 'Footer Navigation', THEME_NS)
));

}

There error is coming up on the second to last like I just posted where all I have is: ));
 
Natalie

Posted: 4/12/2013
Quote message 

Let me give you the code like this:
if (function_exists('register_nav_menus')) { 	register_nav_menus(array('primary-menu'	=>	__( 'Primary Navigation', THEME_NS), 	register_nav_menus(array('secondary-menu'	=>	__( 'Secpondary Navigation', THEME_NS), 							 'footer-menu'	=>	__( 'Footer Navigation', THEME_NS) 	));  }


Ok so the error shows up on the second to last line. Where it says ));


@Nick thank you I will check it out. But I feel like I am just a tiny code error away from having what I want.
 
array error

Posted: 4/12/2013
Quote message 

if (function_exists('register_nav_menus')) { 

register_nav_menus(array('primary-menu' => __( 'Primary Navigation', THEME_NS),
'secondary-menu' => __( 'Secpondary Navigation', THEME_NS),
'footer-menu' => __( 'Footer Navigation', THEME_NS) ));
}

 
Natalie

Posted: 4/12/2013
Quote message 

TADA!!!!! Finally it worked, thank you everyone for your input! So for some reason I had to remove the (array part in the functions.php file for my secondary menu code. It now looks like this:
if (function_exists('register_nav_menus')) { 	register_nav_menus(array('primary-menu'	=>	__( 'Primary Navigation', THEME_NS), 	

'secondary-menu'=> __( 'Secondary Navigation', THEME_NS),
'footer-menu' => __( 'Footer Navigation', THEME_NS) )); }


After that the code was perfect. However, my theme was showing both menu's looking the same. So I figured out that I have to change the nave in the header code for my second menu. I changed it to nav2, so now the code looks like this:
<div class="art-bar art-nav2">  

<div class="art-nav2-outer">
<div class="art-nav2-wrapper">
<div class="art-nav2-inner">
<div class="art-nav2-center">


Then, add nav2 in the style.css wherever was necesary for my second menu.

Again you guys have been tremendous help. I hope this forum help other html illiterates like myself. Thanks Abland for your quick responses!!!! And Nick I am checking out your site!
 
  Page 1 of 2 Next Last