Adding a Tag Cloud Page to WordPress

Ok, I’ve been playing with and cleaning up my widgets and plugins after I upgraded this WordPress install to 2.6. And without realizing it at first, I broke one of my pages when I removed the SimpleTag plugin. I figured, 2.6 has great tagging now, what do I need it for?

Well, my Tag Cloud page was using a call to that plugin to generate a list of all the tags I have used…  469 to date.

So rather than reinstall the plugin just to have that cloud, I did some playing around and here’s what I came up with.

There’s the built in WP function, wp_tag_cloud, but you can’t just plug the function call into the text box on a page, it’s a PHP function and you can’t put code inside a post/page. So instead you need to edit your template file. This is really easy, just go to the Design menu and select Theme Editor. The file you want to edit is your Page Template (page.php).

Inside that page you’ll see something like this…

<div id=”content” class=”page”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1>
<div class=”entry”>
<?php the_content(’<p>Read the rest of this page &rarr;</p>’); ?>
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
</div>

<?php endwhile; endif; ?>
</div>

At the end, just before that last </div> tag, add this…

<?php if (is_page(’Tag Cloud’)) { wp_tag_cloud(’number=9999′); } ?>

The ‘Tag Cloud’ needs to be changed to whatever you call your page, if you call it Tags, then put in ‘Tags’, etc.

So it should end up looking like…

<div id=”content” class=”page”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1>
<div class=”entry”>
<?php the_content(’<p>Read the rest of this page &rarr;</p>’); ?>
<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
</div>

<?php endwhile; endif; ?>
<?php if (is_page(’Tag Cloud’)) { wp_tag_cloud(’number=9999′); } ?>
</div>

Putting it there means your cloud shows up after any other text you put in the page when editing the page. If you want it to show up before your text, put it in after that first <div id=”content”… Save your changes by clicking the Update File button, and go check out your results. That’s pretty much all there is to it.