2 or 3 column categories in sidebar

You could use multiple, customized wp_list_categories.

Thanks iridiax, but I dont see any parameter for dividing them in columns.

Category 1 Category 6
Category 2 Category 7
Category 3 Category 8
Category 4 Category 9
Category 5 Category 10

Something like that.

Can you share how can it be done please ?

Thanks.

Bump !

As iridiax said. Try using two wp_list_categories with custom parameters. First with included categories 1,2,3,4,5 and second with 6,7,8,9,10. Ok…it’s not an automatic solution but it does what you want. Hmm i think I saw on some blog a plugin to make it automatic but really don’t remember where…hmm try this: https://www.dagondesign.com/articles/multi-column-category-list-plugin-for-wordpress/

Thanks alainS, actually I tried that, but did not work in WP 2.7, so I am looking for a good solution and automatic.

Anyone ?

Thanks.

this should work:

<?php
$cats = explode("",wp_list_categories('title_li=&echo=0&depth=0&style=none&hierarchical=1'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left">
<?php echo $cat_left;?>
</ul>
<ul class="right">
<?php echo $cat_right;?>
</ul>

It will automatically split your categories in half

Great! Thanks btdoyle.

RE: btdoyle

I’ve been using that code, but trying to break it up into 4 columns. Anything greater than 2 columns doesn’t work properly.

<?php
				$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
				$cat_n = count($cats) - 1;
				for ($i=0;$i<$cat_n;$i++):
				if ($i<$cat_n/4):
				$cat_one = $cat_one.'<li>'.$cats[$i].'</li>';
				elseif ($i>=$cat_n/4 && $i<($cat_n/4)*2):
				$cat_two = $cat_two.'<li>'.$cats[$i].'</li>';
				elseif ($i>=($cat_n/4)*2 && $i<($cat_n/4)*3):
				$cat_three = $cat_three.'<li>'.$cats[$i].'</li>';
				elseif ($i>=($cat_n/4)*3):
				$cat_four = $cat_four.'<li>'.$cats[$i].'</li>';
				endif;
				endfor;
			?>
			<ul class="clientsCol"><?php echo $cat_one;?></ul>
			<ul class="clientsCol"><?php echo $cat_two;?></ul>
            <ul class="clientsCol"><?php echo $cat_three;?></ul>
            <ul class="clientsCol"><?php echo $cat_four;?></ul>

This sounds like exactly the code I need but – here is a stupid question – in what file does the code get edited? I know… I know… doh!

@funkboybilly – what do you mean by not working properly? This heavily depends on the number of entries you have in your categories. For example if you have 10 categories on your blog, a split in 4 will output a first line with 3, a second line with 2, a third line with 3 and a forth line with 2 categories.

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

If you stick to keeping the WP generated elements you be able to control the list a bit more.

As long as you’re only showing top-level categories, without children, the following should work fine.. ( i imagine it will mess up with a hierarchal type display of cats )

<?php
$get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
// Get cats 

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

$columns = 4;
// How many columns (virtual)

$cats_shown = 0;
// Don't touch this, this is just a counter (used below)

echo '<ul style="display:inline;">';

foreach($cat_array as $category) {
	$cats_shown++;

	// The 2 lines below can be removed if you apply the style definitions to the classes (ie. cat-item, cat-item a etc..)
	// This was just quicker and easier for me to use whilst testing the code.
	$category = str_replace('<li','<li style="display:inline"',$category);
	$category = str_replace('<a href','<a style="width:160px;display:block;float:left" href',$category);

	if($cats_shown % $columns == 0) {
		// If the counter is a multiple of the columns to show
		print $category.'</li></ul><br /><ul style="display:inline;">';
	}
	else {
		// Else just a regular item
		print $category.'</li>';
	}
}
echo '</ul>';
?>

NOTE: I have used inline styling simply while i was testing. However since i’ve left WordPress to generate the list elements the classes to style the elements are available, so it can be totally done away with if you apply the style defs directly in your CSS instead.

display:inline is supported across browsers, but i’m not sure about widths of anchor(link) elements, so it may require a little tweaking..

Without CSS (inline or in the style.css) the code above will simply do..

[post]
[post]
[post]
[post]

[post]
[post]
[post]
[post]

The key here was setting each list to display inline, then they end up like this..

[post] [post] [post] [post] 

[post] [post] [post] [post]

In order to get a fixed width (which you need to make the list columns match each other) i applied the width to the link element.

At least this way you retain all the WordPress style classes etc…

Hope that helps…

thanks for that t31os_

I used your code on my website and it worked great…

one thing though, each list only displays 3 categories. I am looking for a 3 column list that each will hold 15 categories, could you please advise how this could be done? I am looking at displaying the categories as part of a directory website.

Thanks for your help

Code above shows for 4 categories per row (so like 4 columns). There’s a variable, right near the top..

$columns = 4;
// How many columns (virtual)

Set to 3, and it’ll work for 3 columns.

[cat][cat][cat]
[cat][cat][cat]
[cat][cat][cat]
[cat][cat][cat]
[cat][cat][cat]

and so on, until it runs out of cats to list…

If you want 5 across, 3 down (opposite to above – 15 total), then set the variable to 5.

As long as you adjust the width set on the link elements to accomodate the room on the page then you can use any value you like there.

Thanks for that,

I changed it like you said and it still seems to do the same thing. I have uploaded a screenshot to show you how it looks with your code: screenshot and here is how i am trying to get my code to look: result

Is there anything i could change to make it look like that?

Thanks