
I never liked tag clouds, for the simple reason that most of the time, they’re aren’t readable properly. Here is the solution to this problem: Displaying tags in a dropdown menu.

I never liked tag clouds, for the simple reason that most of the time, they’re aren’t readable properly. Here is the solution to this problem: Displaying tags in a dropdown menu.
The first thing to do is to create the function. Paste the following code to your functions.php file:
<?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 done, you can use the function to get your dropdown menu of tags. 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>
This recipe was initially published on WpHacks.
32 Responses
yet another great tutorial by WPrecipes
you people just rocX
good tutorial…!thanks
really great, have to try this! You have a Demo for this?
I’ve tried and it works great. But it’s not exactly what i need. I was wondering if it is possible to make a drop down menu and not a select box..?
I agree that tag clouds are not easily read. This is a neat attempt to make a huge mass of tags more streamlined, but…
Isn’t the “onchange” jump/select counter-usable? Not only does it require JavaScript to run, but it makes navigation with a keyboard or screen reader a nightmare! Plus, you’ve got a floating form element without a form.
Consider using a submit button and form element without JavaScript. Then we’ll be moving forward with web standards and usability. But, then again the title of this post had the word “hack” in it.
Another awesome hack. That is the perfect solutions for those who doesn’t like the tag cloud. I personally don’t like those. But it’s simply great. Thanks.
Another piece of code that actually rocks. Great post Sir! Hope I can cope up with most of your posts.
Thank you for the tutorial, this is very useful.
Wow, this is really neat! I totally agree with you about the readability issues of standard clouds, but this helps a lot. Also, have you ever considered live demos or screenshots? I was hesitant at first to try this, and one of those items may make the user experience more friendly.
A live demo can be viewed here. (Look in the sidebar, the dropdown is entitled “Liste d’auteurs”)
Great tutorial, thanks
Really very nice tutorial. I would definitely implement it and also tell
to my friends about it..
Great piece of code. I still like the cloud though
I love this.. I hope it makes my theme special =P
Yup, i was thinking same like you Jean. I simply couldn’t find any tag cloud user friendly and well organized. Surely, with drop down menu, it doesn’t look too much obtrusive, but it’s very effective.
Sounds great.
But I don’t know where I should insert the code in these two files.
Could you tell me?
Yeah tag clouds are visually and aesthetically pleasing but they are not as practical as they should be. This makes it much easier to read, and it is a nice solution.
Till then,
Jean
Just what I needed! Thanks so much! Worked like a charm!
Cheers!
Jay
This works great. Do you know of a way to hide certain tags from appearing in the drop-down?
Nice one Jean, I am using on my blog and it works great!
I have tried everything I can think of. I am using wordpress2.8.4 and a theme called flourish. I can’t make this work. I have tried inserting into widget or sidebar.php.
any ideas? I really love your list disply!
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:
http://www.zumodrive.com/share/1XRHZWViMj
I got this to work not as a drop down but a list displaying the most popular 10 tags… anyway to make it in two list side by side link in this post
http://www.wprecipes.com/display-your-categories-in-two-columns
Trackbacks: