I cannot seem to figure out how to replace my top navigation menu (nav id="top-menu-nav") with the WordPress menu that I have already created called "Shop".
I have tried a number of different times replacing the 'menu' with 'top_menu_nav' or 'top_menu' but it doesn't recognize the location to replace the menu with the "Shop" menu.
if(strpos($_SERVER['REQUEST_URI'], 'product') !== false){
wp_nav_menu( array( 'menu' => 'Shop' ) );
}
The current code places the 'Shop' menu on the left side of the product page with no style and does not replace the menu that is currently in the header.
Actually you need to show shop menu for all woocommerce pages. right?
In the menu calling in header, please add
if (is_woocommerce()) {
wp_nav_menu( array( 'menu' => 'Shop' ) );
} else {
wp_nav_menu( array( 'menu' => 'default menu name' ) );
}
Related
Scenario:
I want to faciliate the user to choose from two different menus to be used as his/her primary menu.
I created two menus, and an Entry in both menus to switch to each other (Switch to B) (Switch to A).
The idea is that when a menu item is pressed, a wordpress function is called to switch the menu. Since I have already created the menus, they have specific IDs to choose from. All I want to hook specific function on clicking the (menu entries created in each menu) to swap the primary menu.
------------ EDIT ------------
My Approach
My Approach so far is as follows.
Created a template named Menu_Switch and created a wordpress page based on that template.
Called a function in that template.
I created the menu entry with that newly created page in both menus.
The function is as follows.
function switch_menu ( $args = '' ) {
if( $args['theme_location'] == 'primary') {
if ($args['menu'] == '45') {
$args['menu'] = '65';
} else if ($args['menu'] == '65') {
$args['menu'] = '45';
}
return $args;
}
$redirect = home_url();
}
AND then called the function in the template like this
<?php echo switch_menu(); ?>
Question
This code is not working as expected. Following is expected.
If the ID of primary menu is 45, it should set it to 65 and vise-versa.
(Since the switch template is blank) The page should redirect either to previous page or the Home page.
I don't think if that possible to do with way what you want - I mean changing location on fly, due it affects to whole site for all users.
You could to do it with next logic:
display both menus on front, one of them will be with display: none
when user selected another menu - change some html class (it's good - in body element), apply CSS to hide one menu and display another
store it's state in cookie for user will sees selected menu across all pages and when he back to site
UPDATE
I mean that you can to create two locations and display them next to each other on frontend - and in this case you can to create two different menus and to assign to different locations. Visually it will be like two menus in one place.
Please see example:
And using cookie and CSS you can to display one or another menu.
UPDATE 2
Full solution(tested on real WordPress site):
Create two locations for menus
register_nav_menus(
array(
'header_top_nav' => __( 'Header Top Area', 'starter' ),
'header_main_nav' => __( 'Header Main Area', 'starter' )
)
);
Create two menus, assign for locations above. Add to menus trigger buttons with html classes js_btn_show_menu_a and js_btn_show_menu_b which will be used for handle click in js
Display these menus on front:
<nav class="menu_a">
<?php
wp_nav_menu(
array(
'theme_location' => 'header_top_nav'
)
);
?>
</nav>
<nav class="menu_b">
<?php
wp_nav_menu(
array(
'theme_location' => 'header_main_nav'
)
);
?>
</nav>
Add js for trigger classes and set cookie
$( document ).on( 'click', '.js_btn_show_menu_a', function ( e ) {
e.preventDefault();
$( 'html' ).addClass( 'show_menu_a' ).removeClass( 'show_menu_b' );
Cookies.set( 'menu', 'show_menu_a' );
})
$( document ).on( 'click', '.js_btn_show_menu_b', function ( e ) {
e.preventDefault();
$( 'html' ).addClass( 'show_menu_b' ).removeClass( 'show_menu_a' );
Cookies.set( 'menu', 'show_menu_b' );
})
Get cookie on backend and setup it as html class on tag <html>
$menu_cookie = htmlspecialchars( $_COOKIE['menu'] ) ? htmlspecialchars( $_COOKIE['menu'] ) : 'show_menu_a';
<html class="<?php echo esc_attr( $menu_cookie ); ?>">
Add css for display/hide menus based on css class
.show_menu_a .menu_a {display: block;}
.show_menu_a .menu_b {display: none;}
.show_menu_b .menu_b {display: block;}
.show_menu_b .menu_a {display: none;}
I think you are searching for a filter where you can toggle your main menu.
If you will go through wp_nav_menu() source code
There is a filter $args = apply_filters( 'wp_nav_menu_args', $args ); and this $args array structure is
$defaults = array(
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'container_aria_label' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'item_spacing' => 'preserve',
'depth' => 0,
'walker' => '',
'theme_location' => '',
);
You can notice there is one key menu_id, if you can set that and apply this filter your menu will change based on the menu_id given.
something like
add_filter('wp_nav_menu_args', function(){
$args['menu_id'] = <desired_menu_id>
return $args;
});
I have 3 menus created in WordPress and the main menu is retrieved using wp_nav_menu() . I also want to retrieve the other menu please guide me how to do so.
You need to pass it an args array, and declare the theme_location key.
wp_nav_menu( array(
'theme_location' => 'header_main'
) ):
and
wp_nav_menu( array(
'theme_location' => 'header_secondary'
) ):
To retrieve other menu, you need to pass argument menu with menu name like this:
wp_nav_menu( array( 'menu' => 'name of the menu' ) );
You are able to create custom menu in your theme. Add this code to the function.php of your theme.
function lanparts_menu_setup(){
add_theme_support('menus','woocommerce');
register_nav_menu('woocommercemenu','Woocommerce Menu Navigation');
}
add_action('after_setup_theme','lanparts_menu_setup');
for more detail that follow this link
I am trying to get a menu with few links, and show their/link/page featured image. following is my code for functions.php.
function register_my_menus() {
register_nav_menus(
array(
'main-menu' => __( 'Main Menu' ),
'useful-links' => __( 'Userful Links' )
)
);
}
add_action( 'init', 'register_my_menus' );
and this is where i am calling it in the page.
<?php wp_nav_menu( array( 'theme_location' => 'useful-links', 'sort_column' => 'menu_order', 'container_class' => 'useful-links', 'menu'=>'Posts Menu' ) ); ?>
i know something is missing but kindly advice. my page look and feel allow 6 links and their images.
thanks
This should be in your functions.php to register the menu within WordPress.
if (!function_exists('wp_basicTemplateSetup')) {
function wp_basicTemplateSetup() {
// Register the Main Menus into WordPress
register_nav_menus(array(
'primary' => __('Main Menu', 'theme-name'),
));
}
}
add_action('after_setup_theme', 'wp_basicTemplateSetup');
In your theme, where the menu is sitting you need to tell the menu function, which menu to look for. So..:
// Variable that tells WordPress which menu to use, look at "Theme Location"
// Put this variable either at the top of your theme, of right *before* the function wp_nav_menu
$mainmenu = array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'some-menu-css-class',
'depth' => 2
);
// The WordPress menu function
<?php wp_nav_menu($mainmenu); ?>
These 3 components are necessary to get your WordPress menu working.
i m having a problem with menus.
I had a template that wasnt originaly for WP.
so i integrated it.
when i started the site there was only one menu which works great.
i added <?php wp_nav_menu('primary'); ?> and its all ok
Now i need to add another one (custom links in the header section)
sooo i used this method
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
and recieved new locations for menus.
for the second menu i added
<?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
now the problem:
there is a primary menu (it has few items)
and the custom menu ( its currently empty)
when i add new page to custom menu its being shown in both primary and custom menus.
if i delete all the items from custom menu, primary menu items are back in place...
what is the problem?
Thank you.
If I understand correctly, it looks like you are pointing to the wrong registered menu in the wp_nav_menu(). Specifically in the theme_location.
When you are building the "second menu" which is the "footer", theme_location should be footer since that is the name you gave it in the register_nav_menus().
<?php wp_nav_menu(
array( 'theme_location' => 'footer', // Change 'header' to 'footer'
'menu_class' => 'nav-menu',
'fallback_cb' => false )
);
?>
I'd like to add a home icon as the first menu item in my Wordpress menu. How can I do it?
TO let you know, this code didn't work:
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == 'primary') {
$items .= '<li>Show whatever</li>';
}
return $items;
}
I have this in functions.php:
add_theme_support('nav-menus');
if ( function_exists('register_nav_menus')) {
register_nav_menus(
array(
'main' => 'Main Nav'
)
);
}
and this is how I fire the menu:
<?php wp_nav_menu( array('menu' => 'main', 'container' => 'nav' )); ?>
You dont need to add filters and hooks for this.
You can edit your navigation in your theme files, usually it's in the header.php file. Add a new list item with your icon or text and put the link for it. Plain HTML.