March 5th, 2010
C

Simple Tag Bar for WordPress

So when I did the little redesign of my site earlier this week I added a right rail. With that I wanted to add some way to show tags that was not a tag cloud and wasn’t just a list of tags. I noticed on a co-worker’s blog (Kyle Slattery) that he had a really nice tag display. So I stole it, er better yet re-purposed it. The way Kyle did it reminded me of how Django makes its graphs, very clean and crisp. I really liked the idea and the presentation.

He doesn’t use WordPress so I had to build a quick script to accomplish this in WordPress. Easy enough actually. What it does it grab your top ten tags then do a little math to display them in a graph format. The more times a tag was used, the larger the graph. Again pretty simple.

PHP Code

  //Grab the top ten tags, set an offset difference, set the default high count
  $tags = get_tags(array("orderby"=>"count","order"=>"DESC","number"=>10));
  $difference = 5;
  $high = -1;

  // Loop thru each tag, Figure width in %, Print to sidebar
  foreach ($tags as $k => $obj) {
    $high = ($high == -1) ? $tags[$k]->count : $high;
    $perc = round((($tags[$k]->count / $high) * 100) - $difference);
    $perc = ($perc < 20) ? 20 : $perc;
    print '<div class="tag" style="width:' . $perc . '%;" id="' . $tags[$k]->slug . '">';
    print strtolower($tags[$k]->name);
    print '</div>';
  }

What it does is grab your top ten tags and then divide the current tag’s count by the highest tag count, then make it into the actual percentage and subtract the difference. I added the difference variable because I didn’t want graph bars to push up against the right edge of the side bar. Just a preference thing really.

Now you will notice I didn’t add any actual anchor tags to the script. I am doing this thru JavaScript via jQuery. The JavaScript used to create the tags hover state and links are below. Of course you will have to use jQuery to use the exact code.

JavaScript Code

$('#sidebar div.tag').each(function()
{
  $(this).click(function() { location.href = '/tag/' + $(this).attr('id') + '/'; });
  $(this).mouseover(function()
  {
    $(this).fadeTo('fast', 0.5);
  });
  $(this).mouseout(function()
  {
    $(this).fadeTo('fast', 1);
  });
});

For the above JavaScript to work for you, you would need a div with the id of ’sidebar’ with your tag divs inside each with the class name of ‘tag’. You would also need to make sure your WordPress settings are set so that tags appear in the URL structure of /tag/TAGNAME/. After that this script should work easy enough.

Right now my tag bar is boring, I don’t have enough tags on the site yet, but as the site grows the graph will end up being a nice representation of topics on my site.

Any questions, ideas or feedback please leave them below. Thanks for reading.

You can leave a reply, or trackback from your own site.

3 Responses to this article.

  1. Andrew Pelt says:
    March 6, 2010 at 2:37 PM

    Thanks for this post. I am new at development and this is a big help.

  2. Kyle Slattery says:
    March 7, 2010 at 11:14 PM

    Glad to see someone enjoyed the bar graphs :) .

  3. Jeff Johns says:
    March 7, 2010 at 11:23 PM

    Enjoyed…I fell in love <3, not with you but the graphs :)

Leave a Reply