One of the annoyances about the default tag cloud widget in WordPress is that there is no easy way to change the minimum and maximum font size that the widget uses. While the recent release of WordPress 2.8 doesn’t add any UI to change those sizes, it’s now easier to change them than before.
WordPress 2.8 adds a new widget_tag_cloud_args filter, which you can use to override the default arguments that are passed to the wp_tag_cloud function. The filter provides a keyed array, where the smallest, largest, and unit keys represent the smallest font size, the largest font size, and the unit (‘pt’, ‘em’, ‘px’, etc) used by the default tag cloud widget.
You can change the minimum and maximum font size that the default tag cloud widget uses in WordPress 2.8 by creating a new plugin that hooks that filter as explained below.
Create a new text file called orz-tag-cloud.php. Copy and paste the following code into that text file, changing the relevant values (shown in bold) as desired, and save it.
<?php
/*
Plugin Name: Orzeszek Tag Cloud
Plugin URI: http://www.orzeszek.org/blog/
Version: 1.1
Author: Orzeszek
Author URI: http://www.orzeszek.org/blog/
Description: Changes the font sizes used by the tag cloud widget.
*/
function orz_tag_cloud_filter($args = array()) {
$args['smallest'] = 8;
$args['largest'] = 12;
$args['unit'] = 'pt';
return $args;
}
add_filter('widget_tag_cloud_args', 'orz_tag_cloud_filter', 90);
?>
Create a new directory called orz-tag-cloud in your wp-content/plugins directory, and upload orz-tag-cloud.php to the new directory. Finally, activate the plugin by logging into WordPress as an administrator, selecting Plugins from the menu, and selecting Activate for the Orzeszek Tag Cloud plugin.
Make sure that the very first characters in orz-tag-cloud.php are <? and that the very last characters are ?>. If they’re not (for instance, if you have a space after ?>), you may get a ‘Warning: Cannot modify header information – headers already sent…’ message. More info.
Update 1: I updated the plugin to be even simpler and more streamlined. I had originally adapted the plugin from a more complex plugin that provides certain functionality specific to my blog. The original class structure was unnecessary for this simple plugin, however.
Update 2: I updated the instructions to place the orz-tag-cloud.php in its own folder to minimise the potential for conflicts with other plugins.
Update 3: Added a note indicating the cause of the ‘Warning: Cannot modify header information – headers already sent…’ message, and how to avoid it.
{ 62 comments… read them below or add one }
← Previous Comments
Problem fixed!
I never touched the functions.php file in my theme, but the lovely people over at Studiopress said that was where the problem was. I re-uploaded the functions.php file and voila, everything is working flawlessly. There was absolutely nothing wrong with the orz-tag-cloud text/script, somehow I edited the functions.php file – have no how since I never touched it, but oh well, that’s the lovely world of computers!
Thanks again for your response – you’re a very good peson and I bless you with bountiful good karma.
Warmly,
Andrew
You’re very welcome. I’m glad it worked for you.
Dears!
Thank you very much for posting this as a remedy for ugly BIG tag cloud entries!
Working perfectly simple – simply perfect ;-)
best, oliver
You’re welcome. :-)
Thanks for this!!
Just what I was looking for.
Yes, this was most helpful, however I ended up just adding the filter into my functions.php file so that I wouldn’t need to activate or deactivate the plugin.
Cheers!
@Zachattack: That’s a great idea, actually. It never occurred to me to do it that way.
MAGIC – thank you, thank you
How do I increase space between the lines of Tags? I’ve had the problem of tags overlapping from above/below and not sure where I should target a fix, Padding? without changing the rest of my asides.
Any suggestions appreciated.
drec
@drec: I’m not sure that I understand the problem that you’re having. The default X/HTML that the tag cloud widget outputs shouldn’t ever have lines that overlap, unless you have set a custom line-height in your CSS.
Try adding .widget_tag_cloud { line-height: normal } to your CSS file. If that doesn’t work, try adding .widget_tag_cloud { line-height: 12pt }, except replace 12pt with whatever your largest font size in your tag cloud is.
If none of the above works, let me know. I may be able to help out, but I’d probably have to have a look at the site to figure it out.
Thanks, that did the trick. I’m rebuilding locally and I’m using Reenie Beanie from Google’s Font directory and it’s a quite tall font(depending on character).
@drec: I’m glad it worked. :-)
← Previous Comments
{ 8 trackbacks }