How can I fetch the next level of the currently selected main menu (hierarchical menu)?

Question

I have the following structure (defined at Appearance > Menu):

• foo
  • fii
  • faa
  • fee
• bar
  • boo
  • bee
  • bii

Now, in my theme I have one horizontal menu that shall always display

foo | bar

Below that, there's another horizontal menu which, when foo is clicked, should display:

fii | faa | fee

When bar is clicked, that same menu shall display:

boo | bee | bii

Only the sub-menus of the currently selected main menu (foo/bar) shall be displayed.

How can this be achieved?

Answer 1

You can accomplish this in at least two ways:

1) Via CSS. Use the appropriate class selectors (e.g. current-page-item, current-page-parent, current-page-ancestor) to display the appropriate sub-menu.

2) Separate calls to wp_list_pages(). The first call will have a depth=1 argument passed, and the second will determine the ID of the current parent page, and output accordingly, using the "child_of" argument, e.g.:

<?php
global $post;
$current_page_parent = ( $post->post_parent ? $post->post_parent : $post->ID );

wp_list_pages( array(
     'title_li' => '',
     'child_of' => $current_page_parent,
     'depth' => '1' )
);
?>

There are probably other ways, as well.