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.

category-listing category-listing-spaning

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

    – 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
Similar Post  Check If Port A Open On Your Network / ISP Online Using Open Port Checker Tool

4 comments

  1. Ricky Reply

    Thanx for the code. I will try out this code and see whether it works or not. Are you using the same code?

  2. Udegbunam Chukwudi Reply

    Nice tip man. Any ideas if this can be applied to categories as well? I’m planning on removing my archives and categories from the tabbed sidebar as it seems nobody is visiting them 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.