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 would like to create a navigation menu where I will be displaying two level pages.

To illustrate that:

  • Parent 1
  • Parent 2
  • Parent 3 (current)
    • Child 1
    • Child 2
    • Child 3
  • Parent 4

So I would like to display all the parent pages in my navigation container but only display children pages when the user is currently on its parent page.

share|improve this question
up vote 1 down vote accepted

This is pretty easy, as WordPress sets css classes for the parent pages. Default we hide all sublists (ul) from the menu with

.menu ul {
    display: none;

Then when the parent page is selected we use the css classes that are set by WordPress to show the sublists again.

.menu .current_page_ancestor, .menu .current_page_parent {
    display: block;

So all you need is this in your template


<ul class="menu">
    <?php wp_list_pages('title_li=') ?>

and this in your css file.


.menu ul {
    display: none;

.menu .current_page_ancestor > ul, .menu .current_page_parent > ul {
    display: block;
share|improve this answer
I can't believe that was so easy, Thanks very much Horttcore – jmysona May 19 '11 at 12:26

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.