Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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
add comment

1 Answer

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.

share|improve this answer
add comment

Your Answer

 
discard

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.