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(' ', '&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'>nt<li>";
		$return .= join("</li>nt<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 is a blogger/web developer/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code.com where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WPRecipes.com 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 traveling everywhere he can.

  1. Kyle Eslick says:

    @ 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!

  2. 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!

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

  4. Kris @ Fresh Focus says:

    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?

  5. JP says:

    Can you arrange the tags so they are sorted by count instead of alphabetically?

    Thx,
    JP

  6. saltlakeeats says:

    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!

    • Alexandra says:

      Hi, I’d really appreciate a plugin on this topic, too. Plus the option to edit the design since I tried and failed trying to do some css on it.

      With the latest version of WP it still works, yet since I wrote it into the code, it’s gotten more complicated to save & reload the editor – loads a blank page and I have to go to Design -> editor -> file again after every change I made.

      Still a very good post! I’m dying if there’s some improvement by now, a plugin with edible css?

  7. Morgan says:

    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?

  8. PaperQueen says:

    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.

  9. saltlakeeats says:

    @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!

  10. Bob says:

    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?

  11. Ai Ling Ong says:

    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 :(

  12. ron says:

    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.

  13. ron says:

    I got the scroll bar to appear by adding more tag entries.

  14. Shrinivas says:

    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?

  15. M says:

    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.

  16. ron says:

    do you know of a similar script for authors? I would like to display the authors of posts in a drop down list.

  17. Rick says:

    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…

  18. sms says:

    great tutorial just love it :)
    i will use it on my decentsms.com blog

  19. HAWT! love it, thanks!

  20. dc says:

    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!

  21. M A Dhavan says:

    Yes,

    This is a good hack.

    Can anyone help me to find out how can i create a css web gallery using wordpress

  22. kelowna says:

    Hello,

    I too got the scroll bar to appear by adding more tag entries.

  23. tiffany says:

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

  24. WordPressZen says:

    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!

  25. Kelly says:

    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.

  26. Harry says:

    Thank you very much, works perfect.

  27. 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!!

  28. Is there a way I can exclude all tags from a certain category?

  29. od3n says:

    how to show tags count using any wp function?

  30. Dave says:

    Is it possible to run this in conjunction alongside a category drop down? I want to user to only see results in the specified category that matches up with the tags.

    Basically what I’m doing is creating a nights out listings website using the categorys as the venue ie Restaurant and the tags as the locations ie London so if someone selects Restaurant from one drop down menu and then selects London from the other drop down the search page will only publish Restaurants in London

    Please tell me this is possible or I’m probably going to cry :(

  31. Kumar says:

    Thanks for your effort. Nice work. Keep posting such thing.

  32. hillary bost says:

    Thanks I have been trying to figure this out for awhile now. I knew it wasn’t that hard I just never really looked into how to do it.

  33. Cynthia says:

    Very nice! I’d love to see this released as a plugin. :)

  34. Genius. – Love it. – Cheers.

  35. nikitha says:

    please help me where to add the code in functions.php ????

    thanks in advance ..

  36. Channa Connolly says:

    Hooray! Someone finally made this functionality in a plugin! i’ve implemented it on several sites and it works great :0)

    http://www.ethitter.com/plugins/tag-dropdown-widget/#idc-cover

  37. Hello Friend

    i want to use wordpress nav menu function.
    i am using primary menu and added few sub menu in that menu using wordpress admin.

    Now i want to show those parent menu and their child menu in header dropdown of my website.

    I am using the function
    $menus = get_terms( ‘nav_menu’, array( ‘hide_empty’ => true ) );

    But i dont have any clue about achieving this functionality in header.
    My code development website is http://showprojects.net/projects/csrc/

    Thanks for support

  38. nathan says:

    Thanks, this is an excellent article, very easy to implement.

    I have a question about altering the functionality. Is it possible to show results on the same page as the drop down? I’d like to be able to load posts into a page based on which tag the user selects.

    Thanks!
    nathan

  39. Anderson says:

    Nice post man!

  40. minue says:

    actually, there is a much easier way to do this using the wp_dropdown_categories function of WordPress, where you can list any registerd taxonomy.

    For tags, for instance, you can use

    And there are some other options such as tag count and others.

    http://codex.wordpress.org/Function_Reference/wp_dropdown_categories

  41. kizi pop says:

    I really love the design, very nice and clean. but im searching for simple tags with tags counts beside. In a list style. because it suits on my template. hope you can have article on tags lists with tag counts. very helpful. Thanks for sharing admin.

Trackbacks/Pingbacks »

  1. Display your WordPress Tags in a Drop-Down Menu | bloground.ro - Blogging resources, WordPress themes and plugins for your development says:
  2. Tags in Wordpress in einem Dropdown-Menü anzeigen | mlogger says:
  3. [How-to] Mostrar los tags en menú desplegable | Tinta Fantasma says:
  4. 10 sehr interessante Wordpress Tutorials | Million-Maker.net says:
  5. Design History Lab: technical » Blog Archive » menu link says:
  6. 250 Wordpress Tutorials says:
  7. Anime Dropdown Widget says:
  8. Tampilkan Tag Dalam Bentuk Dropdown | Tarqy dot Com says:
  9. WordPress hack: Display your tags in a dropdown menu | Quest For News, A TUTORIAL Base says:
  10. WordPress hack: Mostra suas tags em um menu dropdown | Ajuda Wordpress em Português says:
  11. Címkék legördül? menüben | WordPress blog és weboldal készítés says:
  12. Menampilkan Dropdown Tags Cloud WordPress « andelumut says:
  13. 37 Cool Wordpress Hacks And Tutorials You Should Try | Afif Fattouh - Web Specialist says:
  14. 37?Wordpress???? | ??? says:
  15. 13 Useful Code Snippets for WordPress Development | WebsGeek says:
  16. 135 link cung c?p th? thu?t wordpress hot nh?t | T?p Chí SEO says:
  17. WordPress Themehacks » Die Tags in einem Dropdown Menu darstellen says:
  18. 135 webs/blog for wordpress tips | says:

Leave a Reply