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.

  • Pingback: Display your WordPress Tags in a Drop-Down Menu | bloground.ro - Blogging resources, WordPress themes and plugins for your development

  • http://kyleeslick.com Kyle Eslick

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

  • Pingback: Tags in Wordpress in einem Dropdown-Menü anzeigen | mlogger

  • http://www.catswhocode.com Jean-Baptiste Jung

    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!

  • Pingback: Como exibir tags em um menu dropdown | pBlog

  • http://antnz.com Anthony – antnz.com

    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.

  • Pingback: DigiZen » Tags presentados mediante menú desplegable

  • Pingback: [How-to] Mostrar los tags en menú desplegable | Tinta Fantasma

  • Kris @ Fresh Focus

    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?

  • http://www.codeforexcelandoutlook.com JP

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

    Thx,
    JP

  • saltlakeeats

    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

      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?

  • Morgan

    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?

  • PaperQueen

    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.

  • saltlakeeats

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

  • http://www.footballandmusic.co.uk Webbie – Football and Music

    Genius.
    Love it.
    Cheers.

  • Pingback: 10 sehr interessante Wordpress Tutorials | Million-Maker.net

  • Bob

    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?

  • Ai Ling Ong

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

  • Pingback: 135+ Ultimate Round-Up of Wordpress Tutorials | About Us | instantShift

  • ron

    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.

  • Pingback: Design History Lab: technical » Blog Archive » menu link

  • ron

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

  • http://www.yatrinivas.com Shrinivas

    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?

    • Alexandra

      Oh, another very, very good question. Multiple tag drop down menues would be brilliant!

  • Pingback: 250 Wordpress Tutorials

  • M

    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.

  • ron

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

  • Pingback: 135+ Ultimate Wordpress Tutorials

  • Rick

    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…

  • Pingback: WordPress hack: Display your tags in a dropdown menu

  • sms

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

  • http://human3rror.com John (Human3rror)

    HAWT! love it, thanks!

  • Pingback: Anime Dropdown Widget

  • Pingback: Display your tags in a dropdown menu | WPThemes.com - WordPress Themes

  • Pingback: Tampilkan Tag Dalam Bentuk Dropdown | Tarqy dot Com

  • Pingback: WordPress hack: Display your tags in a dropdown menu | Quest For News, A TUTORIAL Base

  • dc

    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!

  • Pingback: WordPress hack: Mostra suas tags em um menu dropdown | Ajuda Wordpress em Português

  • Pingback: Címkék legördül? menüben | WordPress blog és weboldal készítés

  • Pingback: Wordpress:Etiketleri Aç?lan Menüde Gösterme | DownloadSEN

  • M A Dhavan

    Yes,

    This is a good hack.

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

  • http://www.boknowshomes.com kelowna

    Hello,

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

  • tiffany

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

  • Pingback: Menampilkan Dropdown Tags Cloud WordPress « andelumut

  • WordPressZen

    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!

  • http://rawarrior.com Kelly

    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.

  • Pingback: Menampilkan Dropdown Tags Cloud WordPress | Balisugar

  • Harry

    Thank you very much, works perfect.

  • http://dmaggio.carbonmade.com/ Giraldi Maggio

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

    • http://dmaggio.carbonmade.com/ Giraldi Maggio

      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:

      • http://dmaggio.carbonmade.com/ Giraldi Maggio

        Then call it with this code:

        http://www.zumodrive.com/share/1XRHZWViMj

        • http://estevancarlos.com estevan carlos benson

          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?

          • http://dmaggio.carbonmade.com Giraldi Maggio

            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.

  • Pingback: 13 Useful Code Snippets for WordPress Development | Web Design Ledger

  • Pingback: 37 Cool Wordpress Hacks And Tutorials You Should Try |

  • Pingback: 37 Cool Wordpress Hacks And Tutorials You Should Try | Afif Fattouh - Web Specialist

  • http://estevancarlos.com estevan carlos benson

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

  • Pingback: 37?Wordpress???? | ???

  • Pingback: 13 Useful Code Snippets for WordPress Development | WebsGeek

  • od3n

    how to show tags count using any wp function?

  • Pingback: 13 Useful Code Snippets for WordPress Development « HUE Designer

  • Dave

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

  • Pingback: 20+ WordPress Codes You Might Need On Your Next Project | Web Design Philippines | MikeWagan.net

  • Pingback: 50 Ultimate Tutorials To Make You A Power Wordpress User | stylishwebdesigner

  • Pingback: 136 Massive Wordpress Tutorial Collection | WebCoreStudio

  • http://www.ajitkumar.org/ Kumar

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

  • http://www.hillarybost.com hillary bost

    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.

  • http://utahdogs.com Cynthia

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

  • http://www.tatilyerlerim.biz Tatil Yerleri

    Genius. – Love it. – Cheers.

  • nikitha

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

    thanks in advance ..

  • Channa Connolly

    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

  • Pingback: 135 link cung c?p th? thu?t wordpress hot nh?t | T?p Chí SEO

  • Pingback: WordPress Themehacks » Die Tags in einem Dropdown Menu darstellen

  • Pingback: 135 webs/blog for wordpress tips |

  • http://www.vaseemansari.com/blog/ Vaseem Ansari

    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

  • nathan

    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

  • http://www.andersonnarciso.com Anderson

    Nice post man!

  • http://www.minue.es minue

    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

  • http://www.kizipop.com/ kizi pop

    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.