Pro Blog Design

Tags have become a very popular way to browse sites online. You pick the keyword you’re after and get a set of posts specifically related to that topic. They’re ideal for bloggers for because one post can be tagged multiple times and it’s very easy to do.

Adding a tag cloud to your sidebar or footer is simple, but that only shows off a very small number of your tags. What if we could add a small link beside the tag cloud to a page with all your tags?

It’s extremely easy to do, as you’ll see below. The end result will be just like the Tag Archive page here.

1 – Set Up a Page Template

A Page Template in WordPress is a theme file that is used specifically for one Page. When a user loads that page, WordPress will use the Page Template to build the page, not the normal page.php file.

To start, open up your theme’s page.php file and re-save it as tag-archive.php (If you don’t have a page.php file, use index.php instead).

At the top of the file, paste the following code:

1
2
3

<?php /* 
Template Name: Tag Archive 
*/ ?>

2 – Edit Your Template into a Tag Archive

We are going to delete all of the normal content code. The exact code will vary depending on your theme, but it will be something like the follow (From the default theme).

The important lines to look for are the start and end lines. They will be the same in the majority of themes.

1
2
3
4
5
6
7
8
9

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="post" id="post-<?php the_ID(); ?>"> 
<h2><?php the_title(); ?></h2>
<div class="entry"> 
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div> 
</div> 
<?php endwhile; endif; ?>

Also, take note of the <h2>. You may find that it is a <h1> in your theme.

Now, delete all of that code we just found.

In its place, paste the following:

1
2

<h2>Tag Archive</h2>
<p id="page-tag-archive"><?php wp_tag_cloud('number=200&unit=px&smallest=8&largest=32'); ?></p>

The first line gives the page title. Feel free to edit it, and also change the <h2></h2> to <h1></h1> if that is how it was in the code we deleted.

The second line uses the wp_tag_cloud template tag to generate the cloud. We have set it to display the 200 most popular tags, though you can change that to more if you like.

The smallest and largest values refer to the size of the links (In pixels, as set by the unit value). Because we are displaying so many tags in one place, it is helpful to have a very large size range here. 8px is small to be displaying anything but given the wall of text you are putting on the page, it can be helpful from preventing it getting overwhelming.

And we have wrapped the whole thing in a paragraph which will apply your theme’s normal content styles to it, but you can use the ID page-tag-archive to style it however you like.

3 – Create a New Page in WordPress

Upload the tag-archive.php file to your theme folder, then go to Pages > Add New in WordPress (Assuming you are on WordPress 2.7 here. These options are available in any version of WordPress but the exact wording might be different).

Give the page the title “Tag Archive” (It won’t be used in the page’s content, but it will be used in the browser title bar).

Now in the Attributes box on the right, go to the Template section. From the dropdown, choose “Tag Archive” (The name we gave to the tag-archive.php file in section 1).

And that’s it done. Publish your page and go check it out to see how everything looks!

If you aren’t happy with how it has turned out, go back to your tag-archive.php file and edit the wp_tag_cloud code to get it how you like.

Let us know in the comments if you have any trouble. If you’re using a tag archive on your blog, share it with us so everyone can see how you’ve made it look!