Display list of wordpress categories in two columns

May 21, 2009 · Print This Article

Usually in WordPress, the following code is used to call the categories list (you can find it in one of the sidebar files):

<?php wp_list_categories(); ?>

Normally when the list of categories is displayed in the sidebar or on any part of the theme, it displays in a single column. Through the following hack, you can split your categories list evenly into two or more columns which can save space and not make your pages longer.

Now, we will try and split the categories into two columns. Simply paste the following 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;
$cat_col = round($cat_n / 2);
for ($i=0;$i<$cat_n;$i++){
 if ($i<$cat_col){
  $cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
 }
 elseif ($i>=$cat_col){
  $cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
 }
}
?>
<ul class=”left”>
<?php echo $cat_left;?>
</ul>
<ul class=”right”>
<?php echo $cat_right;?>
</ul>

Basically the above code will split your categories and put them into two lists (left and right). Now all you have to do is style them so that they float left of each other. Add this code to your style.css file:

.right {float:left; width:200px;}
.left {float:left; width:200px;}

You might have to make some cosmetic adjustments in the above code so do it at your own pace.

2009-11-28 update code.


Your choice for site templates and wordpress themes

Comments

2 Responses to “Display list of wordpress categories in two columns”

  1. cognitions on November 25th, 2009 12:39 am

    Thank you for this.

    I posted this code on the wo forum today to see if someone can adapt it to display wp_list_pages over 2 columns.

    Not sure if you have time to take a look yourself. I fiddled with it for ages and gave up.

    Again, thanks for sharing the code.

    http://wordpress.org/support/topic/335158?replies=1#post-1292291

  2. Live on November 28th, 2009 9:33 pm

    You can get Display list of wordpress pages in two columns code from
    http://www.livexp.net/wordpress/display-list-of-wordpress-pages-in-two-columns.html

Got something to say?

You must be logged in to post a comment.