Natalie
|
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
|
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
|
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
|
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
|
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
|
AHA !!!
We were posting at the same time! I will follow the new instructions and post back in a few minutes.
|
|
Nick
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
Hi, Natalie,
What version of Artisteer (+ templateer) is this? And do you have a link available?
|
|
Abland
|
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
|
Hi Abland, I have the mac version of artisteer and templateer 3.1. Hope that helps somehow.
|
|
Nick
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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!
|
|
|