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
Liked It ?? Share It 🙂Share on FacebookShare on StumbleUponTweet about this on TwitterShare on Google+Digg thisBuffer this page
Similar Post  How To Do A/B Testing On Post Titles For Better Clicks Through Rate

4 comments

Leave a Reply

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