WordPress Canada

Split Categories Into Two Columns

WordPress uses the template tag wp_list_categories() to output a list of categories on your blog. While it can be used anywhere it most commonly appears in the sidebar. By default, the list will be outputted as a single column. In this post I'll show you how to break the list into two columns. Why do this? For any number of reasons. Perhaps you have a wide sidebar and you want to fill in some of that unused real estate. Perhaps you just want a different look.

Open sidebar.php and look for ...

<?php wp_list_categories(); ?>

... and replace with ...

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

The above will split the list into two columns. Now we add a couple of lines to the style sheet so that the columns float properly.

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

Of course you'd want to adjust the above according to your theme's specs.

Here is a screen cap of the finished product.

• RSS
• Digg This
• Tweet This
• Stumble It
• Add to Delicious