Let me explain the problem I am dealing with:

I have 2 custom taxonomies. One is named "thestate" and the other one is named "thetown".

In "thestate" I have listed all the states in the U.S.
In "thetown" I have listed the main towns in the U.S.

For each taxonomy I have their items displayed in a drop-down

Do you understand where I am going with this? :D I need to be able to display the items in "thetown" based on what state is selected in the taxonomy "thestate"

For example, if the user selects "Michigan" (in the taxonomy called "thestate), the page automatically refreshes, and in the next drop-down, in the taxonomy called "thetown", I have only the cities "Detroit", "Grand Rapids", "Warren".

If the user then changes his mind and selects "Texas", the page automatically refreshes and in the next drop-down, in the taxonomy called "thetown" I have only the cities "Houston", "San Antonio", "Dallas".

Hope my explanation makes sense! Can you think of a logic by which I can accomplish this?

Best regards, Gabriela

  • This is a question about javascript and "chained selection". There're plenty of jQuery plugins and tutorials.
    – kaiser
    Commented Apr 25, 2012 at 1:53
  • No, you're wrong. Javascript will be used only for the automatic refreshing of the page. This is a question about how to connect 2 different custom taxonomies in WordPress
    – Gabriela
    Commented Apr 25, 2012 at 9:04
  • I need to have "thestate" and "thetown" as 2 separate custom Taxonomies, this is practically my main problem :D
    – Gabriela
    Commented Apr 25, 2012 at 10:34
  • No, it isn´t. You have two taxonomies. A) Query the data B) connect with chained selection. Else you can´t show only the filtered data from "thetown".
    – kaiser
    Commented Apr 25, 2012 at 12:53

1 Answer 1


Why not make the towns child terms of each state? The taxonomy could be location:

See MikeSchinkel's detailed q and a regarding hierarchal taxonomies.

enter image description here

A more elegant solution than refreshing the page upon state selected would be to load the "thetown" child terms using ajax and the get_term_children function or the custom $wpdb query outlined below.

Pass the state selected using jQuery to your back end PHP function that loops through an array of child terms to build out your second drop down.

Here is a quick example using a custom $wpdb query:

PHP backend function:

add_action( 'wp_ajax_nopriv_get_child', 'ajax_get_children' );

function ajax_get_children() {
        global $wpdb;
        $parent = $_POST['parent'];
        $child_string = "";
        $results = $wpdb->get_results ( "SELECT t.term_id, t.name FROM $wpdb->term_taxonomy tt, $wpdb->terms t, $wpdb->term_taxonomy tt2 WHERE tt.parent = $parent AND tt.taxonomy = 'category' AND t.term_id = tt.term_id AND tt2.parent = tt.term_id GROUP BY t.term_id, t.name HAVING COUNT(*) > 0 ORDER BY t.term_order ASC" );
        foreach ( $results as $row ) {
            $child_string = $child_string . "<option value='$row->term_id'>$row->name</option>";
        echo $child_string;




jQuery(document).ready(function() {


        jQuery( "#loading-animation").show();
        var termID = jQuery("#parent-term :selected").val();

            type: 'POST',
            url: ajaxurl,
            data: {"action": "get_child", parent: termID },
            success: function(response) {
                return false;


You will have to modify your html to match the above code. When the state is selected WordPress will load the child "towns"


Forgot to mention that the ajaxurl variable in the jQuery will not be defined. Read up on using AJAX in plugins to get the method along with some other useful information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.