|
|
|
Creating a multi-column list from WordPress’ default function (wp_post_page()) is a pain.
I was tasked to create a multi-column list and realized there wasn’t a simple argument to do so.
With that said, I have to create a code which should do the job…and it does the job so well… The entire code should be visible on the bottom part, however, allow me to explain what’s happening.
Normally, you’ll simply call WordPress’ wp_list_pages() function:
wp_list_pages('title_li=&echo=0&child_of='.$post->ID));
…but that would display all the links, in one row, and if you’ve had a couple of links, you’d probably end up a very long page and you’ll actually want to place those links in column. Allow me to share this code below. Use it in replace of that simple wp_list_pages() call.
/////// Configure this part for the number of columns that you want /////////
$columns = 6; // number of columns you want
////////////// End of Configuration ////////////////
$page_s = explode("<ul>",wp_list_pages('title_li=&echo=0&child_of='.$post->ID)); // Get the number of links that we need to generate
$div_by = (int) (count($page_s) / $columns); // ...divisible by
for ($i = 1 ; $i <= $columns ; $i++) { // Loop through the desired number of columns
if ($i == 1) { // If it's the first column
echo "<ul style="float: left;">"; // Start making the first column (<ul>)
for ($x = 0 ; $x <= ($div_by); $x++) { // Loop through all the links upto it's "divisibility"
echo $page_s[$x].''; // show the first columns of with "X" number of links
}
echo "</ul>"; // end of the first column
}
else { // For the second column and further
echo '<ul style="margin-left: 20px; float: left;">'; // Start building the column
$link_num = $i * $div_by; // Get the number of links this column from this column
$prev_link_num = $div_by * ($i-1); // Get the number of links from the previous column
/* List all the links, but limit them from the previous column's total number of links and the number of links you ought to display which is once defined by "$div_by" */
for ($j = ($div_by+1); ( ($j < count($page_s)) && ($j <= $link_num)) ; $j++) {
if ($j > $prev_link_num) // We need to display the links that are not yet displayed
echo $page_s[$j].''; // List all the links for this column
}
echo "</ul>"; // end of the column
}
}
If you want to adjust the number of columns it would display, just change this line:
$columns = 6; // number of columns you want
Hope that helps. |
|
