Tags are useful to any blog: As you know it, they allow the user to display a list of posts related to a subject.
Most of the time, tags are displayed with in a tag cloud. If you have 20 different tags, that’s ok, but if you have 100 or more tags your tag cloud will be very hard to read, and no-one will click on it.
This is probably why many blogs recently stopped displaying their tag cloud, or put it on a separate page. But I got another solution.
My wife owns a blog where she reviews books. She use tags to display author names, which is a great use of tags, in my opinion. The tags were first displayed as a list, and it was perfect. But after she reviewed 60+ books, the list started to be too long.
She asked me about a solution, and after some reflection, I came up with the idea of using a drop-down menu (select html element + a bit of javascript). Happily, I was able to found this code on WordPress forums.
First, we have to create a php function. Copy and paste the following code in the functions.php file of your theme (Be careful with the php opening/closing tags!)
<?php
function dropdown_tag_cloud( $args = '' ) {
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
'exclude' => '', 'include' => ''
);
$args = wp_parse_args( $args, $defaults );
$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags
if ( empty($tags) )
return;
$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
if ( is_wp_error( $return ) )
return false;
else
echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}
function dropdown_generate_tag_cloud( $tags, $args = '' ) {
global $wp_rewrite;
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
);
$args = wp_parse_args( $args, $defaults );
extract($args);
if ( !$tags )
return;
$counts = $tag_links = array();
foreach ( (array) $tags as $tag ) {
$counts[$tag->name] = $tag->count;
$tag_links[$tag->name] = get_tag_link( $tag->term_id );
if ( is_wp_error( $tag_links[$tag->name] ) )
return $tag_links[$tag->name];
$tag_ids[$tag->name] = $tag->term_id;
}
$min_count = min($counts);
$spread = max($counts) - $min_count;
if ( $spread <= 0 )
$spread = 1;
$font_spread = $largest - $smallest;
if ( $font_spread <= 0 )
$font_spread = 1;
$font_step = $font_spread / $spread;
// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
if ( 'name' == $orderby )
uksort($counts, 'strnatcasecmp');
else
asort($counts);
if ( 'DESC' == $order )
$counts = array_reverse( $counts, true );
$a = array();
$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';
foreach ( $counts as $tag => $count ) {
$tag_id = $tag_ids[$tag];
$tag_link = clean_url($tag_links[$tag]);
$tag = str_replace(' ', ' ', wp_specialchars( $tag ));
$a[] = "\t<option value='$tag_link'>$tag ($count)</option>";
}
switch ( $format ) :
case 'array' :
$return =& $a;
break;
case 'list' :
$return = "<ul class='wp-tag-cloud'>\n\t<li>";
$return .= join("</li>\n\t<li>", $a);
$return .= "</li>\n</ul>\n";
break;
default :
$return = join("\n", $a);
break;
endswitch;
return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>
Once you have your function, you must call it somewhere on your theme. Just open the file where you want the list to be displayed (Most of the time it is sidebar.php) and paste the following code:
<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="#">Liste d'auteurs</option>
<?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>
Now, you have a very cool drop-down list to display you tags. No more unreadables tag clouds!
Jean-Baptiste Jung
Jean-Baptiste Jung is a 27 years old blogger/web developper/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WpRecipes where Jean shares useful WordPress snippets on a daily basis. When he's not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and travelling everywhere he can.
I also love using the editor image its fantastic and very useful. 
Kyle,
Your blog has been recommended to us as a interviewee's favorite blog!
We would like to do an interview with you ...
Looking through some more recent theme frameworks for Wordpress and stumbled upon this one.
The link for the demo seems ...
Great theme, I only have one problem, the smooth gallery will not accept images from my server so I had ...
@ Jean – I love this post! There are quite a few sites I could use this on, but coincidentally, my wife also runs a book review blog, so that seems like a good place to start.
Nice work!
Thanks Kyle! I think that it’s not easy to read a tagcloud, so we got to find other ways to display tags. I got other ideas, maybe for a future HWP post!
Very nice post. Really does take over your sidebar when you have to many tags. However if you only have a few it is nice to have them in a tag cloud.
This isn’t working for me for some reason. I get an error upon compile of either line 115 or line 27. Maybe my existing functions.php is an oddball and this just isn’t compatible?
Can you arrange the tags so they are sorted by count instead of alphabetically?
Thx,
JP
Is there any chance you might turn this into a plugin so that code challenged people such as myself could deploy this? I tried the cut and paste method you outlined, and got the dropdown box to display in my sidebar, but for some reason it does not autopopulate any of my tags into the drop down list…
Please pardon my newbie-ness! This is my first WP site and I’m amazed at the community of people kind enough to share their plugins and support time for free!
Great code! But I would like to use a drop-down menu to display “post” author names and I don’t want to use tags… Any ideas?
I’m with saltlakeeats; would kill for a plugin, as someone also new to WP. It’s been a real uphill battle so far, given the fact I’m (a) not a coder, and (b) trying to teach myself about php scripts along the way. Not a good combination…trust me.
@PaperQueen — shoot me an email at saltlakeeats@gmail.com because I’ve got a friend of mine working on a “fix” to get this drop down tag list code working on my WP site…I’ll share what I learn with you!
Genius.
Love it.
Cheers.
I tried your code with Wordpress 2.7 and I have some bug into de dashboard. Does this code have been test whit Wordpress 2.7?
Warning: Cannot modify header information – headers already sent by (output started at /home/ailing/public_html/simplechemconcepts/wp-content/themes/InSense/functions.php:89) in /home/ailing/public_html/simplechemconcepts/wp-admin/theme-editor.php on line 62
I got this error msg
I just tried the function above and it works.
The only problem I have is that if I try to cut down the number of tags that show up in the drop down initially by changing the number value in the call to the function from 0 to 5, I only get 5 entries without a scroll bar to get to the rest.
How can I make the scroll bar appear?
Thanks.
I got the scroll bar to appear by adding more tag entries.
Thank you for the very useful post. I am trying to display multiple clouds. Taking a typical example of book review, say if I want to display a cloud of authors, a cloud of book publishers and say another of book section (history, arts, science, etc.) and so on.
Is there any way to have multiple tag clouds?
This functions.php file messes up font sizes in Safari 4, IE6, IE7 and possibly others.
I have my (base) font size set to 62.5% (10px equiv) in the body. When I use this code in the functions.php all fonts page wide seem to be of something like 18 or 20px size.
do you know of a similar script for authors? I would like to display the authors of posts in a drop down list.
I’m having the same trouble as saltlakeeats… The drop-down menu shows up in my sidebar, but with none of the tags. It’s probably because my theme (Atahualpa) seemingly doesn’t have a sidebar.php I can edit, so I just had to paste the second portion into a text widget in the sidebar. Any ideas how I can work around this to get the list onto my site? I have really minimal code experience and it’s driving me crazy…
great tutorial just love it
i will use it on my decentsms.com blog
HAWT! love it, thanks!
Thanks a lot for the script! Worked great on my blog. The weird thing was that since I’m using a child theme I had to replace the functions file in the parent theme instead of just uploading the functions file to the child theme directory. Anyway it all works so I can’t complain! Thanks again!
Yes,
This is a good hack.
Can anyone help me to find out how can i create a css web gallery using wordpress
Hello,
I too got the scroll bar to appear by adding more tag entries.
The weird thing was that since I’m using a child theme I had to replace the functions file in the parent theme instead of just uploading the functions file to the child theme directory…..
It appears that thanks to custom taxonomies in 2.8, and a plugin by Joost de Valk called Simple Taxonomies (find it at http://yoast.com/wordpress/simple-taxonomies/) there is now a non-code method to create tags and display them as a drop down list.
The open source community rocks!
I have spent all day trying to make this work. It is with wordpress 2.8.4 and a theme called flourish. Is there anything that could be interfering with it. The dropdown does not appear in the sidebar unless it is put in as a widget. But it is empty. Please tell me if you have any ideas.
Thank you very much, works perfect.
Great tutorial!! Thanks!!
Anyway, do you know of a similar script for custom taxonomies? I would like to display the custom taxonomies of posts in a drop down list + having the post count of each term to be displayed.
Ca you help? Cheers!!
I managed to modify it for custom taxonomies. Not sure how buggy it is though. It works so far though not perfect. Maybe somebody can help clean it up.
Here’s the code for the function:
http://www.zumodrive.com/share/1XR1MTQ2MG
Then call it with this code:
Select:
Then call it with this code:
http://www.zumodrive.com/share/1XRHZWViMj
I’ve been looking around for a way to exclude tags of a category in my list. It sounds like you’re doing something along the lines of what I want. I didn’t realize Wordpress offered any taxonomy features. I was about move over to Drupal. Anyway, I haven’t thoroughly taken a look at your script or the WP taxonomy features, but how is it working out for you? Can you show me examples of your use of this customization?
Yes, there is actually a way to create custom taxonomies, although only tag style one is currently possible. There is a tutorial on it somewhere in the net. But so far I only use plug-ins for it:
Simple Taxonomies
http://yoast.com/wordpress/simple-taxonomies/
or
Custom Taxonomies
http://nerdlife.net/custom-taxonomies/
The second one allows for a hierarchical version of taxonomies, but I think the plugin has some issues. Nevertheless, it works quite well.
I had tried it on a website that is still in progress, so it’s not online yet. However, you can see a screenshot of it from the link below:
http://www.zumodrive.com/share/3zANNTEwYj
It shows 2 custom taxonomies. I implemented the drop-down method above for the the second one.
Is there a way I can exclude all tags from a certain category?
how to show tags count using any wp function?