CODEWITHSUNDEEP
phpwordpressfunctionmenunavigation
Liz
Liz

Reputation: 1048

WordPress Menu: On click of parent menu item, only display sub navigation children of that link

I am having some trouble with my WordPress navigation functionality. I have the following function that pulls menu items from the admin:

function cr_get_menu_items($menu_location)
{
    $locations = get_nav_menu_locations();
    $menu = get_term($locations[$menu_location], 'nav_menu');
    return wp_get_nav_menu_items($menu->term_id);
}

In my navigation template, I use this function to pull in only parent items like this:

  <?php $nav = cr_get_menu_items('navigation_menu') ?>
  <?php foreach ($nav as $link):
    if ($link->menu_item_parent == 0) : ?>
    <a class="main-nav" href="<?= $link->url ?>"><?= $link->title ?></a>
  <?php endif; endforeach; ?>

I tried to make a sub navigation that shows children items like this:

<?php $nav = cr_get_menu_items('navigation_menu') ?>
<?php foreach ($nav as $link):
if ($link->menu_item_parent !== 0) : ?>
<a href="<?= $link->url ?>"><?= $link->title ?></a>
<?php endif; endforeach; ?>

This pulls in ALL children menu items. The way the navigation I am building should work is: you click on a parent menu item and the sub navigation displays all child menu items for that parent. The hide/display functionality is all JS.

Is there a way to alter the function I have to pull in only children for a specific parent menu item? Any help/guidance is appreciated.

Upvotes: 3

Views: 1995

Answers (1)

Sally CJ
Sally CJ

Reputation: 15620

Is there a way to alter the function I have to pull in only children for a specific parent menu item?

For that purpose, yes, there is.

Try the following function (replace the existing cr_get_menu_items() function):

function cr_get_menu_items($menu_location, $parent = -1)
{
    $locations = get_nav_menu_locations();
    $menu = get_term($locations[$menu_location], 'nav_menu');
    $items = wp_get_nav_menu_items($menu->term_id);

    if ( is_numeric( $parent ) && $parent >= 0 ) {
        $_id = (int) $parent;
        foreach ( $items as $i => $item ) {
            if ( $_id !== (int) $item->menu_item_parent ) {
                unset( $items[ $i ] );
            }
        }
    }

    return $items;
}

Usage examples:

$nav = cr_get_menu_items( 'navigation_menu' );    // Get all menu items.
$nav = cr_get_menu_items( 'navigation_menu', 0 ); // Get menu items whose parent ID is 0

UPDATE

After I re-read your question, this is the function that you likely need:

// $items is the menu items array that you retrieved using `cr_get_menu_items()`,
// or other functions which return valid `nav_menu` items.
function cr_get_submenu_items( array $items, $parent ) {
    $parent = (int) $parent;

    $list = [];
    foreach ( $items as $item ) {
        if ( $parent === (int) $item->menu_item_parent ) {
            $list[] = $item;
        }
    }

    return $list;
}

UPDATE #2

Here's how you would/could use cr_get_menu_items() along with cr_get_submenu_items():

<?php $nav = cr_get_menu_items('navigation_menu') ?>

<!-- Display parent items. -->
<?php $nav = cr_get_menu_items('navigation_menu') ?>
<?php foreach ($nav as $link):
if ($link->menu_item_parent == 0) : ?>
<a class="main-nav" href="<?= $link->url ?>"><?= $link->title ?></a>
<?php endif; endforeach; ?>

<!-- Display children items. (in its own wrapper `div`/`ul`/etc.) -->
<?php $_ids = []; ?>
<?php foreach ($nav as $link):
$parent = (int) $link->menu_item_parent;
if ( 0 !== $parent && ! in_array( $parent, $_ids ) ) : ?>
<!-- This `div` is just an example wrapper. -->
<div class="menu-<?= $parent ?>-subnav">
    <?php foreach ( cr_get_submenu_items( $nav, $parent ) as $clink ): ?>
    <a href="<?= $clink->url ?>"><?= $clink->title ?></a>
    <?php endforeach; ?>
    <?php $_ids[] = $link->menu_item_parent; ?>
</div>
<?php endif; endforeach; ?>

Upvotes: 5

Related Questions