Hey Everyone,
I had question regarding menus. Is there is any way to add 3 navigation menu to a theme. The primary and secondary navigation will show only only on desktop and the 3rd one will be for mobile and tablets, some thing like this website. If there is any way to do this then please help me with that.
Thanks.
The three things you speaking about, are the widget areas, not menus. I am not sure now if you like more menus or widget areas. You can add both.
I have added two menues to my theme (test.j0e.org). One in the Footer and on below the header.
footer menu for things like privacy policy:
// Register new Footer Menu
add_action( 'init', 'j0e_register_my_menu' );
function j0e_register_my_menu() {
register_nav_menu( 'footer-menu',__( 'Footer Menu' ) );
}
// Overwrite the footer credit and add the footer menu for contact, privacy...
beans_add_smart_action( 'beans_footer_credit_right_text_output', 'j0e_footer_menu' );
function j0e_footer_menu() {
wp_nav_menu( array(
'menu' => 'Footer Menu',
'menu_class' => 'uk-subnav uk-subnav-line uk-contrast',
'theme_location' => 'footer-menu',
'beans_type' => 'navbar'
) );
}
beans_remove_attribute( 'beans_menu[_navbar][_footer-menu]', 'class', 'uk-navbar-nav' );secondary menu below my header:
// Register new Secondary Menu
add_action( 'init', 'j0e_register_my_secondary_menu' );
function j0e_register_my_secondary_menu() {
register_nav_menu( 'secondary-menu',__( 'Secondary Menu' ) );
}
// Add the new secondary menu
beans_add_smart_action( 'beans_header_after_markup', 'j0e_secondary_menu' );
function j0e_secondary_menu() {
if ( has_nav_menu( 'secondary-menu' ) ) { // only show if the locoation secondary-menu has a menu assigned
echo beans_open_markup( 'j0e_secondary_menu_nav', 'div', 'class=j0e-secondary-menu' );
wp_nav_menu( array(
'menu' => 'Secondary',
'menu_class' => 'uk-navbar-nav uk-visible-larget',
'container' => 'nav',
'container_class' => 'uk-container uk-container-center uk-navbar',
'theme_location' => 'secondary-menu',
'beans_type' => 'navbar'
) );
echo beans_close_markup( 'j0e_secondary_menu_nav', 'div' );
}
}Hey Jochen,
Thanks for the solution, It worked, I was not able to show secondary menu below my header: Thank you so much for the solution.
Thanks for sharing @gmmed.
Just a quick info for those who may not know. When extending Beans, you do not have to use beans_open_markup and beans_close_markup and can totally use normal HTML. You would only use Beans HTML API to write HTML if you are building themes and plugins meant to be used and extended further by other users.
Happy coding,
@gmmed
good lord, that is one heck of a test site. Those new page layouts, the page grid, remarkable.
Thank you. But the page grid is stolen from http://demo.themebutler.com/banks/
EDIT: I added a check in each function to see if a menu is located in the specific menu location.
A recap of registering and displaying menus:
Adding a new preheader menu.
// Register new preheader Menu
function register_preheader_menu() {
register_nav_menu( 'preheader-menu',__( 'Preheader Menu' ) );
}
add_action( 'init', 'register_preheader_menu' );
// Add the new preheader menu - where it is to be located
beans_add_smart_action( 'beans_header_before_markup', 'preheader_menu' );
// Display
function preheader_menu() {
if ( has_nav_menu( 'preheader-menu' ) ) { // only show if the preheader-menu location has a menu assigned
wp_nav_menu( array(
'menu' => 'Preheader Menu',
'menu_class' => 'preheader-menu', // I added my own class to the menu.
'container' => 'nav',
'container_class' => 'uk-navbar uk-float-center',
'theme_location' => 'preheader-menu',
'beans_type' => 'navbar'
) );
}
}Adding a new menu below the header
// Register new Secondary Menu
function register_secondary_menu() {
register_nav_menu( 'secondary-menu',__( 'Secondary Menu' ) );
}
add_action( 'init', 'register_secondary_menu' );
// Add the new secondary menu - where it is to be located
beans_add_smart_action( 'beans_header_after_markup', 'secondary_menu' );
// Display
function secondary_menu() {
if ( has_nav_menu( 'secondary-menu' ) ) { // only show if the secondary-menu location has a menu assigned
wp_nav_menu( array(
'menu' => 'Secondary',
'menu_class' => 'uk-navbar-nav uk-visible-larget',
'container' => 'nav',
'container_class' => 'uk-container uk-container-center uk-navbar',
'theme_location' => 'secondary-menu',
'beans_type' => 'navbar'
) );
}
}
Adding a new footer menu right before the copyright information.
// Register new Footer Menu
function register_footer_menu() {
register_nav_menu( 'footer-menu',__( 'Footer Menu' ) );
}
add_action( 'init', 'register_footer_menu' );
// Add the new secondary menu - where it is to be located
beans_add_smart_action( 'beans_fixed_wrap[_footer]_prepend_markup', 'footer_menu' );
/* I CHANGED THIS - so I also commented this out.
Overwrite the footer credit and add the footer menu for contact, privacy...
beans_add_smart_action( 'beans_footer_credit_right_text_output', 'footer_menu' );
*/
// Display
function footer_menu() {
if ( has_nav_menu( 'footer-menu' ) ) { // only show if the footer-menu location has a menu assigned
wp_nav_menu( array(
'menu' => 'Footer Menu',
'menu_class' => 'uk-subnav uk-container uk-container-center',
'theme_location' => 'footer-menu',
'beans_type' => 'navbar'
) );
}
}
// So we get the menu in the correct location
beans_remove_attribute( 'beans_menu[_navbar][_footer-menu]', 'class', 'uk-navbar-nav' );wp_nav_menu() has several parameters you can use when displaying a menu.
NB! Instead of registering one menu at a time one can register them all at once:
// Register new Menus
function register_multiple_menus() {
register_nav_menus(
array(
'preheader-menu' => __( 'Preheader Menu' ),
'secondary-menu' => __( 'Secondary Menu' ),
'footer-menu' => __( 'Footer Menu' ),
)
);
}
add_action( 'init', 'register_multiple_menus' );Here is a tutorial I wrote: http://wpbeansframework.com/2016/12/04/adding-a-new-menu/
Let me know if there are any adjustments I need to make. Thanks.