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?

1 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.:

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.