Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to list x number of categories. I'm using wp_list_categories function, it generates the following markup

<li class="cat-item cat-item-1"><a href="#">Uncategorized</a></li>
<li class="cat-item cat-item-2"><a href="#">Category 2</a></li>
<li class="cat-item cat-item-3"><a href="#">Category 3</a></li>
<li class="cat-item cat-item-4"><a href="#">Category 4</a></li>
<li class="cat-item cat-item-5"><a href="#">Category 5</a></li>

However I need to wrap every two li items inside a div, For example:

<div class="one">
    <li class="cat-item cat-item-1"><a href="#">Uncategorized</a></li>
    <li class="cat-item cat-item-2"><a href="#">Category 2</a></li>
</div>
<div class="two">
    <li class="cat-item cat-item-3"><a href="#">Category 3</a></li>
    <li class="cat-item cat-item-4"><a href="#">Category 4</a></li>
</div>
<div class="three">
    <li class="cat-item cat-item-5"><a href="#">Category 5</a></li>
</div>

How I can do that? Thanks.

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

List of possibilities

You got exactly two options to alter the output of wp_list_categories()

  1. Use a filter after the MarkUp was generated and re-format it:

    add_filter( 'wp_list_categories', 'wpse88292_reformat_list_cats', 10, 2 );
    function wpse88292_reformat_list_cats( $output, $args )
    {
        // Reformat `$output` here
        // You can use `$args` to only this when condition X == Y
    
        return $output;
    }
    
  2. Use a custom walker

    class Walker_Reformated_Category extends Walker_Category
    {
        static $counter = 0;
    
        function start_el( &$output, $category, $depth, $args )
        {
            if ( 'list' != $args['style'] )
                return;
    
            // Count up before doing anything
            self::$counter++;
    
            // Do additional formatting of `$output`in here
            // It's passed by reference(!)
    
            if ( 0 === self::$counter %2 )
                $output = "<div class='class-{$counter}'>{$output}";
        }
    
        function end_el( &$output, $page, $depth, $args )
        {
            if ( 'list' != $args['style'] )
                return;
    
            // Do additional formatting of `$output`in here
            // It's passed by reference(!)
    
            // Don't count at the end of the el!
            if ( 0 === self::$counter %2 )
                $output = "{$output}</div>";
        }
    }
    
    # Call the categories list with your walker
    wp_list_categories( array(
        // ... some args
        'walker' => new Walker_Reformated_Category()
        // ... even more args
    ) );
    
share|improve this answer
    
Thanks a lot for the detailed answer. –  jay Feb 26 '13 at 9:00
add comment

You can use the echo=0 parameter to take it into a string variable:

$items=wp_list_categories("echo=0&title_li=");

then you can explode it to get the array:

$items=str_replace("</li>","</li>|",$items);
$items=explode("|",$items);

Then you can loop through the items:

foreach($items as $i=>$item){
   // to stuff
}

You can consider something like this for your div wrap:

echo "<div>";
foreach($items as $i=>$item){
    echo $item;
    if($i%2==1){echo "</div><div>";}    
}
echo "</div>";
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.