Can I display submenus in groups, using wp_list_pages?

Question

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'); 
else
    $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...

Answer 1

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.

Answer 2

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.

Answer 3

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.