How To Display Two Columns For Categories In WordPress

Posted by Nile | Posted in Tutorials | Posted on 03-29-2010 | 2 Comments

Tags: ,

wordpress-tricks

Displaying two columns for categories in your WordPress is not too hard. Just takes a little php, html, and css. You can put this in your posts, pages, or sidebar.

We are taking the usual category code for WordPress


<?php wp_list_categories(); ?>

and replacing it with the following code. This php splits up each category and into columns, much like splitting odds and evens.


<?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].'';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>

After you have put the above code you are ready to add your HTML right after it. Remember you need to make sure to remember your css class definition, because you will be adding it to your theme’s stylesheet. Remember you can use your own definitions, but remember to make sure you are not already using them for another part of your theme.


<ul class="alignleft">
<?php echo $cat_left;?>
</ul>
<ul class="alignright">
<?php echo $cat_right;?>
</ul>

Now that you have the php and html done, you need to add your css. In the case of this tutorial, I have used alignleft and alignright for the classes.


.alignleft {
float: left;
}
.alignright {
float: right;
}

Of course, if you want to play with the css and do other things, by all means go ahead.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • FriendFeed
  • Identi.ca
  • LinkedIn
  • Posterous
  • Reddit
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • Yahoo! Buzz

Related posts:

  1. Display Posts From A Category In WordPress
  2. How to Display A User Welcome Message In WordPress
  3. Creating A Simple Author Profile Page In WordPress

About Nile Flores

Web and graphic designer fom Southern Illinois. I love to work with WordPress.

Connect with Nile at: Twitter | Facebook | LinkedIn

Nile has written 92 articles at WPAddict.

Comments (2)

Twitter Comment


#wp #wordpress: How To Display Two Column For Categories In WordPress [link to post]

Posted using Chat Catcher

Is there any way to display them similiar to DDMultiColCats? It auto-breaks the categories into two – and it worked with my last theme, but not this new one, so I'm looking for something new.
My recent post Vampire Knight- Episode 13 English Dubbed

Write a comment