How to Create a Dropdown List of Specified Pages in a Widget

I had a bit of a time finding the answer to this one, but I solved it by searching high and low and thought I’d share:) A client I’m working with has a few different series of products and along with the standard categorical framework, they needed an easy way for their customers to “jump to information” on different series of products. They also wanted this series list in a dropdown menu displayed on most pages. So, here’s what I did…

I am using posts to display individual product information, but I needed to use individual pages to display the information about a particular product series. Using pages posed a bit of a quandary though when I started thinking about how to display them in a dropdown list. Why? category-widgetHave a look in your WordPress Dashboard–>Appearance–>Widgets area. Look at the Categories widget. See that option in there to “show as dropdown”?

Now have a look at the Pages widget. Go ahead, I’ll wait…

…right! WTF? No option to display pages as a dropdown list? Why? Who knows, but I needed to solve it so I set forth on my search. The first thing I did was look for a Template Tag similar to wp_dropdown_categories and I found one for pages named wp_dropdown_pages. Now, I needed to use this tag AND be able to specify the individual pages to be included AND the order of these pages. Before we get to that code, the first thing I needed to do was to figure out the easiest way to get it displayed in a widget. As you might know, WordPress doesn’t allow for inserting PHP code into your widgets by default, so finding a plugin for that was the first task. Luckily, I came across Otto’s PHP Code Widget plugin pretty quickly and since Otto’s pretty ingrained in the WordPress world, it seemed very likely that this plugin would be “future-proof”. OK, so now I can put PHP code inside a widget.

I then wrote some pretty simple code using the wp_dropdown_pages Template Tag (or function) to pull a list of pages into my PHP Code Widget. It looked like this: (with proper beginning and ending PHP tags not seen in this example) wp_dropdown_pages(‘include=1409,1411,1413&sort_column=ID’). I saved my widget, refreshed my main page, and presto, a pages dropdown list. But wait!!! When selecting any page from the list, none of them were being loaded by the browser. HUH?

So, off again I went to search the Template Tag section of the Codex. I found this on the wp_dropdown_pages detail page:

wp_dropdown_pages_codexSee the section entitled 5.1? With Submit Button? But I don’t want a submit button, I want a “jump” menu. Take me to the page when selected. It works in the categories widget by default and there’s not even an example of how to achieve this with dropdown pages. Say it ain’t so WordPress gods, say it ain’t so!

After much time searching the Codex, forums, and blog posts, and bothering online friends who have better things to do, I finally found the answer. Guess where. The Codex! I missed it initially, but the answer is there, only it’s on the wp_dropdown_categories Codex page and not the wp_dropdown_pages Codex page.

wp dropdown categoriesSee examples 4.2 and 4.3. Those were my answers. Actually 4.3 was my answer. I took that bit of code, replaced all references to categories and replaced with pages, and Bam! A dropdown list of pages that works like a charm! Here’s the end result:

Screen shot 2009-10-08 at 2.41.15 PM

Here’s what my PHP Code Widget looked like with the code inside: (notice I commented out the H2 title tags also)

php-code-widget-dropdown-pages

I hope that helps and if you use this trick, please post a link in the comments.

[AppAd]