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>
<li>
<ul style="float: left;">
<li>
<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>
<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>
</li>
"; // Start making the first column (
"; // end of the first column
}
else { // For the second column and further
echo ‘
"; // end of the column
}
}</ul>
</li>
",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>
If you want to adjust the number of columns it would display, just change this line:
$columns = 6; // number of columns you want