Textpattern tips, tutorials and code snippets

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>

6 Comments Comment feed

  • Chris Alden
  • 27 April 2010

Confused by this … can’t seem to output two or more custom fields in txp:article_custom. in other words:

<txp:article_custom Ingredients=’<txp:variable name=“Ingredients” />’ Ethnicities=’<txp:variable name=“Ethnicities” />’ />

doesn’t work for me but

<txp:article_custom Ingredients=’<txp:variable name=“Ingredients” />’ />

does.

I’m using glz_custom_fields, and I really need to filter articles by three or four custom fields. what am I missing? can anyone suggest a solution/workaround?

Chris, using two custom field attributes in an article_custom tag works fine for me, not sure what could be going on there.

Two custom field attributes in an article_custom tag does not appear to work for me either. I am using Textpattern 4.2.0 with PHP5.

It seems to work fine when there is only one value in the custom field. With comma separated values in the custom field (I use chh_keywords), article_custom doesn’t work for me.

OK, I am only using one value per custom field so that’s why I’m not having problems.

You could use smd_query in place of the article_custom tag if necessary. Not sure if this is the best code to do it, but try this out (not tested):

<txp:smd_query column='*' table='textpattern' where='Category1="<txp:category1/>" AND custom_1="?<txp:custom_field name="[custom field 1 name]"/>" AND custom_2="?<txp:custom_field name="[custom field 2 name]"/>"
ORDER BY Posted desc 
LIMIT 10 
OFFSET 0' form="article-form" />
  • Randy Levine
  • 1 August 2012

I have been able to recreate the above but I have been unsuccesful in adding another custom field. In the current project I will need to add mutliple additional fields to the statement. I get the expected data in the url when I add a third but the results do not return correctly ie I am unable to get the third field to display anything — can someone show how to add a third to the conditional articles list —

Add a comment

Use Textile help to style your comments