How To Customize WordPress’s Tag Cloud Widget

You don’t have to use it with default settings.

If you use WordPress widgets on your self-hosted WordPress blog, you may not be fully satisfied with the way the Tag Cloud widget looks and works on your site. I know I wasn’t. The maximum font size was too large for the most commonly used tag (helicopters, on my blog) to fit into the column in which I’d put it. Since I wanted my tag cloud in the narrow column in which it resided, I had to make a change.

The answer is to modify the wp_tag_cloud function in the category-template.php file. It’s remarkably easy to do. Here’s how.

  1. Open the file /wp-includes/category-template.php.
  2. Scroll down to the line that begins function wp_tag_cloud. If you’re using WordPress 2.7 and haven’t made any other changes to this file, you should find it at line 552. (You can always do a search for it; I found the general area by searching for “tag cloud.”)
  3. Make changes in the array as follows:

    Tag Cloud Function

    • To specify the smallest font size, set the value after ‘smallest’. The default is 8 points.
    • To specify the largest font size, set the value after ‘largest’. The default size is 22 points.
    • To specify the maximum number of tags included in the cloud, set the value after ‘number’. The default number of tags is 45.

    My Tag CloudI changed my settings to 6, 16, and 75 respectively. You can see the results in the screenshot here, as well as in the sidebar for my blog, An Eclectic Mind.

  4. Overwrite the existing file with the changed file.

When you reload a page that uses the Tag Cloud widget, your changes should appear immediately.

Keep in mind that if WordPress is updated and the file you changed is replaced, you may have to repeat these steps to reset your defaults.

Learn More

Lynda.comLearn more about working with a self-hosted WordPress 2.7 installation — or WordPress.com. Check out my WordPress courses on Lynda.com.

26 thoughts on “How To Customize WordPress’s Tag Cloud Widget

  1. Maria,

    This is a good reference but it would be much better to set the arguments within the cloud tag function. Your example modified the core WP files: One would have to remember to modify this file when a change/updgrade happens with WP.

    Typically the cloud tag is going to be located in the sidebar.php file within the theme directory.

    A couple of examples of the arguments:

    < ?php wp_tag_cloud('smallest=8&largest=36'); ?>

    < ?php wp_tag_cloud('smallest=8&largest=36&order=RAND&number=75'); ?>

    Details on the cloud are described in the codex:

    Template Tags/wp tag cloud

    Rick

    P.S. Have you been working with Child template themes within WordPress. Child themes are a great aspect in that you can leave the files of the parent theme alone and inherit their style and function within the child theme. One can do all of their changes, edits and adjustments on the child theme files to customize the theme. Much easier to track changes.

  2. Rick: This is a good point, and I agree that if you’re modifying the sidebar template file to insert the tag cloud widget, your way IS the way to go. However, I’m providing instructions for modifying the default Tag Cloud widget for folks who want to use widgets rather than hard-code content in their sidebar theme.

    Agreed also about the biggest drawback of my method: that you must remember to modify the category-template.php file each time you upgrade WordPress. I think there IS a way around this, but I haven’t had time to research it.

  3. I did spend a few minutes trying to find a hook to the default tag cloud widget but couldn’t find anything simpler than creating another widget. Much more complicated than your change.

    Configurable Tag Cloud (CTC) is a plug-in which provides a Widget for the Tag Cloud. CTC provides a panel to configure the tag cloud parameters. (My test showed it worked with WP 2.7).

    Here is an interesting tag cloud plug-in:

    WP Cumulus Flash Based Tag Cloud

  4. Take a lesson from Drupal and never hack core or end up having to re-do everything you customized every time you upgrade.

    Figure out a way to do it via the functions script or find a plug-in. Otherwise you are creating more work for yourself or eliminating a seamless upgrade path.

    Good info nonetheless, but you have to be careful with the changes you make.

    Dave´s last blog post: Cinco de Mayo

  5. Dave: You’re right, of course. The problem with hacking — even a simple hack like this — is that when you update the software, the hack is overwritten with the new files.

    I’ve since found a plugin that does what I need: Simple Tags. Not only does it offer a customizable Tag Cloud widget, but it adds a bunch of tag management features.

    Thanks for the reality check!

  6. Thanks so much, I knew this snippet of code had to be in there somewhere.. I saw so many other worse ways of doing it before finding this.

  7. Thanks!
    Another few lines (601) down is where you can change the link hint to say “posts” instead of “topics”. I’ve never understood why the default is “topics” when it’s linking to posts.

    function default_topic_count_text( $count ) {
    return sprintf( _n(‘%s post’, ‘%s posts’, $count), number_format_i18n( $count ) );
    }

    cheers!

  8. Nice tip! in case you don’t use animated tag cloud;) I prefer this type of clouds (like CircumTags cloud widget) cause the look much cooler!

  9. NEVER HACK CORE !

    use my trick in your functions themes :

    function my_tag_cloud($defaults) {
    $args = array(
    ‘smallest’ => 8, ‘largest’ => 16, ‘unit’ => ‘pt’, ‘number’ => 25,
    ‘format’ => ‘flat’, ‘separator’ => “n”, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
    ‘exclude’ => ”, ‘include’ => ”, ‘link’ => ‘view’, ‘taxonomy’ => ‘post_tag’, ‘echo’ => true
    );
    $args = wp_parse_args( $args, $defaults );
    $tags = get_terms( $args['taxonomy'], array_merge( $args, array( ‘orderby’ => ‘count’, ‘order’ => ‘DESC’ ) ) ); // Always query top tags

    if ( empty( $tags ) )
    return;

    foreach ( $tags as $key => $tag ) {
    if ( ‘edit’ == $args['link'] )
    $link = get_edit_tag_link( $tag->term_id, $args['taxonomy'] );
    else
    $link = get_term_link( intval($tag->term_id), $args['taxonomy'] );
    if ( is_wp_error( $link ) )
    return false;

    $tags[ $key ]->link = $link;
    $tags[ $key ]->id = $tag->term_id;
    }

    $return = wp_generate_tag_cloud( $tags, $args ); // Here’s where those top tags get sorted according to $args

    $return = apply_filters( ‘my_tag_cloud’, $return, $args );

    if ( ‘array’ == $args['format'] || empty($args['echo']) )
    return $return;

    echo $return;
    }

    add_filter(‘wp_tag_cloud’, ‘my_tag_cloud’);

    Now you can change the default value, etc.

    See u

  10. Maria,

    Thanks for posting and letting this discussion continue on.

    Boitea,

    This is exactly what I was looking for. Your remedy allows for the core to be updated without killing the hack, and without having to install another plugin.

    Much Thanks,
    Brent

  11. TYVM for this info. I was cracking my head to find out how to solve this problem in my custom template, and I finally found the answer here.

    I also had a problem setting a new css to this tag cloud while I wanted to specify a background and different color schemes from my other template links. Knowing about this file helped me out in this issue too. I was able to add a “span class” between the “a href” insert in the code (line 681 for me) and now everything just works wonderful. I hope this can help someone else with the same issue.

    Thanks a lot!

  12. Pingback: Modify the Wordpress Tag Cloud Widget Easily | Bryan Veloso

  13. Finally! I was looking for this ‘trick’ for some time but with your post everyting was clear and my tagcloud is better looking now. Many thanks!

  14. You could be dump and hack the core, or you could try any one of the wrong answers above. The correct, wordpress created way to change these arguments is with a filter.

    function boilerplate_tag_cloud_ordering_filter($args)
    {
    $args['smallest'] = 10;
    $args['largest'] = 18;

    return $args;
    }

    add_filter(‘widget_tag_cloud_args’, ‘boilerplate_tag_cloud_ordering_filter’);

    Try doing it the right way now.

    • Wow. Could you be any more obnoxious?

      This blog post was written THREE+ years ago. Is it any wonder that it’s out of date?

      Does it make you feel better to insult the author of the blog and any commenters?

      DON’T COME BACK HERE. You are not welcome.

      • Maria, at least acknowledge the fact that James is right. The “tips” in this post and the comments are horrific.

        Now that you know a better way, you really should update the post.

  15. Pingback: How To Customize Wordpress Tag Cloud

Questions? Comments?
Share them here!

Comments are moderated. I encourage comments that further the discussion, but will not tolerate rudeness or spam. Your email address is never shared.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>