Breaking Categories into Columns

by Admin on November 22, 2008

Welcome back!

Google Buzz

Now, I’ll tell you about a Wordpress hack by which you can break categories into columns as shown below:

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. 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(); ?>

Now, we will try and split the categories into two columns. Replace the above code with the following :-

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

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:140px;}
.left {float:left; width:140px;}


Related Posts
Related Websites

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

</