How to Create a Tag Grid and Evolve Past the Cloud

I hate tag clouds, there were obviously must have been created by a programmer (no offense). The default offering completely lack any sort of hierarchy or organization. While increasing the size of the tags does convey which tags are the most popular, it certainly is not the most elegant or clean solution. Up until a couple of weeks ago I had no solution other than to remove the tag cloud, or just give a simple list of tags which is more of a copout than a solution. That was until now, or before I conceived the idea for the tag grid, which I will share with you in a step-by-step how to.

Before we Begin

This tutorial is intended for replacing tag grids in WordPress, however I am sure the concept could be applied to the blogging platform / CMS of your choice. It is important to know that implementing the tag grid will take a soem template editing and at least a moderate knowledge of HTML/CSS. Knowledge of PHP would be beneficial as you could potentially modify the code to meet your personal needs. This tutorial is not intended for beginner web developers and does not get into very detailed instructions. It should however be adequate for anyone who meets the qualifications listed above.

Also, in this tutorial I will be installing thickbox in order to make integrating the tag grid on every page easy, however it would be possible to create a page specifically for your tag grid. If you would like to install the grid on its own page, then skip the first step of the tutorial.

The Steps

1. Installing ThickBox
2. Installing the HTML/PHP code
3. Insert the Tag Grid link
4. The CSS code

Step1: Installing Thickbox

1. Download ThickBox 3.1 (I suggest the compressed version), the latest version of JQuery, the css file, the loading animation gif, the CSS file, and the macFFBghack.png file.
2. place the images your downloaded into a folder called “images” in the directory the wp-content/themes/YOURTHEMEFOLDER/
3. make sure the ThickBox javascript file that you downloaded is called “thickbox.js” and place it into a folder called “js” in the directory wp-content/themes/YOURTHEMEFOLDER/
4. make sure the JQuery javascript file that you downloaded is called “jquery.js” and place it into a the “js” Folder
5. place the CSS file your downloaded into a folder called “css” in the directory the wp-content/themes/YOURTHEMEFOLDER/
6. Open the header.php file of your WordPress theme in the text editor of your choice.
7. place the following lines of code below the “</head>“ tag.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/thickbox.css" type="text/css" media="screen,projection" />


After you have completed these steps you should have ThickBox installed on your blog.

Step2: Installing the HTML/PHP Code

1. Open your WordPress theme’s sidebar.php and navigate all the way to the bottom of the file, you will want to place this code below any other items that you may be running in your sidebar.
2. Copy and paste the following code into your sidebar file:

<!-- Hidden Tag Grid Array Code -->
<div id="tag_grid_container">
  <div id="tag_grid_crop">
    <ul id="tag_grid">
    <?php       
      $tags = get_tags(array('orderby' => 'count', 'order' => 'DESC', 'number' => 25));
      
      foreach ($tags as $tag) {
        if ($tag->count < 5) {
          echo('<li class="tagclass1">');
        } else if ($tag->count < 15) {
          echo('<li class="tagclass2">');
        } else if ($tag->count < 25) {
          echo('<li class="tagclass3">');
        } else {
          echo('<li class="tagclass4">');
        }
      
      echo('<a href="' . get_tag_link($tag->term_id) . '" rel="tag">' . $tag->name . "</a></li>\n");
      }
      ?>
    </ul>
    <ul id="tag_key">
      <li id="key">Key:</li>
      <li id="key1">1 – 4</li>
      <li id="key2">5 – 15</li>
      <li id="key3">16 – 25</li>
      <li id="key4">> 26</li>
    </ul>
  </div>
</div>
<!-- End Tag Grid Array Code --> 


After you have completed these steps you should have successfully installed the tag grid code into your WordPress Template.

Step3: Insert the Tag Grid Link

1. Copy and paste the the following code wherever you would like to make the link to open the tag grid:

<a href="#TB_inline?height=405&width=606&inlineId=tag_grid_container" title="Tag Grid" class="thickbox">Tag Grid</a>


Clicking on this link will open the ThickBox window and display your tag grid. This however will only appear as an unordered list until we add the styles for the grid in the CSS file.

Step4: The CSS code

1. Open your Wordpress theme’s style.css file and insert the following code into the file:

/* Styles for the Tag Grid */
#tag_grid_container {
    display: none;
    margin: 0;
}
#tag_grid_crop {
    height: 395px;
    overflow: hidden;
}
ul#tag_grid {
    list-style-type: none;
    width: 600px;
    height: 320px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    padding: 0 0 0 8px;
    line-height: 12px;
}
ul#tag_grid li {
    width: 94px;
    height: 41px;
    padding: 7px 9px;
    float: left;
    margin: 0 8px 8px 0;
}
ul#tag_grid li a {
    font-size: 11px;
}
ul#tag_grid li.tagclass1 {
    border-bottom: 1px solid #cbc8bf;
    background-color: #e7e4e2;
}
ul#tag_grid li.tagclass1 a {
    text-decoration: none;
    color: #c0bcb2;
}
ul#tag_grid li.tagclass1 a:hover {
    text-decoration: underline;
    color: #000;
}
ul#tag_grid li.tagclass2 {
    border-bottom: 1px solid #b5b0a4;
    background-color: #ddd9d6;
}
ul#tag_grid li.tagclass2 a {
    text-decoration: none;
    color: #5d584d;
}
ul#tag_grid li.tagclass2 a:hover {
    text-decoration: underline;
    color: #000;
}
ul#tag_grid li.tagclass3 {
    border-bottom: 1px solid #807b71;
    background-color: #cdc4bd;
}
ul#tag_grid li.tagclass3 a {
    text-decoration: none;
    color: #5b564d;
}
ul#tag_grid li.tagclass3 a:hover {
    text-decoration: underline;
    color: #000;
}
ul#tag_grid li.tagclass4 {
    border-bottom: 1px solid #310000;
    background-color: #8c0000;
}
ul#tag_grid li.tagclass4 a {
    text-decoration: none;
    color: #e7e4e2;
}
ul#tag_grid li.tagclass4 a:hover {
    text-decoration: underline;
    color: #FFF;
}
ul#tag_key {
    list-style-type: none;
    width: 600px;
    overflow: hidden;
    margin: 28px auto 0 auto;
    padding: 0 0 0 8px;
    line-height: 12px;
}
ul#tag_key li {
    width: 94px;
    padding: 7px 9px;
    float: left;
    margin: 0 8px 8px 0;
}
#key {
    border-bottom: 1px solid #e7e4e2;
    background-color: #f7f6f5;
    color: #cbc8bf;
}
#key1 {
    border-bottom: 1px solid #cbc8bf;
    background-color: #e7e4e2;
    color: #c0bcb2;
}
#key2 {
    border-bottom: 1px solid #b5b0a4;
    background-color: #ddd9d6;
    color: #5d584d;
}
#key3 {
    border-bottom: 1px solid #807b71;
    background-color: #cdc4bd;
    color: #5b564d;
}
#key4 {
    border-bottom: 1px solid #310000;
    background-color: #8c0000;
    color: #e7e4e2;
}


After appending the above CSS into your stylesheet you are done! Clicking the Tag Grid link should give you something that looks close to this:

WHERE TO GO FROM HERE

This is obviously just a starting point. You should look into editing the CSS styles to make the color scheme better fit your site. Also, modifying the Thickbox CSS file will allow your to better integrate it with your blog’s theme. If your site is older than mine, your tags might also have a much larger amount of article tied to them. In this case, you might want to adjust the PHP code to create a scale that better fits your tag counts.

Disclaimer: I am a designer and not a programmer so I do not take any responsibility for the efficiency of the supplied code. I am sure there are a number of optimizations that could be made, if you do so please share them here in the comments. Also, if you break your WordPress template trying to install this I won’t be taking any responsibility for that either