Support » Fixing WordPress » Second level nav using menus

  • I cannot seem to get the second level of a menu to show only the children of the selected parent page.

    Page is http://hearthomemag.co.uk/jobs/

    <li><?php wp_nav_menu( array( 'depth' => '2', 'menu' => 'primary' )); ?></li>

    It shows the first level of the nav, but I cannot get the second level to show.

    I have tried a few things out and managed to get the second level showing, but it shows ‘all’ second level pages and not just the children of the selected parent.

    Really would like some help with this.

    Thanks

Viewing 15 replies - 1 through 15 (of 20 total)
  • The parameters to wp_nav_menu can be confusing. It may be that you want to use ‘theme_location’ => ‘primary’ instead of ‘menu’ => ‘primary’.

    The ‘menu’ parameter is the actual name of the menu that you typed into the ‘Menu name’ box. Many times ‘primary’ is the ‘Theme Location’ dropdown where you select your menu name.

    Hi

    That’s great, but hasn’t quite worked for me. Here is what I currently have:

    <div id="topnav">
    <ul>
    <li><?php wp_nav_menu( array( 'theme_location' => 'primary' )); ?></li>
    </ul>
    </div>
    
    <div id="secondnav">
    <li><?php wp_nav_menu( array( 'depth' => '2', 'theme_location' => 'primary' )); ?></li>
    </div>

    For some reason I have the second level of the nav showing in both places.

    Also, ‘Test’ page is not part of the same parent as the other pages so I need to only show the children for the current parent.

    It’s all very confusing.

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    You have two separate Theme locations, but are referencing the same one in both calls to wp_nav_menu().

    First, be sure you’ve registered two separate menu locations, in functions.php:

    register_nav_menus( array(
        'primary' => 'Primary Menu',
        'secondary' => 'Secondary Menu'
    ) );

    Second, call the appropriate Theme location in each wp_nav_menu() call. Assuming you want to use primary in the first call:

    <div id="topnav">
    <ul>
    <li><?php wp_nav_menu( array( 'theme_location' => 'primary' )); ?></li>
    </ul>
    </div>

    …then you’ll need to reference secondary in the other call:

    <div id="secondnav">
    <li><?php wp_nav_menu( array( 'depth' => '2', 'theme_location' => 'secondary' )); ?></li>
    </div>

    You need to register a second Theme Location in order to have a different menu. Here is the Codex article that explains how to do that:

    http://codex.wordpress.org/Navigation_Menus

    That still doesn’t seem to be having the desired effect.

    I’ve tried something else which seems to be getting there- I have the correct pages now showing but for some reason the styles are all wrong.

    I’m now just using:

    <div id="topnav">
    <?php wp_nav_menu( array( 'menu' => 'primary' )); ?>
    </div>

    I know that this is a different issue but any ideas how to get these in the correct order?

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    <?php wp_nav_menu( array( 'menu' => 'primary' )); ?>

    You’re still using the wrong parameter. You need to use 'theme_location' rather than 'menu'.

    I changed it back because it didn’t seem to work.

    Have now added to the theme functions:

    register_nav_menus( array(
        'primary' => 'Primary Menu',
        'secondary' => 'Secondary Menu'
    ) );

    and changed the nav to <?php wp_nav_menu( array( 'menu' => 'primary' )); ?>

    You can see what has happened now. It no longer has the first level nav and just all of the second level navigation pages.

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    and changed the nav to <?php wp_nav_menu( array( 'menu' => 'primary' )); ?>

    'menu', or 'theme_location'?

    Also: have you defined separate custom menus, and applied those custom menus to the specified Theme locations?

    Sorry, yes, changed to <?php wp_nav_menu( array( 'theme_location' => 'primary' )); ?>

    I haven’t used a secondary menu in the end as I don’t think that will work. When I click on different sections I would need to define children of that parent for each section of the website. Isn’t that what the indentation refers to in a menu?

    Can I not just use one menu with parent/children and style these over two rows?

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    Can we back up – a bunch – and ask a more fundamental question:

    Looking at your HTML markup, this actually looks like one, single menu. Is that correct? Or are these, in fact, two different menus?

    If a single menu: why not just nest your menu items, so that they display the way you want them to?

    Yeah, that’s what I want buy struggling with how to do it. Tried lots of different ways. Seem to have some issues with the classes and how to get it to do that.

    For some reason all of the imposed classes are making my head hurt but am sure it is simple enough to do. Or at least I hope it is.

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    For some reason all of the imposed classes are making my head hurt but am sure it is simple enough to do. Or at least I hope it is.

    If you’re just trying to develop a dropdown menu, I would encourage you to take a look at Twenty Eleven. It has solid CSS for controlling a three-level dropdown menu, as generated by wp_nav_menu().

    Also, I’d appreciate your feedback on the CSS classes section of the wp_nav_menu() Codex entry. I recently added it, and would love to know if it’s useful, or needs improvement.

    I wanted to have a static two row menu system, rather than a drop-down. That page seems to make sense but what about submenu styles?

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    I wanted to have a static two row menu system, rather than a drop-down.

    Okay, so then you really do want two separate menus.

    That page seems to make sense but what about submenu styles?

    You can style each menu separately, based on the ID or class you pass to the UL or the containing DIV, via wp_nav_menu().

    Let’s try to step through it, completely, one more time:

    REGISTER NAV MENU LOCATIONS

    In functinos.php:

    register_nav_menus( array(
        'topnav' => 'Top Navigation Menu',
        'secondnav' => 'Second Navigation Menu'
    ) );

    OUPUT TOPNAV

    We’re going to get rid of all extraneous markup, and pass IDs and classes instead directly to wp_nav_menu() (please be sure to reference the wp_nav_menu() Codex reference to understand its parameters):

    wp_nav_menu( array(
        'theme_location' => 'topnav',
        'container_id' => 'topnav',
        'depth' => 1
    );

    OUTPUT SECONDNAV

    Same drill as above:

    wp_nav_menu( array(
        'theme_location' => 'secondnav',
        'container_id' => 'secondnav',
        'depth' => 1
    );

    CREATE/APPLY CUSTOM MENUS

    1. Go to Dashboard -> Appearance -> Menus
    2. If you’ve not done so already, create the custom navigation menus that you wish to apply to the two Theme locations.
    3. Apply each of those menus to the appropriate Theme location, via the “Theme Locations” meta box in the upper left-hand corner

    APPLY CSS STYLES

    This part is mostly up to you, because I don’t know the exact styling you’re looking for. You can target the topnav menu via #topnav .menu, and you can target the secondnav menu via #secondnav .menu.

    Okay, so I think that separate menus will make life easier although I will have a lot of menus with so many sections needing second level navigation, but if it works, I’m fine with that route.

    So, I now have:

    <div id="topnav">
    <?php wp_nav_menu( array( 'theme_location' => 'topnav', 'container_id' => 'topnav', depth => 1 )); ?>
    </div>
    
    <div id="secondnav">
    <?php wp_nav_menu( array( 'theme_location' => 'nav-jobs', 'container_id' => 'secondnav', 'depth' => 1 )); ?>
    </div>

    which seems to have set them out as I wanted except I still have the same issue that both levels are showing the same second level nav.

    What is more confusing is that the ‘Test’ page is not even in either of the menus. It just seems to show ALL pages in both levels.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Second level nav using menus’ is closed to new replies.