2 or 3 column categories in sidebar

It’s all in the CSS, get rid of the display:inline, set a float on each UL element (apply width – should do for floated elements), set columns (which will now act as rows) to something like 10 or 15 (however many you want to list downwards before a new list), and that should do it..

If you want to divide the total results evenly across 3 columns (automagically) i’ll need to modify the above code to suit what you want better.

Remember, lists go downward, so just get rid of all the CSS stuff, then start with floating each list (UL tag) next to each other… and work from there…

I can help further if need be…

Thanks again for your help, its much appreciated…

If you want to divide the total results evenly across 3 columns (automagically) i’ll need to modify the above code to suit what you want better.

That is exactly what i am looking for… is this easy to implement?

The result that i shown in the screenshot has the

floated and a set width added to it.

Try this…

<?php
// Grab the categories - top level only (depth=1)
$get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
// Split into array items
$cat_array = explode('</li>',$get_cats);
// Amount of categories (count of items in array)
$results_total = count($get_cats);
// How many categories to show per list (round up total divided by 3)
$cats_per_list = ceil($results_total / 3);
// Counter number for tagging onto each list
$list_number = 1;
// Set the category result counter to zero
$result_number = 0;
?>
<ul class="cat_col" id="cat-col-<?php echo $list_number; ?>">
<?php
foreach($cat_array as $category) {
	$result_number++;

	if($result_number == $cats_per_list) {
		$list_number++;
		echo $category.'</li>
		</ul>
		<ul class="cat_col" id="cat-col-'.$list_number.'">';
	}
	else {
		echo $category.'</li>';
	}
}
?>
</ul>
<!--
/* All UL elements */
.cat_col {
	width:200px;
	float:left;
	display:block;
	padding:0;
	margin:0 5px 0 0;
	overflow:hidden;
}
	/* All LI elements */
	.cat_col li {
		clear:left;
		display:block;
		padding:8px;
		margin:1px 0 0 0;
		width:200px;
	}

#cat-col-1 {
	/* CSS for first list only */
}
#cat-col-2 {
	/* CSS for second list only */
}
#cat-col-3 {
	/* CSS for third list only */
}
-->

The commented section at the bottom is some example CSS.

many thanks for that.

The list now seems to have gone into 2 columns, with the first column only showing 1 category and the second holding the rest (around 20 or so categories.) there seems to be no third column….

I had a look at the code in firebug and no 3rd column seems to be generated by the code.

Sorry for the hassle!

Hold on i’ll test it… ?? Just need to make some more categoies..

Ok yes, spotted the mistake (plus another).

<?php
// Grab the categories - top level only (depth=1)
$get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
// Split into array items
$cat_array = explode('</li>',$get_cats);
// Amount of categories (count of items in array)
$results_total = count($cat_array);
// How many categories to show per list (round up total divided by 3)
$cats_per_list = ceil($results_total / 3);
// Counter number for tagging onto each list
$list_number = 1;
// Set the category result counter to zero
$result_number = 0;
?>
<ul class="cat_col" id="cat-col-<?php echo $list_number; ?>">
<?php
foreach($cat_array as $category) {
	$result_number++;

	if($result_number % $cats_per_list == 0) {
		$list_number++;
		echo $category.'</li>
		</ul>
		<ul class="cat_col" id="cat-col-'.$list_number.'">';
	}
	else {
		echo $category.'</li>';
	}
}
?>
</ul>
<!--
/* All UL elements */
.cat_col {
	width:200px;
	float:left;
	display:block;
	padding:0;
	margin:0 5px 0 0;
	overflow:hidden;
}
	/* All LI elements */
	.cat_col li {
		clear:left;
		display:block;
		padding:8px;
		margin:1px 0 0 0;
		width:200px;
	}

#cat-col-1 {
	/* CSS for first list only */
}
#cat-col-2 {
	/* CSS for second list only */
}
#cat-col-3 {
	/* CSS for third list only */
}
-->

Should work as expected now.. ??

@funkboybilly: The problem is with your ul php code.
<ul class=”clientsCol”><?php echo $cat_one;?>
should be
<ul class=”clientsCol”><?php echo $cat_one; ?>
Note the space between “$cat_one;” and “?>”. This applies to the other three columns. ??

Actually it’s generally fine to do that without a space.. I very much doubt that will resolve the issue..

The ; is the terminator for that line of code, so whether there’s a space before the closing PHP ?> , or not shouldn’t matter in the slightest..

Ok yes, spotted the mistake (plus another).

<?php
// Grab the categories – top level only (depth=1)
$get_cats = wp_list_categories( ‘echo=0&title_li=&depth=1&hide_empty=0’ );
// Split into array items
$cat_array = explode(”,$get_cats);
// Amount of categories (count of items in array)
$results_total = count($cat_array);
// How many categories to show per list (round up total divided by 3)
$cats_per_list = ceil($results_total / 3);
// Counter number for tagging onto each list
$list_number = 1;
// Set the category result counter to zero
$result_number = 0;
?>
<ul class=”cat_col” id=”cat-col-<?php echo $list_number; ?>”>
<?php
foreach($cat_array as $category) {
$result_number++;

if($result_number % $cats_per_list == 0) {
$list_number++;
echo $category.’

<ul class=”cat_col” id=”cat-col-‘.$list_number.'”>’;
}
else {
echo $category.”;
}
}
?>

<!–
/* All UL elements */
.cat_col {
width:200px;
float:left;
display:block;
padding:0;
margin:0 5px 0 0;
overflow:hidden;
}
/* All LI elements */
.cat_col li {
clear:left;
display:block;
padding:8px;
margin:1px 0 0 0;
width:200px;
}

#cat-col-1 {
/* CSS for first list only */
}
#cat-col-2 {
/* CSS for second list only */
}
#cat-col-3 {
/* CSS for third list only */
}
–>

Should work as expected now.. ??

Brilliant, works perfectly!

Thank you very much for your help, I wouldn’t have been able to do what you have done and am very grateful to people like you who take the time to help others. Thanks again

sorry to bother you again,

is there any way i could manipulate the above code to display latest posts added in 2 columns?

Im trying to learn PHP at the moment but am having some difficulty understanding it all. I can grasp the basics but i think this is a little bit out of my depth!

Thanks

Sure you can..

Change.

$cats_per_list = ceil($results_total / 3);

for.

$cats_per_list = ceil($results_total / 2);

Ceil is just a rounding up function, the slash is to “divide by”..

thanks, is that to display the posts? or is there something else i would need to change also?

Thanks again.

That’s how many list elements are used…

We work out how many lists to make by dividing the total amount of categories by 2, or 3, or whatever numeric value you place after the / in the line of code mentioned above…

So if we wanted to use 4 lists, we update that line to..

$cats_per_list = ceil($results_total / 4);

$results_total is the amount of categories found
/ divides that total by 2, 3, 4 or whatever we place there (so 4 in this example)

The number is rounded up so the first lists are given more posts then the last ones if the value divided by 2 (3 or 4 or whatever) doesn’t equal a valid amount, like (for example) 6.333333, and so on… If the total is divisible equally then the lists will have equal amounts of categories listed in them, else the last list is given less items (looks better on the page).

Oh sorry i see you were asking about posts.

You need different code for posts..

If you do a search for “posts columns” (not too general or too specific) you should find any number of threads that have covered splitting posts across columns.. i know i’ve at least answered such questions a couple of times.

Save me re-writing code i’ve already given answers to before… ??

If you have trouble finding a thread that covers what you want, post back and i’ll have see if i dig one up for you… (you could also look through my profile page – you should eventually find a related thread).

t31os_,

thanks for that, i have had a look around your profile and found a couple of things about displaying posts in columns but i am not sure if they apply to what i am trying to achieve?

Basically i am trying to show the 20 most recent posts in 2 columns (10 in each).

thanks