Taxonomy Dropdown Example

Taxonomy Dropdown Example

In this post, I’ll outline how to create a taxonomy dropdown in WordPress that lets the user choose an option, then reloads the page to only show entries that match the taxonomy term they chose. This is extremely useful for filtering a list of results to show only what your visitor is interesting in seeing.

Let’s say we have a custom post type called ‘tool’, and we’ve created a custom taxonomy to organize our tools called “tools”. Our “tools” taxonomy has terms such as “hammer”, “nails”, “saw”, etc.

To customize the code below to work for your purposes:

  • Change ‘tool’ to whatever post type you’re using -- this could be ‘post’ or ‘page’ (which are both built in to WordPress) or any custom post type
  • Change ‘tools’ to whatever taxonomy you’re using -- this could be ‘category’ or ‘tag’ (which are both built in to WordPress) or any custom taxonomy
  • Change the “km_” function prefix to something unique.

Put this code in functions.php:

Then put this code in your page template:

Happy filtering 🙂

10 comments

  1. Karls October 12, 2015 at 11:34 am

    Reply

    Interesting, got this to work easily – thanks. How would you modify this to allow filtering from one or two taxonomies for the same CPT?

  2. sathish March 19, 2016 at 7:53 am

    Reply

    How i can i show this drop-down search on a page. is there any code to paste?

  3. tehz March 21, 2016 at 8:52 am

    Reply

    Thanks for this. I made it also work easily and I would love to know if there is a way to modify it so you can have a second dropdown filtering a second taxomonies of the CPT

  4. Cody March 30, 2016 at 8:28 am

    Reply

    This was an excellent post that was exactly what I needed for a client project. Went through several different solutions but they didn’t do quite what I needed. Thanks a lot for this.

  5. Mary April 1, 2016 at 10:04 pm

    Reply

    Thank you for this tutorial. I wasn’t able to get the selected value to work with
    $selected = $term->name;
    However changing it to slug did work out fine
    $selected = $term->slug;

  6. Brenton April 26, 2016 at 7:46 am

    Reply

    It is working perfectly. Just a quick question, is there any way I could allow users to type in the dropdown box and only get relevant entries. For instance, I have a custom taxonomy that has 10k values as it is all areas. So instead of having a dropdown with 10k values I would like the users to type where they are and then filter only the values that match what the user is typing

    • Kellen Mace April 26, 2016 at 8:58 am

      Reply

      Brenton,

      You may want to try using Chosen or Select2 to provide on-the-fly filtering. Good luck!

  7. Danish Jamshed August 30, 2016 at 2:56 am

    Reply

    This is very interesting. I have 2 questions. everything is working but when i click on All Tools its not showing all tools the option value is 0 but not showing all taxonomies.

    second can we show meta data as well from above code ?

    Thank You

    Danish

    • Kellen Mace September 23, 2016 at 4:28 pm

      Reply

      Hi Danish,

      You’re right! There was a bug in that code preventing All Tools from displaying properly. Thanks for pointing that out – I have reworked the code to fix that. Yes, you can display post meta data as well inside of the while loop, like this:
      https://gist.github.com/d276c936d95eef4d245282d7b5e468f7

  8. Tom April 21, 2017 at 6:04 am

    Reply

    Hey Kellen,
    I always get an 404 error when submitting the form. Do you know why this happens?

Leave a reply

Your email address will not be published. Required fields are marked *