2 or 3 column categories in sidebar

Ok, i’ll give you a basic example…

<?php
$myposts = get_posts( 'numberposts=20' );
$per_list = 10;
if($myposts) : $sidepost_num = 0;
	echo '<ul style="float:left;width:100px;overflow:hidden;padding:0;margin:0">';
	foreach($myposts as $sidepost) {
		$sidepost_num++; // Increment by 1 for each post displayed, first = 1, second = 2, and so on..
		echo '<li><a href="'.get_permalink($sidepost->ID).'">'.$sidepost->post_title.'</a></li>';
		unset($sidepost);
		// If you've reached $per_list (10), then end the current list and start a new one.
		if($sidepost_num == $per_list) {
			echo '</ul><ul style="float:left;width:100px;overflow:hidden;padding:0;margin:0">';
		}
	}
	echo '</ul>';
endif;
?>

All you have to do is count the posts as you display them, when you reach a particular counter, end the current element (a list in this case) and start a new one..

NOTE: Remove the inline styling (it’s faster for me to test that way) and do the CSS in your stylesheet.

Thanks for that, got it to work perfectly from the code you supplied.

Thanks for all your help, its much appreciated

First off I want to thank you t31os_ for providing this code. It has been of huge assistance to me in achieving the desired formatting on my current project. I’ve appropriated your code to work with the wp_list_pages tag. It works wonderfully, the only snag I’ve encountered is that the columns won’t balance out when there are an equal number of items in the lists.

For example, I have two columns displaying a total of 10 list items. For some odd reason, instead of balancing out with 5 and 5, it displays as 6 and 4. I’ve played with the code to try and fix the problem to no avail. When looking in the output source code I noticed that there is an extra /li before the final /ul closing tag. I suspect this may be causing the problem, but can’t figure out how to remove that unnecessary closing /li tag.

Here is my code:

<?php
			// Grab the pages
			$get_pages = wp_list_pages( 'echo=0&title_li=&child_of=28&sort_column=post_title' );

			// Split into array items
			$pages_array = explode('</li>',$get_pages);

			// Amount of page items (count of items in array)
			$results_total = count($pages_array);

			// How many pages to show per list (round up total divided by 3)
			$pages_per_list = ceil($results_total / 2);

			// Counter number for tagging onto each list
			$list_number = 1;

			// Set the pages result counter to zero
			$result_number = 0;
			?>

			<ul id="cat-col-<?php echo $list_number; ?>">
			<?php
			foreach($pages_array as $pages) {
				$result_number++;

			if($result_number % $pages_per_list == 0) {
				$list_number++;
				echo $pages.'</li>
			</ul>
			<ul id="cat-col-'.$list_number.'">';
			}
			else {
			echo $pages.'</li>';
			}
			}
			?>
			</ul>

Here is what the output looks like for the second column (the column displaying 4 items) when I view source:

<ul id="cat-col-2">
<li class="page_item page-item-14"><a href="https://localhost:8888/harris/advertising/music/test-advertising-1/" title="G – Test">G – Test</a></li>
<li class="page_item page-item-55"><a href="https://localhost:8888/harris/advertising/music/h-test/" title="H – Test">H – Test</a></li>
<li class="page_item page-item-57"><a href="https://localhost:8888/harris/advertising/music/i-test/" title="I – Test">I – Test</a></li>
<li class="page_item page-item-59"><a href="https://localhost:8888/harris/advertising/music/j-test/" title="J – Test">J – Test</a></li>
</li>
</ul>

Any help is greatly appreciated.

Okay, it appears as though I have found a solution. Whether it’s correct – I don’t know (my php skills are somewhat underdeveloped). It does work however. The one downside is that a 3rd empty unordered list is being spit out after the two that are actually requested. That and the rouge closing li tag is still there.

To solve my problem with the uneven columns I simply changed this:

// How many pages to show per list (round up total divided by 2)
$pages_per_list = ceil($results_total / 2);

To this:

// How many pages to show per list (round up total divided by 2)
$pages_per_list = $results_total / 2;

If what I’m doing is very bad, or if anyone can tell me how to eliminate the rogue unordered list and closing list item tag I’d appreciate it.

Ceil just rounds the number up..

Here, try this….

<?php
// Columns/lists
$col_spread = 2;
// Grab the pages
$get_pages = wp_list_pages( 'echo=0&title_li=&child_of=28&sort_column=post_title&depth=1' );
// Split into array items
$pages_array = explode('</li>',$get_pages);
// Amount of page items (count of items in array)
$results_total = count($pages_array);
// How many pages to show per list (round up total divided by 3)
$pages_per_list = ceil($results_total / $col_spread);
// Counter number for tagging onto each list
$list_number = 1;
// Set the pages result counter to zero
$result_number = 0;
?>
<ul id="cat-col-<?php echo $list_number; ?>">
<?php
foreach($pages_array as $pages) {
	$pages = $pages.'</li>';
	$result_number++;
	if(
		($result_number % $pages_per_list) == 0 &&
		($col_spread * $pages_per_list) != $result_number)
	{
		$list_number++;
		$pages .= '
		</ul>
		<ul id="cat-col-'.$list_number.'">
		';
	}
	echo $pages;
	unset($pages);
}
?>
</ul>

Only issue i had was with an extra list being placed on the end (fixed in the above)…

You need to set depth=1 else you’ll get nested sub-pages, which will muck up the explode..

Thanks for your help t31os_. It seems this new block of code has the same problem as the previous. It offsets the columns even when there is an even number in both (10 list items spread over two columns is formatted as 6 and 4 rather than 5 and 5). It has something to do with the rounding up function, because when I remove it, the columns are distributed properly. Is it necessary we include Ceil()? It works without it just fine.

I’m going to keep tinkering and see what happens. Thanks again!

I’m still not sure where to add the code in to display multiple columns. Which file should this go in?

Thanks!

That depends entirely on where you want it to be.

The original thread was relating to sidebar code, but there’s no reason you can’t use it elsewhere..