Display Custom Taxonomy in Sidebar in Two Columns

Question

I have a custom post type (photos) with a custom taxonomy (categories) and I'd like to display the taxonomy list in my sidebar in two columns. I have a modified snippet that I found elsewhere to do this, but it doesn't generate the current class for the particular category it is on. Maybe it is not the best way to list the taxonomy to begin with, so I hope someone will suggest a better solution.

Here's what I have now:

<?php $term = get_term_by( 'name', 'categories', 'photos' );
      $cat_term_id = $term->term_id;

$cats = explode("<br />",wp_list_categories("title_li=&echo=0&child_of=$cat_term_id&depth=1&style=none&taxonomy=categories"));
$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>

Thanks!

Answer 1

As a follow up to @Rutwick Gangurde Answer, here's an example.

Notes:

• Put it in your functions.php file, call it in the template file.
• Alter the output by inspecting the $term inside the foreach loop
• Read the comments inside the function

-

    function wpse25433_terms_list( $cat = array('categories'), $el = 'li', $echo = true )
    {
    global $post;
    $post_id = $post->ID;

    $terms = wp_get_object_terms( 
        $post_id, 
        $cat, 
        array( 
             'orderby' => 'name'
            ,'order'   => 'ASC'
            ,'fields'  => 'all' 
    );

    $counter = count ( $terms );
    $i = 1;
    $left = $right = '';
    foreach ( $terms as $term )
    {
        # uncomment the following line to inspect the $term object
        // echo '<pre>'; print_r( $term ); echo '</pre>';
        $i++;
        if ( $i < $counter / 2 )
            $left .= ''; // @example: $term['name'];
        else 
            $right .= ''; // @example: $term['whatever_value_you_need'];
        $i++;
    }

    $el_cont = 'ul';
    if ( $el !== 'li' )
        $el_cont = $el = 'div';
    $output  = "<{$el_cont} class='terms-container'>";
    $output .= "<{$el} class='terms-left'>{$left}</{$el}>";
    $output .= "<{$el} class='terms-right'>{$right}</{$el}>";
    $output .= "</{$el_cont}>";

    if ( $echo )
        return print $output;

    return $output;
}

// Use it in your template like this:
wpse25433_terms_list( array( 'name', 'some', 'taxonomies' ), 'li or div', true );

Answer 2

This is one way I made it work (please check the image attached). Just that I made it as a shortcode, you can use the function/code as you want. Also replace the taxonomy with yours, I used mine!:

add_shortcode('dis', 'displayascols');
function displayascols()
{
    $cats = get_terms('companycategory', array('hide_empty'=>0));
    $l = count($cats);

    if($l%2 == 1)
    {
        $l_even = $l-1;
        $l_half = $l_even/2;

        $cat_1 = array_slice($cats, 0, $l_half);
        $cat_2 = array_slice($cats, $l_half);
    }
    else
    {
        $l_even = $l/2;

        $cat_1 = array_slice($cats, 0, $l_even);
        $cat_2 = array_slice($cats, $l_even);
    }

    $cat_left = '';
    $cat_right = '';

    for ($i=0; $i<count($cat_1); $i++){
        $cat_left .= '<li><a href='.$cat_1[$i]->slug.'>'.$cat_1[$i]->name.'</a></li>';
    }

    for ($i=0; $i<count($cat_2); $i++){
        $cat_right .= '<li><a href='.$cat_2[$i]->slug.'>'.$cat_2[$i]->name.'</a></li>';
    }
    ?>

    <ul class="left" style="float: left;">
        <?php echo $cat_left;?>
    </ul>
    <ul class="right" style="float: right;">
        <?php echo $cat_right;?>
    </ul><?php
}

Let me know!

Answer 3

You can use wp_get_object_terms. It returns an array, leaving you with a better control over the display.

Answer 4

You can do it with little CSS, assuming you starting with a classical list (<ul class="foo"><li></li></ul>) :

.foo {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

For older browser just make the li float.