John&Jacq~s Garden

Display WordPress Tags in a Dropdown Menu

It’s beneficial to display tags in any blog/website to maximize the availability of content options to your readers. Tags help to group one’s blog posts by keyword and link readers to such related content. Usually seen at the sidebar, it may be displayed as a tag cloud, tag list or tag dropdown.

How happy I was when I discovered how to add a tag cloud to our right sidebar late last November. However my excitement was short-lived when I observed that the display does look too long and cluttered, without uniformity in text size and colour. And, not knowing how to customize that, I just had to tolerate it as undoubtedly, tags are useful.

A better alternative to a tag cloud would be a dropdown tag menu that takes up such little space. Sweet and tidy, where the user just toggle to expand or contract the dropdown list of tags as desired. Another advantage is the dropdown menu includes ALL the post tags whereas the tag cloud limits to only 45 most popular tags.

Tag dropdown would definitely be a good replacement for the tag cloud displayed in our blog but I was in no hurry to learn how to achieve that. Procrastinated the matter until early this week when a blogger friend wanted advice on how to add labels dropdown to her WordPress blog.

That set me on a wonderful journey of learning and new discoveries. I googled for answers and discovered the Tag Dropdown Widget (version 1.5.2) in the WordPress Plugin Directory. Had it installed pronto at our blog’s sidebar, though it took me like ages with lots of hiccups along the way to finally get it right. After much trial and error using our site as a testing ground, with our contents occasionally missing due to a slight slip in the function code that was inserted in the theme’s template file, and sidebars doing their disappearing act, I’m most happy with the outcome. Hee hee…thank God, I’m not that faint-hearted, scary though at times!

This WordPress widget, Tag Dropdown Widget 1.5.2 by Eric Hitter is fantastic! It displays a list of tags in a dropdown menu with option to trim long tag names, display post counts, exclude specific tags and can be configured for use by non-widget themes, among others. Isn’t that wonderful?
Thank you so much, Eric Hitter…God bless you!!

Important Update (highlighted in red) – March 5 2010:

Effective March 1 2010, the Tag Dropdown Widget had been upgraded to version 1.6. Refer to the following links for further information and explicit instructions:
– Plugin Homepage for Tag Dropdown Widget
– Readme for Tag Dropdown Widget v1.6
– WordPress Plugin Directory: Tag Dropdown Widget

Nevertheless, if you wish, you can still browse through the tutorial below as a guide since the basic steps can be similarly applied, just that the window pop-ups will now display the latest version, v1.6 and its description instead.
And, for those not using a widget-enabled theme, you can activate the widget by inserting the function <?php if(function_exists('TDW_direct')) {TDW_direct("limit", "count", "exclude_tags");} ?> to where you want the dropdown to appear. Replace limit with the maximum tag length to display, using “0” to display full tags. To display post counts, set count to “on”, otherwise count should be set to “off”. To exclude specific tags, replace exclude_tags with a comma-separated list of tag slugs, such as “general, wordpress, widget”.
(Take note that the TDW_direct now replaces the makeTagDropdown function in step #6 below).

Learn to display your WordPress tags in a dropdown menu, using the Tag Dropdown Widget v1.5.2 :

1. Log in to your WordPress site. At the site admin panel, scroll down to locate Plugins on the left column and click on its sub-item Add New.
   
2. The Install Plugin window opens. Type in the text: tag dropdown widget in the search box and click Search Plugins.
   The search result will then show the plugin, Tag Dropdown Widget with relevant details. If you wish to get one, click the Install link located to the right to proceed.
3. A window pops up – click the Install Now button.
   
4. When another window opens, click the Activate Plugin link.
   
5. Then, to activate the widget, go to Appearance and select the sub-item Widgets and follow steps to add the widget to your sidebar. Select options for the widget, click Save and then View Site to locate your newly added Tag Dropdown widget. That’s it!
   Simple and easy for WordPress widget-enabled themes.
   
   (Hee hee, discovered the hard way that our site’s theme is not widget-enabled. Each time, the Tag Dropdown Widget was dragged to the sidebar as seen in above image, it did emerge at site but had to be removed promptly from here as the other existing contents and widgets at the sidebar just disappeared! Wonder why? Scary, huh!)
6. However, if your blog’s theme is not widget-enabled, then you have to tweak a little at your blog’s template to set up the widget.
   Go to Appearance > Editor and click on the theme file, Sidebar (sidebar.php) located at the right column. To activate the widget, insert to where you want your dropdown to appear, the following function code, replacing x with the maximum tag length desired :
   <?php if(function_exists('makeTagDropdown')) {echo makeTagDropdown('x');} ?>
   
   Note: This is optional for those sites/blogs who have their widgets in listed format, like ours – to ascertain that the Tag Dropdown widget is properly displayed likewise, insert additional HTML codes before and after the function code and should appear as follows, and as seen in image below :
   <li>
<h2>Tags</h2>
<?php if(function_exists('makeTagDropdown')) {echo makeTagDropdown('50');} ?>
</li>
   
   
   When you’re done with editing or configuring, click on the Update File button to save. Then, View Site to see whether the Tag Dropdown Widget is properly presented.
   
   Warning: You must be extremely careful that the exact codes are copied and pasted, just one slight slip and it’s a goner! Remember too that only plain text and plain text quote marks and apostrophes will work in template files…smart or curly quotes or apostrophes will definitely not work in PHP codes and may result in blog’s content disappearing. Also, make a backup of the theme file before you edit it and keep notes about your edits, just in case you need to revert back to the original and start all over again.

Please bear in mind that I’m technically challenged and am no expert on PHP and the likes. Just keen in documenting and sharing my experience through it all, and hoping in the process, may help others seeking solutions to improve their blog’s design too. Moreover, who knows that I may need these nitty-gritty details should I decide to remove this widget one fine day. Ahah, fickle again so soon…well that’s the spice in my life as I get to learn other new things, huh!

Hope the above tutorial which I’ve tried to present as best as I could with illustrations, had helped you to install a Tag Dropdown widget for your blog and put a smile on your face, yes?

Check this awesome article by Lorelle for more insights on how to install, configure and use WordPress Plugins.

Tags: blogging tips, dropdown menu, plugins, widgets, wordpress