Display Tags in 3 Columns

Posted on by

UPDATE: I’ve developed a plugin, Multi-Column Taxonomy List, that solves the problem mentioned below.

If you’re tired of all of the tag clouds you see out there and just want a simple list that you can browse through, then this bit of code is for you. In WordPress, there are convenient functions to list all tags (and categories) outside of The Loop in an unordered list. However, this doesn’t make good use of horizontal space and can get out of hand quickly if you have a lot of tags. But, the advantages of having an alphabetical listing is worth the extra effort.

For this particular example, let’s assume we want to list our tags on the archives index page.

<?php
$tags = get_tags();
$tags_count = count($tags);
$percolumn = ceil($tags_count / 3);

for ($i = 0;$i < $tags_count;$i++):
if ($i < $percolumn):
$tag_left .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
elseif ($i >= $percolumn && $i < $percolumn*2):
$tag_mid .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
elseif ($i >= $percolumn*2):
$tag_right .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
endif;
endfor;
?>
<ul>
<?php echo $tag_left; ?>
</ul>

<ul>
<?php echo $tag_mid; ?>
</ul>

<ul>
<?php echo $tag_right; ?>
</ul>

The majority of this code was modified from a two column version I found on the WordPress Forums, but since I needed three columns I had to take it one step further. The great thing about this code is that you can adapt it to output the tag RSS feeds by simply adding feed before the rel tag. For example:

$tag_left .= '<li><a href="'. get_tag_link($tags[$i]->term_id) . 'feed "rel="tag">' . $tags[$i]->name .'</a></li>' . "\n";

Here’s the code in practice.

If, for some reason, you really really love tag clouds and you think this code is a waste of time, you may want to check out some best practices for using tag clouds.

About these ads

23 thoughts on “Display Tags in 3 Columns”

  1. This piece of code has been a great help, thanks! It’s hard to find a decent code out there for a simple tag list.. but I do have one question. Is it possible to create a single column, instead of three? I tried, but I’m not that good with coding and all that.

  2. Hmm, I’m having the opposite problem – I’ve installed the code (on a client’s blog) and can’t get it to adapt from one column to 3…looks great on the sample page, just the effect I’m looking for.

  3. @Kim

    Creating a single column is pretty easy and you don’t even have to use the above code. If you want a single column of tags use this:


    wp_tag_cloud('smallest=1&largest=1&unit=em&format=list');

    This will use WP’s tag cloud function but output them all in an unordered list and the same font size.

    @thewebwriter

    What kind of problems are you getting? Is there an error message?

  4. Hey,

    Great code. I was looking for something like this. I actually made a slight change as I’m listing tags on separate page by letter. I also wanted to add in after each tag the number of posts in that tag. I’m just not sure where to add the code to count the number of posts per tag. I was changing the output to something like:

    term_id) . ‘”rel=”tag”>’ . $tags[$i]->name .’ (‘ . $count . ‘)

    But couldn’t get it to read the correct number. Any thoughts?

  5. @Gary,

    To display the count, all you need to do is add this:

    $tags[$i]->count

    Hope that helps!

  8. i got your code working , i wanted to ask that if we want to modify it so that it works with wp_tag_cloud function then hw can we , i tried and it looks funny , can you please help

    • @wpwired

      The point of this code is to have an alternative to the tag cloud. It doesn’t really work “with” the wp_tag_cloud function, so if you want to use that you will have to do so separately.

  9. Heloo. How modify this great code to show only tags from one category?

    P.S Sory for my English ;]

  10. This code list all tags in wordpress… I want to list tags from specyfic category (id). For example. You have category on your site named -> Browsers… and list only tags from this one category… in 3 column.

  11. hi,
    it works amazing to me when i implement it to my blog but could you edit it to four columns? i am indeed need to use it with 4 columns to fit nicley to the theme.

    Hope you could help

  13. Hi there. Thanks for the excellent post. I am trying to get this to work with a custom taxonomy named “locations”. I used the following code but was unsuccessful. If you have any ideas, I sure would appreciate it!

    ID,'locations', '', ', ');
    $tags_count = count($tags);
    $percolumn = ceil($tags_count / 3);

    for ($i = 0;$i < $tags_count;$i++):
    if ($i < $percolumn):
    $tag_left .= '' . $tags[$i]->name
    .'' . "\n";
    elseif ($i >= $percolumn && $i < $percolumn*2):
    $tag_mid .= '
    ' . $tags[$i]->name
    .'
    ' . "\n";
    elseif ($i >= $percolumn*2):
    $tag_right .= '
    ' . $tags[$i]->name
    .'
    ' . "\n";
    endif;
    endfor;
    ?>

      • Hi Matthew your code works great. Just wondering though if know of a PHP script that only allows a maximum amount of Tags to be shown using your code? Or Maximum amount of Tags to be shown in each column.

        Thank you for your time.

      • Hey Eduardo,

        If you download the Multi-Column Taxonomy List plugin, you can add the following changes and it’ll allow you to control the number of categories or tags being output.

        Go to the shortcode function and replace line 104-125 with this code:
        extract( shortcode_atts( array(
        'taxonomy' => 'category',
        'title' => 'Categories',
        'title_container' => 'h3',
        'columns' => '3',
        'orderby' => 'name',
        'order' => 'ASC',
        'show_count' => '0',
        'exclude' => '',
        'parent' => '',
        'rss' => '0',
        'rss_image' => '',
        'number' => '',
        ), $atts )
        );

        /* Build an array of arguments for the get_terms parameters */
        $args = array(
        'orderby' => $orderby,
        'order' => $order,
        'show_count' => $show_count,
        'exclude' => $exclude,
        'parent' => $parent,
        'number' => $number
        );

        Now, you have a “number” attribute to use in the shortcode. Ex: [mctl number='10']

        I hope that helps!

  15. Pingback: WordPress tip: Displaying tags in two columns | Dabbling in Design

  16. Hi, I am using the multi column taxonomy plugin for categories. All works fine but I want to show a hierarchy with parent and child categories. Would appreciate if you could let me know how I can do this. Thanks.

  17. hi,

    i use your shortcode like this
    [mctl taxonomy='post_tag' title='' like='a']

    but instead of a i want to list all numbers from 1 to 0 in one page and on another page all tags with specialchars at the beginning

    any hint?

    thx in advance

Comments are closed.