WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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