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 }
Seriously, this was a life saver for my blog. Thank you so much for this. I searched for about an hour in my theme .CSS files trying to find the .CSS for this setting. Amazing and simple plugin. I definitely highly recommend this post.
I’m glad it worked for you.
Thanks Chris. Awesome plugin.
Thank you. Exactly what I needed. Thanks for your efforts.
Your plugin is perfect and easy to install. Thanks very much!
Works great! Thanks.
Have you considered packaging this as a plugin with a GUI so that users can auto install and change it? We’re all so lazy!
I have considered it. I will do it eventually (if no one does it before I do), but it is a bit of work, so it’ll take some time.
Wow … first one that has worked! Tried ALL OF THEM and not ONE would touch the existing Tag widget.
What is the 90 for in the code? We would like to control the number of tags displayed.
Thank you for a great plugin!
The 90 is just the priority of the filter. If you have other filters that hook the widget_tag_cloud_args filter, whether they are applied before or after this filter depends on the priority specified for each of the filters.
If you want to change the number of tags shown, you can add the following line:
Brilliant – you are a genius. The large fonts in the original tag cloud totally spoilt the whole look of the blog … now its neat and tidy. Thank you for producing that.
I have just gone to edit a post and when I click the “update” button I get this error message
Warning: Cannot modify header information – headers already sent by (output started at /home/livingk1/public_html/wp-content/plugins/orz-tag-cloud.php:24) in /home/livingk1/public_html/wp-includes/pluggable.php on line 865
any thoughts?
Thanks
I’ve tried to replicate the problem on a test server, and I can’t get the same error.
Did you copy the contents of orz-tag-cloud.php exactly, or did you make changes? The error information seems to indicate that something occurred on line 24 of orz-tag-cloud.php, but that file, if copied exactly, should only have 19 lines.
Also, are you using WordPress 2.8.x or an older version? The plugin only works with WordPress 2.8.x (and, presumably, future versions).
Hi,
I copied it exactly. I am using 2.8 version. It is strange …. I had previously tried another tag cloud plugin “New Tag Cloud” and that had the same results, so I am assuming it is something with my set up. Later in the day I went to my blog and the home page had that message and I couldnt access any page, so for now I have totally deleted all tag clouds. I plan to set up a test blog later where I can play around with it and not worry the main blog is not showing. I will let you know how I get on .. Thanks!
OK. Do let me know how it turns out.
One other thing that I was thinking is that you might try putting the orz-tag-cloud.php file in a subfolder (eg, wp-content/plugins/orz-tag-cloud), rather than directly in wp-content/plugins.
What other plugins are you using? I’d like to try to replicate this problem on my own servers.
Hi,
I will get back to you with the information soon …. out most of today so rather busy .. I will try using it in a different folder first …
Thanks
So far .. so good. I did as you suggested and put your plugin into its own folder and so far nothing has gone wrong! I have edited posts and done things that before gave me that error message and it is all working well…. Thank you very much, not only for the plugin but for helping me sort out the error. Not sure what caused that but it is solved now. Just so you know the other plugins I am using are:
1) Add to Any: Share/Bookmark/Email Button Help readers share, save, bookmark, and email your posts and pages using any service.
2) All in One SEO Pack – Out-of-the-box SEO for your Wordpress blog.
3) Google XML Sitemaps
4) Feedburner Feed Smith
5) Official StatCounter Plugin
6) Smart Youtube – Insert YouTube videos in posts, comments and RSS feeds with ease and full customization.
7) WordPress.com Stats
8) WP Post Sorting – Allows sorting of posts by post_title (ascending or descending) or post_date (ascending or descending), customizable for each category.
Thank you
I’m glad it worked in the end.
(I updated the post, changing the instructions to place the orz-tag-cloud.php in its own folder.)
Thanks Chris,
I was desperate about the uggly look on my blog BUT with your plugin it come out nice. Thanks and take care.
Thank you Chris !! Easy install, works just as described. Great plugin.
Well,
Kudos to you..In a big way…After stuffing around for a good 3 hours trying to get something that worked, I finally Googled your site here.
I Just upgraded to the latest WP yesterday and I made and uploaded your plugin in about 2 minutes flat and it is working like a charm so far..
Thanks again…
I can’t seam to get the number of tags argument to work. I added $args['number'] = 10; on top of the others
Humm?
Never mind. I got it. Nothing was wrong.
I activated it in the sidebar plugin list, but that only puts it in the main list and needed to be activated there.
Thanks for this!!!!!!!!!!
:-)
Do I need to enable the filter? How do I do that? I did everything verbatim and so far my tags are still all different sizes. Any help would be appreciated. I am new to WP.
Getting this now when I post:
Warning: Cannot modify header information – headers already sent by (output started at /home/content/r/u/s/myinfo/html/wordpress/wp-content/plugins/orz-tag-cloud/orz-tag-cloud.php:21) in /home/content/r/u/s/myinfo/html/wordpress/wp-includes/pluggable.php on line 865
Okay, I reuploaded the files, and I do not get the error, however, the tags are still different sizes.??
@Russ: You’re the second person to have this problem. Diane Franks (above) had it as well. In your case, it appears that something’s happening on line 21 of orz-tag-cloud.php. But that file should only have 19 lines.
Are you using WordPress 2.8.x? Are you using any of the same plug-ins as Diane Franks (above) was using? There might be some kind of conflict or incompatibility that I haven’t thought of.
(If you re-uploaded the files, and you’re not getting the error, you might need to re-enable the plug-in.)
I’ve finally tracked down the cause of the ‘Warning: Cannot modify header information – headers already sent…’ message. You can find the details here.
The short version is that you have to make sure that the very first characters in orz-tag-cloud.php are <? and that the very last characters are ?>.
If they’re not – if you have a space, or other whitespace characters, before or after <? and ?> respectively – you will get that error.
This is really helpful , Thank you :)
Works brilliantly. Thanks very much.
Just great!! Thanx!
Hi, just wanted to thank you for a great plugin. It came as a great help after having looked all over for a decent cloud tag method.
great tips brother, its very helpful. thanks for share.
Great post, thanks. This has been bugging me for ages….
Thanks for this. I tried it the first time and the extra white space was in there and so the error appeared – so the note you added was appreciated as now its working fine. Its something that the Wordpress crew will hopefully address soon as its a big hassle, looks untidy, but in my limited programming knowledge, doesn t look that complex to resolve! Thanks
I’m glad I ironed out that bug, and that it’s working for everyone now. I don’t understand why this feature isn’t included in WordPress yet either.
Sweet small, but powerful plugin! I’ll be using it from now on!
This is huge! I can find and edit the settings in the library, but I hated having to do it on all the sites I’ve ever designed whenever there’s an upgrade. Can’t thank you enough!
Me too.
thanks, works perfectly
works like a champ. thank you!
Nice & simple, Thanks
Thank you for this great plugin, it was a lifesaver, simple and fun to do for a non-programmer. I love it when things work. :-)
Hi,
Thanks for the plug-in! I had another question, what plug-in do you use for your recent twitter widget? The one I use is twitter for wordpress, however, the bug is that from time to time, it will display no public twitter messages, when in fact, there are. I read that it’s some kind of bug, do you use the same widget or do you have any suggestions as to how to fix it?
thanks!
I customised the JavaScript widget that you used to be able to get from Twitter.com directly, and I use that. Unfortunately, because I customised it all for my website, it’s not that convenient to set up.
If you want to use my version of the widget, you can download the twitter-widget.js file here.
You need to upload the twitter-widget.js JavaScript file to your server somewhere, and then include the following code in your blog—
In the place on your blog where you want the Twitter updates to show up (eg, in a WordPress Text Widget), include the following code—
The key part here is the <ul>…</ul> part. This is where the Twitter updates will actually show up. The rest is decoration. For example, the <h3>…</h3> part is a heading, which you can modify or remove.
In your footer, you need to include the following—
These scripts are included in the footer, right at the end of your website, so that your entire page loads before these scripts load. That way, if Twitter is slow on a particular day, it won’t hold up the loading of your page.
Remember to replace TwitterUser with your Twitter username and path-to-javascript with the path to the twitter-widget.js file on your server. You can also change the number of Tweets displayed by changing the number in count=15 to something else.
If this isn’t what you’re looking for, you can also try the JavaScript widgets that are available here.
It’s a good idea to avoid WordPress plugins that don’t rely on JavaScript. These plugins will try to download the Twitter updates on the server, before sending your page out. Because Twitter can take a while to respond, or may be offline, they will time out after a certain period (usually about two seconds). The JavaScript method doesn’t suffer from this same problem.
Superb little fix many thanks!
Great plugin.. and like someone else posted, this is the ONLY one that works.. I’ve been messing around trying to figure out how to change the color of the large and small tags.. I’m a LOT lost on how to do this.. Hoping for a quick assist here.. Thanks in advance!!!
@DivaVocals: Sorry to disappoint you, but there’s no easy way to change the colour of the tag links depending on their respective sizes. The built-in wp_tag_cloud function just doesn’t have that functionality.
You can have a look at the wp_generate_tag_cloud function in wp-includes/category-template.php to see how the built-in tag cloud widget generates its output.
It sets the size of the font in each tag link by reference to a smallest and largest size, which you can specify. But there’s no functionality for specifying a colour or a CSS class for each tag link based on its size.
You could modify this function so that it sets a particular CSS class for each link based on the font size (eg, where the font size would be 8 pt, output … class="tag-link-size-8" …). You could then provide a corresponding style in your CSS template.
However, the font size step may change at some point, which would break everything. For example, your tags might be sized, 8 pt, 10 pt, and 12 pt at one time. If you add two more tags later, the sizes could change to 8 pt, 9 pt, 10 pt, 11 pt, and 12 pt. That would mean that you would have to update your CSS styles.
An alternative method would be to provide a ‘smallest’ colour and a ‘largest’ colour and write code to fade between the two. I believe there are plugins that do that already.
Sorry I couldn’t provide you with a quick fix. :-)
Thanks for the response.. **sigh** I kinda figured you were gonna say this was little bit of trouble to execute..
“An alternative method would be to provide a ‘smallest’ colour and a ‘largest’ colour and write code to fade between the two. I believe there are plugins that do that already.”
Yeah tried a few of these.. Unfortunately my experience thus far with most of these tag cloud plugins is that they don’t seem to do anything.. This one works.. The color thing isn’t really a big deal.. Controlling the sizes and the number of links was more important in the BIG picture.. So I’ll live.. **LOL**
I’ve followed the instructiosn to a “T” no white spaces before or after, code is exactly 19 lines and I’m still getting the following errors. I have the plug-in in its own subfolder as well. Thanks for any help!!!
Here’s the warnings I receive after activating the plug-in…
Warning: Cannot modify header information – headers already sent by (output started at /home/content/d/e/n/denovomg/html/wp-content/themes/platinum/functions.php:1) in /home/content/d/e/n/denovomg/html/wp-includes/pluggable.php on line 868
Warning: Cannot modify header information – headers already sent by (output started at /home/content/d/e/n/denovomg/html/wp-content/themes/platinum/functions.php:1) in /home/content/d/e/n/denovomg/html/wp-includes/pluggable.php on line 868
As you can see from the code, I’m using the Studiopress Platinum Theme with the Studiopress Genesis Framework. The other plug-ins I’m using are…
>Dynamic Content Gallery
>Gravity Forms
>Orzeszek Tag Cloud
Ironically enough, your solution was the one provided by Studiopress in their support forum for my theme. Everyone can get it to work on their forum but me. I’m running version Version 2.9.2.
Can you confirm that the error goes away if you disable Orzeszek Tag Cloud, but leave all other plugins enabled?
Assuming that it does (which is implicit), then I’m not sure what causes the problem. Nothing in Orzeszek Tag Cloud explicitly sends the headers, and, as you can see from the code, it’s a very simple plugin that shouldn’t conflict with anything.
What text editor did you use to create the orz-tag-cloud.php file?
Perhaps you can send me your orz-tag-cloud.php file by e-mail (to the address on the About page), and I can have a look at it.
{ 8 trackbacks }