By WP_AJAX_ hook generating the state drop down list of a selected country in Agentpress Listing Search Form of Agentpress PRO theme.
Step 1: Navigate Listings > Register Taxonomies and create the Country taxonomy. Now you will get new menu link “Countries” under Listings menu at left hand side. Again navigate Listing > Countries and add the Country name one by one.
Step 2: Navigate Listings > Register Taxonomies and create another new taxonomy “State”.
Step 3: Creating a relationship between state and country. Adding a new field “Country” combo box at State terms page. So When you will add a State, you can assign the Country name of that Sate. This way you can make a relationship between State & Country.
Add the following code in your functions.php file and it will generate a custom field at State form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// Add a field in the form add_action( 'state_add_form_fields', 'add_country_fields' ); add_action( 'state_edit_form_fields', 'edit_country_fields', 10, 2 ); add_action( 'created_term', 'save_country_name', 10, 3 ); add_action( 'edit_term', 'save_country_name', 10, 3 ); function add_country_fields(){ $countries = get_terms( 'country', 'hide_empty=0' ); if( $countries ): ?> <div class="form-field"> <label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label> <select id="country_id" name="country_id" class="postform"> <option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option> <?php foreach( $countries as $c){ echo '<option value="' . $c->term_id . '">' . $c->name . '</option>' . "\n"; } ?> </select> </div> <?php endif; } function edit_country_fields( $term, $taxonomy ){ $country_name = get_post_meta( $term->term_id, 'country_id', true ); $countries = get_terms( 'country', 'hide_empty=0' ); if( $countries ): ?> <tr class="form-field"> <th scope="row" valign="top"><label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label></th> <td><select id="country_id" name="country_id" class="postform"> <option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option> <?php foreach( $countries as $c){ $selected = ( $country_name == $c->term_id) ? "selected" : ''; echo '<option value="' . $c->term_id . '" ' . $selected . '>' . $c->name . '</option>' . "\n"; } ?> </select> </td> </tr> <?php endif; } function save_country_name( $term_id, $tt_id, $taxonomy ){ if( isset( $_POST['country_id'] ) ) update_post_meta( $term_id, 'country_id', $_POST['country_id'] ); } |
Now adding a columns “Country” in States Listing section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// Add columns add_filter( 'manage_edit-state_columns', 'state_country_columns' ); add_filter( 'manage_state_custom_column', 'state_country_column', 10, 3 ); function state_country_columns( $columns ){ $new_columns = array(); $new_columns['cb'] = $columns['cb']; $new_columns['name'] = $columns['name']; $new_columns['country'] = __( 'Country', 'agentpress' ); unset( $columns['cb'] ); unset( $columns['name'] ); return array_merge( $new_columns, $columns ); } function state_country_column( $columns, $column, $id ) { if ( $column == 'country' ) { $country = get_term( get_post_meta( $id, 'country_id', true ), 'country' ); if( $country ) $columns .= $country->name; else $columns .= "---"; } return $columns; } |
Step 4: Creating a JS file “search-listing.js” and it will handle the AJAX part. When you will choose the country name from drop down, it will call a action “find_states” and generate a new drop down list of states based on selected country name. Put the js file in “js” folder. Here is code of js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery(document).ready( function($){ $('#country').on('change', function(){ var data = { action: 'find_states', country_name: $('#country').val() } $.post(ajax_object.ajax_url, data, function( response ){ $('#state').html( response ); }); }); }); |
Now register the JS file. Search this function “agentpress_google_fonts” on functions.php and add replace the current code by following code:
|
1 2 3 4 5 6 |
function agentpress_google_fonts() { wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,700|Roboto:700,300,400', array(), CHILD_THEME_VERSION ); wp_enqueue_script( 'search-listing', get_bloginfo( 'stylesheet_directory' ) . '/js/search-listing.js', array('jquery'), CHILD_THEME_VERSION ); wp_localize_script( 'search-listing', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); } |
Write a Hook of “find_states” action. Again this code will add into functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function find_states(){ global $wpdb; if ( isset($_POST['country_name']) ) { $get_country_details = get_term_by('slug', $_POST['country_name'], 'country'); $res = $wpdb->get_results( $wpdb->prepare( "SELECT t.name, t.slug FROM $wpdb->terms t JOIN $wpdb->term_taxonomy tt on tt.term_id = t.term_id JOIN $wpdb->postmeta pm on pm.post_id = t.term_id WHERE 1 AND tt.taxonomy = 'state' AND pm.meta_key = 'country_id' AND pm.meta_value='%s' ORDER BY t.name ASC", $get_country_details->term_id ), OBJECT ); if( $res ){ $html = '<option value="">Select State</option>' . "\n"; foreach( $res as $state ){ $html .= '<option value="' . $state->slug . '">' . $state->name . '</option>' . "\n"; } echo $html; } } wp_die(); } add_action( 'wp_ajax_find_states', 'find_states' ); add_action( 'wp_ajax_nopriv_find_states', 'find_states' ); |
** For better knowledge the you can see the CODEX of WP_AJAX_ hook.
Step 5: Navigate to Appearance > Widgets and add the Agentpress Listing Search widget at Home – Featured widget area. Setup the widget and save the settings.
Now you refresh the home page. First time if you see the state drop down list, you’ll get all the state list. Now select a country name from down and you will get the states of that country only. i.e. I am selected the “United States” from drop down list and got the states of United States only.
BEFORE
After selecting the “United States”, getting following results:
This way you can create the relationship between state and city also.
Further if you need any assistance then you can feel free ask me.
Max skills
Thanks again for your answer Chinmoy. I changed the names to my language and did this also in the code. The problem why it worked fine locally but online only worked intermittently was not related to the code, it seems to be that I inverted the plural and singular names of one of the taxonomies 😀 As you can see I have very little programming knowledge, for practical purposes I would say almost zero. I’m trying your code because I was asked, only if possible, to try to relate State, town and neighborhood in the search box, and I accidentally found your code. Tomorrow I will try to stablish Town/Neighborhood relation in my free time. Anyway I was thinking, my city has a lot of neighborhoods and as far as I can see, the search bar shows all the taxonomies registered, not only the ones that are assigned to the properties (the active ones). I think It would be great if you could develop a wp plugin that filtered and stablished levels like this easily (Country, State and more). I think many people would gladly pay for it, like in this case.
🙂
Diana
Hi Diana,
Thank you very much for your suggestion. Also I was thinking about plugin that time. But it is very complex work and I am little bit busy now. I am making another PRO child theme and will be release soon 🙂
If you don’t mind then you can share the wp-admin access. I’ll check the dashboard and codes once.
Best
Chinmoy
Hi Paul! Is the function state_cuntry_column meant has this name on purpose (instead of state_country_column) ?I will try this this days and let you know, but I am not too sure about changing the names to my language.
Thanks a lot.
Sorry! for the typo. Yes. ‘o’ is missing there. I am updating the post now. Actually my keyboard have problem. Some keys are not working properly.
And thank you very much for pointing this.
Paul, I’m trying this locally and works perfectly. I tried it online and it worked too, but suddenly stopped working haha. When I create a new taxonomy and select “Country” the taxonomy is created but “Country” isn’t added, but it was possible a few minutes before. I have taxonomies with Country linked but I can’t do this anymore, and I didn’t edited anything. how is it possible? O_O
¿Does the position where I put the code in functions.php is important? (I put everything at the bottom, except, of course the part of the google fonts code.
I have another question. In this part of the code:
// Add columns
add_filter( ‘manage_edit-state_columns’, ‘state_country_columns’ );
add_filter( ‘manage_state_custom_column’, ‘state_country_column’, 10, 3 );
manage_edit-state is correct? or is it manage_edit_state? I ask because I know you have problems with your keyboard hahaha.
Thank you very much.
Hello Diana,
Thank you for trying my code.
All codes will go to functions.php file. Are you created “State” taxonomy and “Country” dropdown list is coming on “State” taxonomy page? If you change the taxonomy name then you’ll update the code by new taxonomy name.
It is true that some keys are not working properly. But this time code is correct. It would be
manage_edit-state_columns. For better understand I am giving a example. Assume you have a taxonomy “City” and slug is “city”. Then filter will bemanage_edit-city_columns. See the Codex also.Right now I can’t give you the proper direction. Because I did not know the backend setup and code things.
Further if you need any assistance then you can feel free ask me.
Best
Chinmoy