Columnize WordPress Tags

WordPress makes it extremely easy to display a list of all the tags used on your blog, but it outputs it in a very boring list. Here’s how we can change that by using the CSS columns attribute.

First, let’s grab our list of tags and put some wrappers around it:

  
  name ) . '" ' . '>' . $tag->name.'';
      }
  }?>

Now, I’m no expert in PHP, but we’re essentially doing is grabbing all the tags in our database and printing them to the screen one by one, with each one wrapped in a list item tag and linked to its respective tag archive.

You’ll notice that I wrapped the WordPress snippet in an unordered list tag and gave it a .columns class. Here’s where the magic of CSS columns comes in.

.columns {
  -webkit-column-count: 4;
     -moz-column-count: 4;
      -ms-column-count: 4;
       -o-column-count: 4;
          column-count: 4;
}

This will split your list of tags up nicely into four even columns. You can take it a step further and add media queries that reduce the number of columns as the viewport gets smaller so your visitors aren’t looking at four squeezed columns of unreadable tags.