conditional taxonomies filtering plugin in wordpress website

I would like to build an website which mostly will be events. So my question is the following: Is any plugin where I can filter by conditional taxonomies. For example, I have countries Taxonomy and also cities Taxonomy. I would like to select one particular country and then to see only the cities from that country. Do you think is possible? I should be very grateful to you if you could provide more details about this issue, and, if possible, some technical advices. I tried Search and Filter Pro and Ajax Search Pro, but it looks I can't get my desired filtering. Best regards, Doru

Comment (2)

Jese Leos

August 23, 2024

Verified user

Yes, it’s possible to achieve conditional filtering based on taxonomies like countries and cities in WordPress, but it might require a bit more customization or the use of more advanced plugins than what you’ve tried so far. Custom Taxonomy Setup • Countries Taxonomy: Add a taxonomy for countries. • Cities Taxonomy: Add a taxonomy for cities, which should be set up to relate to the selected country. Plugin Solutions While plugins like Search and Filter Pro and Ajax Search Pro are powerful, they might not handle conditional relationships between taxonomies out of the box. However, there are a few approaches you can take: a. FacetWP • FacetWP is a powerful filtering plugin that allows you to create custom filters and faceted search systems. It supports conditional logic, and with some customization, you can set up a relationship between your country and city taxonomies. You would need to configure the facets so that the city options dynamically update based on the selected country.

Jese Leos

August 23, 2024

Verified user

b. ACF (Advanced Custom Fields) + Custom Code • You can create country and city taxonomies with ACF and then use custom code (possibly with JavaScript or AJAX) to filter cities based on the selected country. Example Workflow: 1. Create a custom field for countries and cities. 2. Use ACF’s relationship field or taxonomy field to link cities to specific countries. 3. Write a custom JavaScript function to update the city dropdown when a country is selected, making an AJAX call to fetch the relevant cities based on the chosen country. Here’s a step-by-step guide along with the code to achieve the desired functionality using Advanced Custom Fields (ACF) and custom JavaScript. 1. Create Custom Fields for Countries and Cities First, you’ll need to set up the custom fields using ACF: • Country Field: Create a Select field or Taxonomy field for countries. • City Field: Create a Select field or Taxonomy field for cities. Make sure that cities are linked to the appropriate countries in some way, such as using a relationship field or by setting up city taxonomy terms as children of country terms. 2. Link Cities to Specific Countries If you’re using ACF: • For the Country Field, use a Taxonomy field and select the Country taxonomy. • For the City Field, you can use a Post Object field or another Taxonomy field. Ensure cities are related to countries, either through taxonomy hierarchy or via custom post relationships. 3. Write a Custom JavaScript Function and AJAX Call Here’s how to dynamically filter cities based on the selected country. a. Enqueue JavaScript File Add the following code to your theme’s functions.php file to enqueue the JavaScript file and localize the AJAX URL. function enqueue_custom_scripts() { wp_enqueue_script('custom-ajax-filter', get_template_directory_uri() . '/js/custom-ajax-filter.js', array('jquery'), null, true); // Localize the script with new data wp_localize_script('custom-ajax-filter', 'ajax_obj', array( 'ajax_url' => admin_url('admin-ajax.php'), )); } add_action('wp_enqueue_scripts', 'enqueue_custom_scripts'); b. Create the JavaScript File Create a file named custom-ajax-filter.js in your theme’s js folder. jQuery(document).ready(function($) { $('#country-select').on('change', function() { var country_id = $(this).val(); $.ajax({ type: 'POST', url: ajax_obj.ajax_url, data: { action: 'filter_cities', country_id: country_id, }, success: function(response) { $('#city-select').html(response); } }); }); }); c. Handle the AJAX Request in PHP Add the following code to your functions.php file to handle the AJAX request and return the filtered list of cities. function filter_cities() { $country_id = intval($_POST['country_id']); $cities = get_posts(array( 'post_type' => 'city', // Replace with your city post type or taxonomy 'meta_query' => array( array( 'key' => 'related_country', // Replace with your ACF field key 'value' => $country_id, 'compare' => '=' ) ), 'posts_per_page' => -1 )); if ($cities) { foreach ($cities as $city) { echo '<option value="' . esc_attr($city->ID) . '">' . esc_html($city->post_title) . '</option>'; } } else { echo '<option value="">No cities found</option>'; } wp_die(); } add_action('wp_ajax_filter_cities', 'filter_cities'); add_action('wp_ajax_nopriv_filter_cities', 'filter_cities'); 4. HTML Structure In your template file, make sure you have the appropriate HTML structure to support the dynamic filtering. <select id="country-select"> <option value="">Select Country</option> <!-- Populate countries here --> <?php $countries = get_terms('country'); // Replace with your country taxonomy if ($countries) { foreach ($countries as $country) { echo '<option value="' . esc_attr($country->term_id) . '">' . esc_html($country->name) . '</option>'; } } ?> </select> <select id="city-select"> <option value="">Select City</option> <!-- Cities will be populated here based on selected country --> </select> Summary • Step 1: Use ACF to create the necessary custom fields for countries and cities. • Step 2: Ensure the cities are linked to countries, either by taxonomy hierarchy or a relationship field. • Step 3: Write a JavaScript function to listen for changes in the country dropdown, make an AJAX request to fetch cities related to the selected country, and populate the city dropdown accordingly. This setup should allow you to filter cities based on the selected country dynamically. Let me know if you need further customization or assistance!

You’ll be in good company