Maria’s Guides

Support and additional material for readers of books, articles, and digital media by Maria Langer.


Random Book Cover #1Random Book Cover #2Random Book Cover #3Random Book Cover #4Random Book Cover #5Random Book Cover #6Random Book Cover #7Random Book Cover #8Random Book Cover #9

How To Customize WordPress’s Tag Cloud Widget

Posted on December 14th, 2008 at 5:41 pm ·
Filed in: RSS WordPress   

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.

 • Read 3351 Times
Add to Del.icio.usAdd to Del.icio.us • Technorati ThisTechnorati This • Digg ThisDigg This • Stumble ItStumble it! • Twit ThisTwit This


 

 

8 responses so far ↓

  • 1 dash // Dec 24, 2008 at 4:09 am

    thanks! i have a little troubel with mine so found some usefull hints here in this post!

  • 2 RickHap // Jan 24, 2009 at 10:09 pm

    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.

  • 3 Maria Langer // Jan 25, 2009 at 8:57 am

    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.

  • 4 RickHap // Jan 25, 2009 at 3:03 pm

    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

  • 5 Maria Langer // Jan 26, 2009 at 7:14 am

    RickHap: Thanks for the CTC info and link. I’d much rather use something like that than have to manually hack code each time I want to make a change or I update WordPress.

  • 6 David // Feb 16, 2009 at 6:03 pm

    Worked flawlessly on my site, just as advertised. Thanks!

  • 7 Dave // Jun 9, 2009 at 9:02 pm

    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

  • 8 Maria Langer // Jun 10, 2009 at 6:14 am

    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!

Leave a Comment

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

If you have a Gravatar, it will appear beside your approved comment.
No Gravatar? Get one free!