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
- 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;}
- 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> - 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
