7

How do I avoid ID conflicts if I use the same menu TWICE on one page.

FIRST

wp_nav_menu( array( 'sort_column' => 'menu_order', 
'theme_location'=>'menu', 'menu_class'=>'menu', 'menu_id'=>'menu' ) );

SECOND:

wp_nav_menu( array( 'sort_column' => 'menu_order', 
'theme_location'=>'menu', 'menu_class'=>'menu2', 'menu_id'=>'menu2' ) );

ID conflicts are like "Duplicate ID menu-item-2456"... Any solutions?

  • You are not supposed to use the same theme_location, can you define a second one? – Mario Peshev Jun 15 '12 at 18:25
  • This cannot happen with different 'theme_location's. I’ll remove my answer. – fuxia Jun 15 '12 at 18:54
2

The solution is not to call the same 'theme_location' more than once. Theme location is intended to represent an explicit location within the template.

Just register a separate 'theme_location' for each separate location within the template that you want to display a nav menu.

Consider your chosen 'theme_location' names to be semantic names, representing the template location of the menu. You could use 'primary' and 'secondary', or 'header' and 'footer', etc.:

<?php
function wpse55380_setup_theme() {

    // Register nav menu locations
    register_nav_menus( array(
        'header' => 'Header Menu',
        'footer' => 'Footer Menu'
    ) );
}
add_action( 'after_setup_theme', 'wpse55380_setup_theme' ); 

...or:

<?php
function wpse55380_setup_theme() {

    // Register nav menu locations
    register_nav_menus( array(
        'primary'   => 'Primary Header Menu',
        'secondary' => 'Secondary Header Menu'
    ) );
}
add_action( 'after_setup_theme', 'wpse55380_setup_theme' ); 

Then, it is up to the end user to assign custom menus to each Theme Location.

  • Thank you :) Yes, this answers my question but what if I want to use "Header menu" as normal menu and exactly the same menu in compact version (e.g. it hides "Header menu" and shows "Compact Header menu" on blog to save space)? It's inconvenient to ask theme users to setup the same menu twice. Any suggestions? – Paul Jun 15 '12 at 18:53
  • 2
    For one: what is the actual difference between Header Menu and Compact Header Menu? Knowing the differences will help determine the best way to implement. For another: I actually disagree that it is poor form to ask the user to define two separate menus for two separate use cases. In fact, creating a responsive/mobile Theme may very well involve having the user define a full menu and a compact/abridged menu, to output depending on context. – Chip Bennett Jun 15 '12 at 18:58
  • "Header Menu" is EXACTLY the same as "Compact Header Menu". First hides and second appears to make more space for content. Yes, it's responsive/mobile behavior to save space. I don't want to affect CSS style to achieve that. In this particular case it should be rather the same because it only appears when POPUP window with content appears. – Paul Jun 15 '12 at 19:01
  • ""Header Menu" is EXACTLY the same as "Compact Header Menu"." It' can't be; otherwise, why even have two separate menus? If they're not different with respect to CSS, then how are they different? – Chip Bennett Jun 15 '12 at 19:26
  • Normal menu has height 150px and icons, second menu has height 30px, no icons, only text. First slides up off the screen and second slides down (to be visible) using jQuery. – Paul Jun 15 '12 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.