Post Pic

WordPress hack: Display your 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(' ', '&nbsp;', 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.

Related Posts

Related Posts

No related posts.

32 Responses

Jun 05 2009 10:31

yet another great tutorial by WPrecipes :)
you people just rocX

Jun 05 2009 11:02

good tutorial…!thanks

Jun 05 2009 12:45

really great, have to try this! You have a Demo for this?

Jun 05 2009 12:52

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..?

Jun 05 2009 15:28

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.

Jun 06 2009 06:55

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.

Jun 06 2009 10:31

Another piece of code that actually rocks. Great post Sir! Hope I can cope up with most of your posts.

Jun 06 2009 14:22

Thank you for the tutorial, this is very useful.

Jun 06 2009 15:43

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.

Jun 06 2009 15:54

A live demo can be viewed here. (Look in the sidebar, the dropdown is entitled “Liste d’auteurs”)

Jun 06 2009 16:58

Great tutorial, thanks

Jun 07 2009 06:30

Really very nice tutorial. I would definitely implement it and also tell
to my friends about it..

Jun 07 2009 20:59

Great piece of code. I still like the cloud though :)

Jun 08 2009 07:35

I love this.. I hope it makes my theme special =P

Jun 08 2009 16:42

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.

Jun 14 2009 04:33

Sounds great.

But I don’t know where I should insert the code in these two files.

Could you tell me?

Jun 15 2009 09:03

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

Jul 14 2009 04:50

Just what I needed! Thanks so much! Worked like a charm!

Cheers!
Jay

Aug 10 2009 01:06

This works great. Do you know of a way to hide certain tags from appearing in the drop-down?

Aug 13 2009 03:49

Nice one Jean, I am using on my blog and it works great!

Sep 25 2009 01:34

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!

Nov 10 2009 19:58

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

Nov 21 2009 12:33

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:

Leave a Comment

* Name, Email, Comment are Required