WordPress Hack : Span Category Listing Over 2 Columns

In some WordPress Blogs the in the sidebar the category listing are long and take up lot of sibebar space.Here’s a trick that can be used to span the category listing into 2 columns saving more sidebar space.

1.Old Style 2. New Spanning Style

To get your category listing like that of (2), follow these steps

1. Open your themes style sheet and add these lines
   

   .widget { padding:0 0 10px 0;}
   .widget p { padding:2px; }
   .widget h4 { margin:0 0 10px 0; text-transform:uppercase; color:#D90202; font-weight:bold; font-size:10px; border-bottom:1px solid #4cb6fc; border-top:1px solid #4cb6fc; background:#cdeafa; padding:8px 15px; }

   .widget ul { list-style-type:none; padding:0 0 0 10px;}
   .widget li { font-size:12px; padding:6px 0 6px 12px; no-repeat; background-position:0px 12px;}

   .widget li a { font-size:12px; color:#333333; }
   .widget li a:hover {color:#0070b2; }

   .widget.tags { text-align:justify; width:226px; overflow:hidden;}
   .widget.tags a {color:#808080; }

   ul.right {float:right; width:132px;}
   ul.left {float:left; width:120px;}

   .c {clear:both;}

2. Open your sidebar.php and add for the following lines
   

   <div class=”widget”>
   <h4>Categories</h4>
   <?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>
   <div class=”c”></div>
   </div>

3. You can use 4 variations of depth by changing the value of depth in the 4th line of Step 2 to 0,-1,1,2
   
   0 – All Categories and child Categories (Default).
   1 – All Categories displayed in flat (no indent) form (overrides hierarchical).
   1 – Show only top level Categories
   n – Value of n (some number) specifies the depth (or level) to descend in displaying Categories

Liked It ?? Share It 🙂

Facebook

Stumbleupon

Twitter

Google

Diggit

Email

Buffer