Make a tags page like WordPress dot com

We’ve all seen it, the massive tags results page at wordpress.com. I’ve been asked a few times how it was done, then realized while writing it out for someone that I hadn’t yet written up and posted a full-blown tutorial. So, here you go.

The biggest puzzle piece you need to know is it is mostly done through the use of a page template file. Here’s a codex link explaining what page templates are and how to make one. This means you can also do the same technique on a single WordPress blog, without the plugin mentioned below. It also works on any WordPress theme.

On a WPMU site, you will probably want to have the tag cloud appear sitewide. If you’ve already got the Sitewide tags plugin installed, most of the work has been done.

Open up your favorite code editor. If you don’t have one, just use Notepad. Put these lines at the top of the empty file:
<?php
/*
Template Name: Tags
*/
?>

The rest of the code for the page depends on your theme, so go grab the content of the page.php template file, or single.php. Paste it all under our template declaration. In this example, I’ll be using the Flexx theme I use on the main blog at HomeschoolJournal. This is also my tags blog.

Now, this next part depends on your theme. Instead of the page content, we want it to show tags results. So, we have to rip out the code that pulls the posts and replace it with the code to show tags. But, we also have to keep the styling. For many themes, this usually means there’s a div there called “main” or “content”. Rip out all the code in that div, including any calls to the sidebar. You should be left with something like this:

<?php
/*
Template Name: Tags
*/
?>

<?php get_header(); ?>

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

</div><!–end #content–>

<?php get_footer();  ?>

In the content div, all we have to do now is add the template tag to call the tag cloud.

<?php wp_tag_cloud('smallest=12&largest=52&orderby=count'); ?>

The wp_tag_cloud function used here has arguments included to to show the tag cloud in much larger font and order it by smallest amount of tags to largest. You can read the codex page I linked to in case you want to explore others ways to display this. Save your page template as something like tags.php or tag-cloud. (tag.php is a reserved template filename) Upload it to the theme directory of your tags blog.

We’ve made our page template, now we have to show it. Log in to the backend of your tags blog and write a new Page. Called it tags. Original, I know – yes, you can call it anything you like. You won’t need to add any content to the page, but you do need to look to the meta boxes on the right. There should be an option to choose a new page template.

If there isn’t, just switch your theme to the default and back again. It should reset thing and force WPMU to recognize the template.

Publish the new page and view your big honking sitewide tag cloud in all its glory. You may want to do some tweaking (ex: I added back a div called “post”).

If you do this, leave a comment with your link so we can all see.

About andrea

City kid turned country wife, obsessive crafter.

Comments

  1. Or, if you’re not able to edit page templates (on a WPMU server, etc…) you can use something like my Tag Cloud Shortcode plugin to embed a tag cloud on any page or post by adding [tagcloud] to the content area.

    http://wordpress.org/extend/plugins/tag-cloud-shortcode/

    (and this is the first captcha that’s ever been correct. andrea DOES rock.)

  2. I did the same thing on Petomundo! Behold, the mighty tag page!

  3. Any tips on preventing the tags overlapping?

    • Yeah, I’d love some advice on the overlapping text thing too. My CSS skills are really rusty and I just can’t think of what the correct tag would be for this.

  4. nevermind about the overlapping issue, found an answer for that here:

    http://wordpress.org/support/topic/tag-cloud-font-size-issue-inove-theme?replies=4

    I am having problems adding a separator to this. Right now, there’s no real space between my tags…I tried adding “&separator=/n” to the template tag, but that just put “/n” between each tag. I also tried adding “&separator= “, but I guess empty spaces aren’t recognized?

    • I know the slash in my last comment wasn’t the right one, but I also tried \n, and that just prints that text out as well.

      And you can just delete all of my superfluous comments, lol!

Trackbacks

  1. [...] This post was mentioned on Twitter by andrea_r, andrea_r. andrea_r said: In between the giggles, I wrote a post: Make a tags results page like wordpress.com #wordpressmu #wpmu http://is.gd/4ooi6 [...]

  2. [...] here: Make a tags page like WordPress dot com – WPMU Tutorials Comments0 Leave a Reply Click here to cancel [...]