Post Pic

Display your categories in two columns

The stadard wp_list_categories() functions echoes a list of all your categories. Let’s see how we can easily force the display of categories on two columns.

Simply paste the following piece of code where you'd like your categories to be displayed:

<?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/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>

Then, just save the file, and enjoy!

Credits goes to Blog Oh Blog for this awesome recipe!

49 Responses

May 20 2009 13:17

Wow, very useful recipe! I will consider this when redesigning my blog

May 20 2009 14:18

good recipe, i will use it soon in my blog

May 20 2009 14:51

This is a great and very useful information for me. A little later I will try to set this on my display. Thank you for your instructions.

May 20 2009 16:00

Hi. Thanks for recipes :) I’m using widget ready theme. How can i use this codes. I’m added these codes my functions.php and sidebar.php but it didnt work.

May 20 2009 21:12

Excellent hack. It’s perfect for blogs with wide sidebar and plenty of categories.

May 20 2009 21:40

Nice little trick, I’ve used CSS tricks to usually move the li left or right. I like this one.

May 21 2009 06:26

What about CSS only:

li.mycat{float:left; display:inline; widht:50%}

Maybe I’m wrong…

May 21 2009 19:25

Thanks for recipe :)

May 21 2009 20:47

It’s a good idea.

You can use this plugin too : http://tinyurl.com/ogokme

May 23 2009 17:55

Interesting recipe. Thanks to you and BlogOhBlog

May 27 2009 17:59

It’s fantastic recipe and thanx for sharing this with us.

May 31 2009 11:51

Nice Snippet. Thanks for sharing – appreciate.

Jun 01 2009 14:56

Thanx for the Trick. :)

Jun 02 2009 11:18

Is there a way to sort those columns? If say I wanted some categories on the left and the rest on the right?

Jun 02 2009 16:19

Really nice recipe! Gonna cook it at home :) !

Jun 02 2009 20:24

Thank you, I’m using this on a current project. Comes in handy.

Jun 05 2009 10:46

nice tips… i wil try in my weblog.thanks

Jun 06 2009 15:47

Great idea for wide content boxes. Thanks, I might try this on one of my new themes for ThemeForest.

Jun 07 2009 19:13

Many many thanks for this great technique. It will definitely help me a lot..

Jun 07 2009 21:00

Fantastic Recipe. Thanks.

Jun 08 2009 07:52

Nice nice.. Saves some good space..

Jun 14 2009 12:02

Well this is one tasty recipe and a good snippet. The trick is a nice way of displaying the neat categories on the two sides. Good job with this one.

Till then,

Jean

Jun 16 2009 13:29

Nice tip! Now for a two column tag cloud…. anyone know how to do that?

Jun 23 2009 12:53

nice trick! thanks..

Jul 01 2009 17:36

Great recipe. Thanks for sharing.

Jul 07 2009 00:37

Thank you for the great recipe on posting wordpress categories in two columns. This has worked great on my website, and really has cleaned up the interface. It looks a lot nicer showing two columns of categories instead of one really…long…list of categories.

Keep up the great work on the website, I find it really informative.

Jul 10 2009 09:25

Thanks for the tips jean. I’ve tried in my blog.
This is useful for blog that have many of categories, but only have short sidebar space ;)

Jean, do you have any sniplet to display blogroll in two columns?

Jul 16 2009 19:34

Thanks for the trick.
I will try it ASAP, coz my blog’s category is very long like a tail monkey :)

Aug 18 2009 05:05

great recipe, thanks

Aug 22 2009 18:00

Nice! Thanks for the great tip.

Aug 23 2009 08:46

Thanks, anyway …. Is there a way to sort those columns? If say I wanted some categories on the left and the rest on the right?

Sep 23 2009 04:28

The Recipe worked for me, keep up the good work!

Dec 04 2009 20:13

It isn’t working. I get my categories arranged in two lists one underneath the other, divided by a blank line. Like this.

Cat 1
Cat 2
Cat 3
Cat 4

Cat5
Cat6
Cat 7
Cat 8

Anybody know what my problem is?

Dec 04 2009 21:40

@Adam : You have to style the lists with CSS :)

Jan 21 2010 15:21

Hi Jean,

I remember when you first published this recipe, very cool! Question – is it possible to do this with wp_list_bookmarks instead of categories?

Jan 21 2010 22:06

@Chris M : Haven’t tried it, but in theory it should work :)

Jan 21 2010 22:08

I tried it out and played around for a while, but it wasn’t happening unfortunately :/

Perhaps I missed something small..

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required