WordPress Guy

WordPress Guy designs and develops WordPress themes and plugins. WordPress Guy teaches you WordPress stuff.

Have you noticed that many blogs have a tag cloud in their sidebars? however, not many have a tag cloud page. Why a tag cloud page you may ask! Well… many reasons: de-cluttering your sidebar, adding interactivity to your blog, … Or maybe you have so many tags that they don’t fit in your regular tag cloud widget.

So that’s what this tutorial is about: creating a tag cloud page.

Before we start

Before we start, you need to be running WordPress version 2.3 or later, and of course have a bunch of posts with tags, otherwise you may end up with an empty tag cloud.

Creating the page template

First, we need to create a custom page template. A page template is nothing more than a PHP file with a special commented code at the beginning of the file.

Go ahead an create a new php file and name it “tagcloud.php” or whatever you want. Now put the following at the beginning of it:

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

With this we’re telling WordPress that our tagcloud.php file is a page template and it’s name is “Tag Cloud”.

The basic structure

Now let’s add the basic page structure, header, sidebar and footer. Of course, this depends on the theme you’re using. I’m just going to assume we’re using the Kubrick theme structure for this tutorial. I recommend you open the page.php file of your theme and try to replicate it. The resulting file might look something like this:

<?php
/*
Template Name: Tag Cloud
*/
?>
 
<?php get_header(); ?>
 
    <div id="content" class="narrowcolumn">
 
    </div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

That would print an empty page because we haven’t inserted the template tag yet.

The template tag

Now we need to put in the tag cloud template tag: wp_tag_cloud(), which will print the tag cloud. You can find more information on the wp_tag_cloud() template tag in the codex.

Okay, let’s add the template tag:

<?php
/*
Template Name: Tag Cloud
*/
?>
 
<?php get_header(); ?>
 
    <div id="content" class="narrowcolumn">
 
        <div class="tag_cloud">
            <?php wp_tag_cloud('number=0'); ?>
        </div>
 
    </div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Notice that we entered “number=0” parameter, this is because, by default, the wp_tag_cloud() template tag only prints the 45 most used tags, and we want to display them all instead.

Also, we’ve placed the template tag inside a div with a class of “tag_cloud” in case we need to style it later with some CSS.

We’re done with the PHP part, now save your file and upload it to your theme directory (wp-content/themes/your_theme_name).

Creating a new page in WordPress

All we need to do now is create the page in WordPress. To do this, you just have to follow these steps:

  1. Go to the Write » Page section of the admin panel.
  2. Type a descriptive title for the page in the Title field.
  3. Locate the Page Template panel, open it if it’s closed, and choose “Tag Cloud” from the drop-down menu.
  4. Hit the Publish button.

And we’re done. Feel free to post your thoughts and questions in the Comments section.

Comments

  • May 15th, 2008 at 7:46 pm

    Cool idea. I love the tag cloud, but hate the way it hogs space on my sidebar.

  • June 3rd, 2008 at 7:19 am

    First of all… GREAT site! I just found it via Weblog Tools Collection (and I’m definitely going to try your Pistachio theme). I do have my tag archive done the way you explained it, yet, I’ve been cracking my head with something. I just to have a really cool tag archive using and add on for Ultimate Tag Warrior. When UTW became obsolete, the functions were lost.

    The add on displayed the tags in a list format, which you can also do with the wp_tag_cloud tag, but I can’t figure out a way to make the columns show as the add on did. Since I saw you modified an Alex King plug in, would it be too much to ask you to take a look at the add on code? I hope you can! (link)

    Again, thank you for the site, I found a couple tricks I’m going to try.

  • June 3rd, 2008 at 1:07 pm

    @Fer: I have never used the Ultimate Tag Warrior plugin, but, I found this site which offers a version of the plugin that still allows you to use the plugin functions, but with the native WordPress tags. Maybe that’ll work for you.

    Oh… and thanks for the compliments ;-)

  • June 3rd, 2008 at 7:19 pm

    Thanks for the tip, I’ll give it a try!

  • June 27th, 2008 at 5:34 am

    ... How to make a tag cloud page | WordPress Guy (tags: wordpresstutorial via:mento.info) ...

  • July 5th, 2008 at 2:12 am

    thank you! so easy to follow! i just have to figure out how to remove the unsightly link underlines that show up, but hopefully a quick html tag will fix that! i’m also going to try and get some archiving going like this: http://www.srah.net/weblog/archives.php
    thanks again!

  • August 11th, 2008 at 3:49 pm

    Thanks!
    Beautiful instructions, very easy to follow
    E.

  • October 12th, 2008 at 1:42 pm

    nice tips..it’s work in my blog

  • ... Theme 2. ขอบคุณ wpguy และ staygolinks ...

  • October 16th, 2008 at 3:25 am

    ... the original code for the categories (which I don’t use anymore) - with some help from WordPress Guy’s quick tutorial on the subject. Dropping the code in and just inserting a “50″ ...

    • March 23rd, 2012 at 12:48 pm

      great information. before read this article i didnt know about tag but after reading this i know a lot things about tag

      thanks for sharng

  • October 31st, 2008 at 1:39 am

    Well done - I was after this as a plug in and looked for ages. So I have found this instead, I had no idea that I had this many tags. Only down side is - I don’t know how effective this will be for the google bot or SEO purposes.

    But great guide and straight forward !!

  • February 17th, 2009 at 10:59 pm

    Although I think that a tag cloud in sidebars is a better way,I appreciate what you created for those who have too many tags.

  • March 13th, 2009 at 10:55 pm

    Hey, Normally I don’t bookmark many sites, and i mean it’s quite rare.. but i’ve been looking forever to find a site that explained how to do this without installing any other plugins and you did it. I appreciate that. Good site you’ve got here, and thank you.

  • April 17th, 2009 at 8:48 am

    Hello friend
    thankyou very much for your instructions,,,so easy to folllow:)

  • June 15th, 2009 at 5:49 pm

    Hi,

    Thank you very much for this easy to use guide, I have already implemented it on some of my clients sites.

    Great work!

    Ronny

  • akber kabir
    June 23rd, 2009 at 10:55 am

    many thanks ! GOD bless you. it helped me a lot.

  • August 18th, 2009 at 11:02 pm

    Oh! That was refreshingly easy! Thank you WordPress Guy!

  • August 19th, 2009 at 1:33 am

    very cool. Worked exactly. Any chance in adding some style tho? Mine looks ugly as is and for some reason extends beyond the posting dimensions. click on my name about to go to the site. Please help.

  • September 20th, 2009 at 5:11 pm

    Worked great! thanks very much

  • ... Cloud tag page in Wordpress - ...

  • January 4th, 2010 at 10:42 pm

    Thank you! ♥

  • January 13th, 2010 at 5:06 pm

    Great tip thanks! Does anyone know how to show the WP Cumulus content on a page?

  • February 4th, 2010 at 10:08 pm

    Awesome thanks!

  • May 3rd, 2010 at 8:53 pm

    Excellent, thanks a lot!

  • May 18th, 2010 at 12:21 pm

    Hey thx for this awsome Idea! But i used Inline PHP, to i dont have to crate an Layout Page for that.

  • June 1st, 2010 at 4:44 am

    Hi thanks it works, I just created a tag cloud page with help of this article.

  • June 3rd, 2010 at 7:20 am

    Great!

    You can see it in action on http://personalshoplifter.com/tags ….especially great as it picks up the CSS of the site design!

  • September 11th, 2010 at 9:05 pm

    hi. thanks for the great directions. I have it working on my site, but I can’t seem to style the type the way I want. My CSS is iffy at best and I wonder if you could illuminate this sentence for me:

    “Also, we’ve placed the template tag inside a div with a class of “tag_cloud” in case we need to style it later with some CSS.”

    • September 13th, 2010 at 10:25 am

      I just meant that I added class=”tag_cloud” to the div that contains the tag cloud. Later you can use the .tag_cloud selector in CSS… does that make sense?

  • October 6th, 2010 at 5:41 pm

    making a tag cloud was easier than i thought. thanks for the help.

  • October 15th, 2010 at 12:30 pm

    Didn’t show all the code. Trying again

    <div >

    ‘.__(’Pages’,'gpp_i18n’).’: ‘, ‘after’ => ”, ‘next_or_number’ => ‘number’)); ?>

    <?php edit_post_link(__(’Edit this entry’,'gpp_i18n’), ”, ‘.’); ?>

  • October 15th, 2010 at 12:41 pm

    Shit, sorry. Why can’t I paste all the code? Any hints on where to put the template tag in? I’ve tried just a few places, and can’t get it to work right.
    Thanks again

  • October 27th, 2010 at 10:04 pm

    Oh god, thank you so much (well alright maybe you aren’t god) I have been trying to figure this tag BS out. Scrabble Board Game site

  • November 15th, 2010 at 10:33 am

    Hi, thanks for the tips. Just one question, I’m having more than 100 tags on my tags cloud page. I want every tags to be included, but paginated at 100 tags per page. Is there any solution for this? Thanks.

  • Sigo
    December 13th, 2010 at 6:40 pm

    Thanks for the tutorial!

    I’m trying to use the topic_count_text_callback=default_topic_count_text argument, but I’m not getting what I had hoped. I had hoped to see the count per tag in parentheses following the tag, but instead the callback function puts the count in the TITLE attribute.

    Is there an argument value for topic_count_text_callback that would allow me to present the tag count?

    Thanks!

  • January 16th, 2011 at 9:20 am

    good idea for tag clouds including code i like it i will try it thanks for sharing

  • ... 참고: How to make a tag cloud page ...

  • taine
    April 29th, 2011 at 10:09 am

    my template starts with

    where should i put

  • June 11th, 2011 at 10:16 pm

    Good article just not sure about value of tag cloud? Mobile Park Home Retirement

  • September 5th, 2011 at 10:54 pm

    Great guide! Took just a couple of minutes and worked perfectly on WordPress 3.2.1. Page can be viewed here: http://www.ancarb.co.uk/tag-cloud/

    Thanks v.much!

  • December 2nd, 2011 at 9:56 pm

    nice one , it worked

    • January 4th, 2014 at 3:25 am

      If you wish for to increase your experience only keep visiting this web page and
      be updated with the hottest news update posted here.

    • February 23rd, 2014 at 7:09 pm

      Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something.
      I think that you could do with a few pics to drive the message home a bit, but other than
      that, this is fantastic blog. An excellent read. I’ll definitely
      be back.

    • June 8th, 2014 at 11:15 pm

      Hello colleagues, how is all, and what you wish for to say regarding this paragraph, in my view its really remarkable
      in favor of me.

  • November 24th, 2012 at 3:20 am

    Its very use full code to make cloud tag and much more than this..Great tips

    Thanks

  • November 30th, 2012 at 10:42 pm

    Thank you for the great tip. You provided the basic thought and I added some more code and it worked great!
    I added more code because when put like that, the theme’s sidebar got all messed-up. I had to define it like the rest of the page templates in my theme and it’s awesome!
    Thank you!

  • January 18th, 2013 at 4:39 pm

    Nice, was searching for this :)

  • March 14th, 2014 at 3:27 pm

    Hi,

    Thanks for the post, Its working fine, but if we are having more then 10000 tags then its not a good idea to show all the tags on a single page, so I just want to know that is it possible to create pagination for tag page so that we can show all of our tags.

    Thanks
    Waiting for reply.

Your Comment