[Resolved] Creating drop downs that controls the Query Loop or Posts that display

[Fergal]

Hey there,

I need help please to create a page that displays my job openings (maybe this is a content template) and provides 3 dropdowns that the visitor can use to filter the results. Job openings is a custom post type with a hierarchical taxonomy of location. Country is the parent of state which is the parent of city (Country -> state -> city).

The first dropdown is country and shows all the country terms. When a visitor chooses a country, the job openings would filter to those assigned the selected country. The second dropdown is state and shows all the state terms that are a child to the selected country. When a visitor chooses a state, the job openings would filter to those assigned the selected state. Lastly, the third dropdown is city and shows all the city terms that are a child to the selected state. When a visitor chooses a city, the job openings would filter to those assigned the selected city.

I’ve tried the following which produces the first dropdown, but struggling to connect all the pieces.

// shortcode to list taxonomies related to job openings: country, state, city dropdowns.
function my_country_dropdown() {
	$args = array(
		 'show_option_none' 	=> 'Select Country',
		 'taxonomy' 			=> 'location',
		 //'value_field'			=> 'term_id',
		 'term_taxonomy_id'		=> array( 82, 83), //filter results to United States (83) and Canada (82)
		 'show_count'			=> 1, // show the number of jobs under each location
		 'hierarchical'			=> 1, // shows the indentations for child taxonomies
	);
	wp_dropdown_categories($args);
} 

add_shortcode('display_country_dropdown', 'my_country_dropdown' );

Thanks,
Fergal

[David]

Hi there,

if each of the category dropdowns take you to a specific Category Term Archive, then you would create a Block Element -> Loop Template:

https://docs.generatepress.com/article/block-element-loop-template/

And build the archive page with a GB Query Loop.
Don’t set any params on the Query Loop, just select the Inherit Query from Template

Set the element display rules for the archives you want it applied to

[Fergal]

Hey David,

Thank you I didn’t know about the loop template and inheriting query from template. This sounds like the way I would like to display the results from user’s selections.

I guess thinking about it further I just need to send visitors to the city level term archive. Is there a way to create conditional dropdowns? I don’t want people to have to browse through all cities, but only show the cities that belong to the country and state that have been selected. And then once they choose a city they are shown that city’s term archive page.

Thanks,
Fergal

[David]

Perhaps this plugin for the filters ?

https://wordpress.org/plugins/search-filter/

If not you may need something like wp facet.

[Fergal]

Thanks for the recommendations and help David. wp facet would work for sure. Thankfully was able to get it working without the plugin 🙂

Thanks,
Fergal

[David]

Thats great. What method did you use ?

[Fergal]

What worked for me was jQuery and JavaScript for dropdown functionality and AJAX functions to load the states and cities based on the previous selections.

[Author]

Posts