WordPress.org

Ready to get started?Download WordPress

Forums

Second level nav using menus (21 posts)

  1. mamalovesyou
    Member
    Posted 1 year ago #

    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

  2. vtxyzzy
    Member
    Posted 1 year ago #

    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.

  3. mamalovesyou
    Member
    Posted 1 year ago #

    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.

  4. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    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>
  5. vtxyzzy
    Member
    Posted 1 year ago #

    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

  6. mamalovesyou
    Member
    Posted 1 year ago #

    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?

  7. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

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

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

  8. mamalovesyou
    Member
    Posted 1 year ago #

    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.

  9. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    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?

  10. mamalovesyou
    Member
    Posted 1 year ago #

    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?

  11. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    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?

  12. mamalovesyou
    Member
    Posted 1 year ago #

    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.

  13. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    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.

  14. mamalovesyou
    Member
    Posted 1 year ago #

    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?

  15. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    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.

  16. mamalovesyou
    Member
    Posted 1 year ago #

    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.

  17. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    First, change this:

    <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>

    ...to this:

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

    The rest really is a CSS issue, that, without seeing actual, rendered code, we really can't help with.

  18. mamalovesyou
    Member
    Posted 1 year ago #

    Okay, so I changed it to

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

    which renders as:

    <div class="menu"><ul><li class="page_item page-item-24"><a href="http://hearthomemag.co.uk/jobs/information/">Information</a></li><li class="page_item page-item-18"><a href="http://hearthomemag.co.uk/jobs/submit-a-job-advert/">Submit a job advert</a></li><li class="page_item page-item-21"><a href="http://hearthomemag.co.uk/jobs/terms-and-conditions/">Terms and conditions</a></li><li class="page_item page-item-28"><a href="http://hearthomemag.co.uk/jobs/test/">Test</a></li></ul></div>
    <div class="menu"><ul><li class="page_item page-item-24"><a href="http://hearthomemag.co.uk/jobs/information/">Information</a></li><li class="page_item page-item-18"><a href="http://hearthomemag.co.uk/jobs/submit-a-job-advert/">Submit a job advert</a></li><li class="page_item page-item-21"><a href="http://hearthomemag.co.uk/jobs/terms-and-conditions/">Terms and conditions</a></li><li class="page_item page-item-28"><a href="http://hearthomemag.co.uk/jobs/test/">Test</a></li></ul></div>

    You can see that the container_id is not rendering in the code.
    http://hearthomemag.co.uk/jobs/

    I really don't understand this. Does it make any sense to you why it isn't working?

  19. mamalovesyou
    Member
    Posted 1 year ago #

    Okay, I have fiddled with it more and have the desired effect:
    http://hearthomemag.co.uk/jobs/terms-and-conditions/

    The only issue now is that if I click on to a different section, I want the secondnav to change to the relevant second-level menu. But the code I am using specifies this particular menu.

    Is there a way to say:

    IF 'Magazine', show 'nav-mag' as second-level.
    IF 'Blog', show 'nav-blog' second-level.

    That would be fine for me to implement if it is possible to do. I don't even know what to search for to find that.

  20. Chip Bennett
    Theme Review Admin
    Posted 1 year ago #

    If you want the second menu to be dynamic, then you don't actually want to use wp_nav_menu(). For all of its benefits, one of its limitations is that it is static. It doesn't change based on context.

    I would recommend, instead, using wp_list_pages(), which accepts a 'child_of' parameter.

    Do you want the second menu to display pages that are children of the current page, or that are children of the current page's parent page?

  21. phoenixfromtheashes
    Member
    Posted 1 year ago #

    Can you please tell us the solution.
    I googled so much. But this is the best attempt to solve the problem.

Topic Closed

This topic has been closed to new replies.

About this Topic