Ask your WordPress questions! Pay money and get answers fast! (more info)

Sorting wp_list_pages(); into Columns?

  • SOLVED

Hi Experts,

I am looking to create a sitemap page template that automatically sorts the pages into columns rather than just having a long list of pages. I followed a few online tutorials but none of them achieved the effect I am after.

I would like to have each (parent+children+ancestors) to be in its own column. (ie. if I have 6 parent pages all with children and ancestors, there should be 6 columns total)

I'm looking to achieve a similar look to Apple's sitemap page (just the columns not the seperation headers): http://www.apple.com/sitemap/

I thank you in advance for your support.

Answers (1)

2011-01-06

Denzel Chia answers:

Hi,

I believe this is what you want.

The following code does a database query for all pages without post parent.
Which means they are the ancestors. Then we do a wp_list_pages of child of these ancestors.
Each group is individually wrapped in a <div class='sitemap'> for your css style.


<?php

//get all ancestor pages, pages with no post parent
global $wpdb;
$result = $wpdb->get_results("SELECT ID, post_title, guid FROM $wpdb->posts WHERE post_type = 'page' AND post_parent = 0 AND post_status = 'publish'");

//loop result from above database query and list child pages of ancestors
foreach ($result as $res){
echo '<div class="sitemap">';
//this is the ancestors
echo "<a href='$res->guid'>$res->post_title</a>";
//prepare ancestor id for wp_list_pages
$ancestor_id = $res->ID;
//list all child and grand child of ancestor page
wp_list_pages("title_li=&child_of=$ancestor_id");
echo '</div>';
}

?>


Thanks,
Denzel


WP Answers comments:

This looks great. Excellent work.

Would it be possible to customize this a bit further?

Can we determine which pages have no children/ancestors, and combine those together into a single column? This way we don't have a full column for pages that are all alone.

ie: if Home, Contact, and Sitemap were on their own, they would get listed together in the same column:

-Home
-Contact
-Sitemap

I really appreciate your help.


Denzel Chia comments:

Hi,

I am working on it now.

I will make that into two functions, one that prints only those with children and another prints without children.

I would appreciate if you could bump up the price money to $20.

Thanks.
Denzel


WP Answers comments:

You got it bud. I will up the prize to $20 right now.

Thank you very much. You are a lifesaver.

Cheers.


Denzel Chia comments:

Hi,

Here is what you want. Explanation is in code comments.


<?php

function five_get_ancestors(){
//get all ancestor pages, pages with no post parent from wordpress database
global $wpdb;
$result = $wpdb->get_results("SELECT ID, post_title, guid FROM $wpdb->posts WHERE post_type = 'page' AND post_parent = 0 AND post_status = 'publish'");
return $result;
}

function five_print_ancestors_with_child(){
//get ancestors
$result = five_get_ancestors();
if($result){
//loop result from above database query and list child pages of ancestors
foreach ($result as $res){
//prepare ancestor id for wp_list_pages
$ancestor_id = $res->ID;
//get all child and grand child of ancestor page
$children = wp_list_pages("title_li=&child_of=$ancestor_id&echo=0");
//if there is children
if($children){
echo '<div class="sitemap_with_child">';
//this is the ancestors
echo "<a href='$res->guid'>$res->post_title</a>";
//this is the children
echo $children;
echo '</div>';
}

}
}

}

function five_print_ancestors_without_child(){
//get ancestors
$result = five_get_ancestors();
if($result){

//prepare div to contain all pages without children
echo '<div class="sitemap_without_child">';
echo '<ul>';
//loop result from above database query and list child pages of ancestors
foreach ($result as $res){
//prepare ancestor id for wp_list_pages
$ancestor_id = $res->ID;
//check if got any child and grand child of this ancestor page
$children = wp_list_pages("title_li=&child_of=$ancestor_id&echo=0");
//if there is no children
if(!$children){

//this is the ancestors only
echo "<li><a href='$res->guid'>$res->post_title</a></li>";

}

}

echo '</ul>';
echo '</div>';
}

}

//print out results, all no child first in one div,
//than follow by those with children in their own div container.
five_print_ancestors_without_child();
five_print_ancestors_with_child();

?>


Thanks.
Denzel


Denzel Chia comments:

Hi,

Thanks for increasing the price.

Regards,
Denzel


WP Answers comments:

Hi Denzel,

It's almost there!

The output of the pages is spot on, but the div's aren't functioning quite right.

All of the pages are wrapped in only one div (class="sitemap_without_child").

Can you please look over the code and adjust so that each 'page block' is wrapped in its own div? (the individual div's worked in the first code you posted)

Thanks


Denzel Chia comments:

Hi,

five_print_ancestors_with_child() will print out those with child in <div class="sitemap_with_child">

Those with child will have their own <div class="sitemap_with_child">

five_print_ancestors_without_child() will print out those without child in <div class="sitemap_without_child">

Those without child will be combined into one <div class="sitemap_without_child">,
It will be in one long list.

There are two separate functions to print.

Hope it is clear to you.

Thank.


WP Answers comments:

My apologies.

Everything is functioning perfectly. I didn't even see the individual divs. Its getting late over here. ^_^

Thank you again. I really appreciate your help on this one.

Cheers.