Redirect to Post List by Taxonomy on User Selection of Taxonomy Dropdown?

2 comments

1. Hi @ntechi:

   Here’s a function I wrote which I named the_taxonomy_dropdown() to give you what I think you are looking for.

   function the_taxonomy_dropdown($taxonomy) {
     $id = "{$taxonomy}-dropdown";
     $js =<<<SCRIPT
   <script type="text/javascript">
    jQuery(document).ready(function($){
     $("select#{$id}").change(function(){
       window.location.href = $(this).val();
     });
    });
   </script>
   SCRIPT;
     echo $js;
     $terms = get_terms($taxonomy);
     echo "<select name="{$id}" id="{$id}">";
     foreach($terms as $term) {
       echo '<option value="';
       echo get_term_link(intval($term->term_id),$taxonomy);
       echo '">' . "{$term->name}</option>";
     }
     echo "</select>";
   }
   

   You can put the_taxonomy_dropdown() in your theme’s functions.php file and call it from one of your theme’s template files like so:

   <?php the_taxonomy_dropdown('name of taxonomy'); ?>
   

   Notice I didn’t use wp_dropdown_categories() because it sets the <option>‘s values to term_id instead of the term’s permalink. You need the permalink in order to set the window.location.href on the client end. Had we used wp_dropdown_categories() it have would added more complexity; it would have required issuing an HTTP GET request with term_id to a page on the server that would then redirect to the term’s permalink. But it’s much easier to just build the HTML <select> ourselves as I did (and it’s more peformant, since it doesn’t take an extra HTTP request.)

   Of course, be sure to remember wp_enqueue_script() jQuery in an 'init' hook, also in your theme’s functions.php file:

   add_action('init','jquery_init');
   function jquery_init() {
     wp_enqueue_script('jquery');
   }
   

   Log in to Reply

2. I was looking at this problem again today, that is, the dropdown element returned by wp_dropdown_categories() setting option values to the term’s ID..

   Now whilst this makes the dropdown a little useless for filter dropdowns or jump menus, it is actually possible to rejiggle the JS used so it works “as is”…

   Here’s a basic example, which is based on the code posted above.

   function the_taxonomy_dropdown( $taxonomy = '', $query_var = '' ) {
   
       if( empty( $taxonomy ) )
           return;
   
       if( empty( $query_var ) )
           $query_var = $taxonomy;
   
       $select_id = "{$taxonomy}-dropdown";
       $url_base = get_bloginfo('url') . "/$query_var/";
       ?>
   
       <script type="text/javascript">
       jQuery(document).ready(function($){
           $("select#<?php echo $select_id; ?>").change(function(){
               var term = this.options[this.selectedIndex].text;
               window.location.href = "<?php echo $url_base; ?>" + term;
           });
       });
       </script>
   
       <?php
       wp_dropdown_categories( array( 'taxonomy' => $taxonomy, 'id' => $select_id ) );
   }
   

   NOTE: This examples JS assumes you are using pretty permalinks.

   If your taxonomy uses a query var that differs to the taxonomy slug you pass into the function, simply add the query var as the second parameter..

   the_taxonomy_dropdown( 'post_tag', 'tag' );
   

   Please note, this is just an example to show you how to work around the issue with wp_dropdown_categories and custom taxonomies by making changes to the JS.

   Also for reference, there’s a ticket here that was due for a patch.
   http://core.trac.wordpress.org/ticket/13258

   Log in to Reply