Add a Tag Cloud to your Homepage with WordPress (v2.3+)

September 17th, 2009 by Henri Bezemer

I like the concept of Tag Clouds. In my opinion they are the most compact means of telling visitors what can be found in the crevices of your website. The words (tags) in Tag Clouds are clickable, thus helping your visitors to navigate directly to the information that triggers them.  Tag Clouds also make your site look more professional simply because many of the cool social network sites are using them too. Finally,  Tag Clouds are a very elegant way of presenting keywords to search engines.

Now to WordPress. For my site, I’m not using WordPress as the platform for everything. I want to be able to add some interactive content later on, so I have confined WordPress to a dedicated subfolder called blog (which is also visible in the URL of this post).

To use WordPress functionality in any non-WordPress powered webpage, that page must be a PHP page. Luckily there is very little PHP code involved, so there’s really no need to know anything about PHP programming. Just copy & paste the code into an existing HTML (home)page and rename that file to the extension .php (dot php).

Here’s the code:


That knocked you of your feet didn’t it? (Please note that the included file wp-blog-header.php lives someplace else if you’ve decided to put WordPress someplace else) This PHP code must be inserted at the right place inside your HTML page. It is a good idea to develop and style a pure HTML version first, with some hardcoded tags inside the Tag Cloud. When you’re happy with the visual results, simply replace the hardcoded words with the PHP code and you’re done.

Before you start developing you should note two things. First, I advise you to put the tags in an unordered list (UL). The alternative is to have WordPress generate the tags simply as words seperated by spaces. Semantically, the tags do not form a piece of prose together, so having them in an unordered list is better. Secondly, WordPress will generate inline style attributes to give each of the tags a specific font-size (you have some control over the font sizes through parameters to wp_tag_cloud, see the WP codex).

For the rest the styling of the Tag Cloud is up to you.  The part of my CSS that controls the styling of the Tag Cloud looks like this (I’ll explain what it does):

div.tagcloud a {
  color: #94b3c5;
  text-decoration: underline ! important;
div.tagcloud li {
  display: inline;
div.tagcloud ul {
  margin: 0;
  padding: 2px;
  line-height: 3em;
  text-align: center;

I keep the Tag Cloud inside a div of class “tagcloud”. The anchors (a) inside that div will have a specific color and will be underlined (note that I need to use the keyword !important here because I also have a CSS rule that states that all anchors have no decoration, and I need to override that rule). Next the li (listitem) elements are styled as inline items. This makes them visually appear as space seperated words. Finally I style the unordered list that makes up a Tag Cloud with specific margin, padding, line-height and text-align.

Make sure to take a look at the WP codex. You might just find the parameter that makes the Tag Cloud look exactly the way you want it to.

No Comments

Comments are closed.