Say I have top-level(parentless) pages called Fruit, Animals, Cars.

When, say, Fruit is selected I would like to show links to the individual fruit pages below. I would like to be able to dislpay these fruits (or animals, or cars) in several groups with a space between each group of fruits.. a bit like this

|   Fruit       |  Animals  |  Cars  |
|   Apple       |           |        |
|   Kiwi        |           |        |
|   Watermelon  |           |        |
|   Banana      |           |        |
|   Lemon       |           |        |
|   Strawberry  |           |        |
|   Raspberry   |           |        |

You can see in this case, I have roughy divided the fruit by color, putting a space inbetween. For cars or animals it might be another criteria. This criteria does not have to be explicitly named anywhere. So I wondering how to output this list, in a way which requires little techinical ability for the person who enters the pages in the backend.

At the moment I do this to output the child pages:

if( $post->post_parent )
    $children = wp_list_pages('depth=1&title_li=&child_of='.$post->post_parent.'&echo=0'); 
    $children = wp_list_pages('depth=1&title_li=&child_of='.$post->ID.'&echo=0');

echo $children;

But I can't see a way to limit the output to categories, or something similar, using wp_list_pages. The nearest I can see is the 'authors' option, but it doesn't make much sense to login as different users to create different blocks in the menus...

  • Any reason you just don't use the menu system and no wp_list_pages()? The menu system was added for a reason, to make things like this easier. Commented Dec 28, 2010 at 1:17
  • the menu system seems like too much work for the non-technical person who will maintain the website. if I did use it, how would i get the gaps i described above?
    – cannyboy
    Commented Dec 28, 2010 at 11:13
  • 1
    ok, i solved this problem by having pages with a blank title (just a few spaces), and placing it using the Order number. This creates a gap in the menu list. It's horribly hacky though
    – cannyboy
    Commented Dec 28, 2010 at 11:18
  • 7
    Please add your solution as answer and mark it as the solution.
    – hakre
    Commented Feb 6, 2011 at 16:24

3 Answers 3


You could maybe choose to use a tree like that:

  • Fruits
    • Color1
      • Apple
      • Watermelon
    • Color2
      • Banana
      • Lemon
  • Level1
    • Level2
      • Level3

This way, you can, in your theme, hide the second level.

Hope that helps.


If you would use the menu system (like Mike suggested) you can set a class to the menu-item that you want to separate.

In your example it would look kinda like:

  • Apple
  • Kiwi
  • Watermelon (class = separate)
  • Banana
  • Lemon (class = separate)
  • Strawberry
  • Raspberry

And then you could style the separate class with a bottom-border or bottom-margin or both if you like.

And if your not satisfied with just a simple separater you can add color classes, like green, yellow, red and add them to each and every menu-item. This time you could style every li with a background of that color.

If you can't find the class-item in the menu system, check screen options > Show advanced menu properties > CSS Classes.


I recently had a problem with wp_list_pages() being rather limited...

So I created a custom version of that function and published it to my blog @ codeFX.biz

Based on this function you can do whatever you want - without being limited at all.

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.