Show specific menu item from wp_nav_menu based on id

4 Views

I have a wp_nav_menu “Main Menu” such as the following:

  • Top Level (#menu-item-1)
    • Sub Item
    • Sub Item
  • Top Level (#menu-item-2)
    • Sub Item
  • Top Level (#menu-item-3)
    • Sub Item A
    • Sub Item B
      • Sub Item a.1
    • Sub Item C

Then in my template I want to be able to echo wp_nav_menu Main Menu sub items for say top level with id of menu-item-3 where menu-item-3 is the current menu top item.

Read More

So something like this: (but that would actually work of course) 

wp_nav_menu( array('menu' => 'Main Menu' 'menu-item-id' => '3' ));

And that would return:

  • Sub Item A
  • Sub Item B
    • Sub Item a.1
  • Sub Item C

If it matters this is so I can show the sub items as side menu interior based on which main menu item section your in dynamically. Thanks in advance!

To note, this is not a duplicate of, “http://wordpress.stackexchange.com/questions/2802/display-a-portion-branch-of-the-menu-tree-using-wp-nav-menu”. Though that page has several similar answers, none work as expected with the current version of WordPress. That is showing on particular submenu item and all of its, children, their children and so on (unlimited depth).

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. If I understand what you want correctly, you can do this with CSS. You’ll call wp_nav_menu normally and let it generate all of the links, but then you’ll hide all of them except for the submenu of the current page.

    You’re CSS would look something like this,

    #sidebar ul.menu li
{
    display: none;
}

    #sidebar ul.menu li.current-page-parent,
    #sidebar ul.menu li.current-page-parent ul,
    #sidebar ul.menu li.current-page-parent ul.li
    {
        display: block;
    }

    Update: You can check out http://thataboycreative.com to see an example of where I’ve used this before. Here’s the relevant CSS from that example:

    ul.sub-menu
{
    display: none;
}

    #menu-main-navigation > li.current-menu-item ul.sub-menu,
    #menu-main-navigation > li.current-menu-ancestor ul.sub-menu
    {
        display: block;
    }

  3. Another way I’ve done this is grabbing the posts directly, instead of using wp_nav_menu. This is based on the actual page structure, though, not the menu.

    functions.php:

    function __construct()
{
    $this->currentPageID    = $this->getCurrentPageID();
    $this->sectionChildren    = $this->getSectionChildren();
}

function getCurrentPageID()
{
    $currentPage = $_SERVER['REQUEST_URI'];

    if($currentPage == '/')
        $currentPage = '/home';
    $currentPage = get_page_by_path($currentPage);

    if($currentPage)
        return $currentPage->ID;
    else
        return -1;
}

function getSectionID()
{
    global $wpdb;

    $currentSectionID = $wpdb->get_var("
        SELECT post_parent
        FROM ". $wpdb->posts ."
        WHERE ID = ". $this->currentPageID
    );

    if($currentSectionID == 0)
        return $this->currentPageID;
    else
        return $currentSectionID;
}

function getSectionChildren()
{
    global $wpdb;

    $children = $wpdb->get_results("
        SELECT ID, post_title
        FROM ". $wpdb->posts ."
        WHERE
            post_parent = ". $this->getSectionID() ." AND
            post_type = 'page' AND
            post_status = 'publish'
    ", ARRAY_A);

    return $children;
}

    sidebar.php:

    <ul id="sub-navigation">
    <?php foreach($dc->sectionChildren as $c) : ?>
        <li <?php if($dc->currentPageID == $c['ID']) echo 'class="active"'; ?>><a href="<?php echo get_permalink($c['ID']); ?>"><?php echo $c['post_title']; ?></a></li>
    <?php endforeach; ?>
</ul>