# Can I display submenus in groups, using wp_list_pages?

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...

• 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. – MikeSchinkel Dec 28 '10 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 Dec 28 '10 at 11:13
• 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 Dec 28 '10 at 11:18

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.