Filter article lists using drop-down select menus

Here is a way to make custom field drop-down select menus on the front-end of your site to filter your article list display, as seen here, displaying article lists with category page and custom field context sensitivity. It requires adi_gps and use of the variable / if_variable tags (but glz_custom_fields is a logical complement). This example uses one or two custom fields as filter parameters, but you could expand on this to include as many custom fields as you want if you make sure to set up your if_variable tag logic correctly with separate article_custom tags for each condition. Maybe smd_if would come in handy if you wanted to get more complicated with several filters.

I’ve hard-coded the option elements in my html form with all the possible custom field values that I have assigned to articles (here presented using only three values per custom field), and each of those has if_variable tags to test for the current value for each variable (as set by adi_gps). This will give the current options in each drop-down the selected attribute after you submit the form and arrive at the filtered article list page (so you can’t select them again if they are already selected). The form will automatically submit all selected values when you change one of them using a drop-down menu.

Create variables from url queries with adi_gps

<txp:adi_gps name="Ethnicities" quiet="1" />
<txp:adi_gps name="Ingredients" quiet="1" />

Make the form for selecting custom fields and submitting url queries

<form action='<txp:page_url />' method="get"> <!--use the current url as the base for submitting url queries, preserving whatever section or category you're currently in-->

<select name="Ethnicities" onChange="this.form.submit();"> <!--the onChange javascript attribute will automatically submit the form when the user selects any value other than the current one-->
 <txp:if_variable name="Ethnicities" value="">
   <option value="">Ethnicities...</option> <!--if not currently filtering by Ethnicity, show a title for this custom field menu-->
 <txp:else />
   <option value="">All</option> <!--if currently filtering by Ethnicity, create an option with no value set, so when selected it will reset the filter by Ethnicity-->
 </txp:if_variable>
 <option <txp:if_variable name="Ethnicities" value="Italian">selected</txp:if_variable> value="Italian">Italian</option>
 <option <txp:if_variable name="Ethnicities" value="Indian">selected</txp:if_variable> value="Indian">Indian</option>
 <option <txp:if_variable name="Ethnicities" value="Mexican">selected</txp:if_variable> value="Mexican">Mexican</option>
</select>

<select name="Ingredients" onChange="this.form.submit();"> 
<txp:if_variable name="Ingredients" value="">
 <option value="">Ingredients...</option>
<txp:else />
 <option value="">All</option>
</txp:if_variable>
<option <txp:if_variable name="Ingredients" value="Garlic">selected</txp:if_variable> value="Garlic">Garlic</option>
<option <txp:if_variable name="Ingredients" value="Peppers">selected</txp:if_variable> value="Peppers">Peppers</option>
<option <txp:if_variable name="Ingredients" value="Chicken">selected</txp:if_variable> value="Chicken">Chicken</option>
</select>

<noscript><input type="submit" value="Go!"></noscript> <!--only needed for the tiny fraction who have javascript turned off and won't automatically submit the form on selecting new values-->
</form>

Make your conditional article lists

<txp:if_variable name="Ethnicities" value="">
<txp:if_variable name="Ingredients" value=""> 
        <!--if no url queries-->
        <txp:article />
<txp:else />
        <!--if Ingredients but no Ethnicities in url query-->
        <txp:article_custom category='<txp:category />' Ingredients='<txp:variable name="Ingredients" />'  />
</txp:if_variable>
<txp:else />
<txp:if_variable name="Ingredients" value="">
        <!--if Ethnicities but no Ingredients in url query-->
        <txp:article_custom category='<txp:category />' Ethnicities='<txp:variable name="Ethnicities" />'  />
<txp:else />
        <!--if both Ethnicities and Ingredients in url query-->
        <txp:article_custom category='<txp:category />' Ingredients='<txp:variable name="Ingredients" />' Ethnicities='<txp:variable name="Ethnicities" />'  />
</txp:if_variable>
</txp:if_variable>
comments powered by Disqus