In the previous section we saw how to add a filter to a View to narrow down the results returned by a query, e.g. to only show posts with a category of “Featured”.
You can also add front-end controls to let the users do the filtering, e.g. to only show Consultants who speak a particular language or whose hourly rate is less than a certain amount, and these filters can also include a text search field.
Exposing the Filter Editor in a View
To use front-end filters in a View select “Display the results as a custom search” when you create a new View.
If you edit an existing View you can expand the Screen Options tab and change the View purpose. This will update which settings meta-boxes are exposed on the View edit screen to include the filter section.
Adding filters to the Filter Section
A Filter Section will now be visible.
In Custom Search Settings you specify whether the results should update via a page refresh or using Ajax.
The Filter Editor is where the filter controls are inserted. These render inside a form on the front end.
Click the New Filter button to insert a front-end filter, which will add the markup and shortcodes that generate the controls to the Filter Editor.
You can add filters for taxonomy terms and custom fields.
You can add a text search field using the separate Text search button.
Depending on your Custom Search Settings you may need to insert a Submit button and you may want to insert a Reset button to clear the search form.
You can edit the markup to modify how the controls are rendered on the front end, placing the filters in a single row, for example, or across columns.
Keep reading for a specific example.
Learn by doing
We’ll add filters to our training site for users to search for a consultant, which looks like this on the front-end:
Add filter controls to a View to search consultants
- Edit the page “Find your Consultant” with the Layouts Editor
- Insert a View cell, creating a new Custom search View.
- Choose Consultant posts for the content selection.
- Scroll down to the Custom Search Settings and choose “AJAX results update when visitors change any filter values”.
- In the Filter Editor, add a New Filter, and choose the Expertise custom field from the Consultants Field Group. Accept the default settings and insert the shortcode.
- Place the cursor on a new line before the closing wpv-filter-controls shortcode, ready to insert the next filter.
- Use the New Filter button to insert a filter using the Consultant hourly rate custom field. In the options compare the value as a number with the between comparison, and set the labels for the minimum and maximum rates as required. Insert the shortcode.
- Add the next filter, using the Languages taxonomy, in the same way, accepting the default options.
- Insert a Submit button.
- Insert a new line before the markup for the other filter controls and use the Text Search button to insert the search field. The field only needs to search the post title.
You may find you need to add some line breaks to improve the layout of the inserted markup, like so:
Even though we have chosen to update results whenever a filter changes, you will want the submit button for the text search for the consultants by name. We’ll add that field now. Remember, the name is the post title of the consultant post.
You have now added all of the filter controls. On the front end they will be rendered as a list, but in our demo we split the filters across two columns.
You can edit the markup to re-organise the filter controls. Try using the Grid button to insert the markup for a 2 column Bootstrap grid and move the markup for the filter controls as required. When finished it should look like this.
[wpv-filter-start hide="false"] [wpv-filter-controls] <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label>[wpml-string context="wpv-views"]Consultant Name[/wpml-string]</label> [wpv-filter-search-box output="bootstrap"] </div> <div class="form-group"> <label>[wpml-string context="wpv-views"]Expertise[/wpml-string]</label> [wpv-control-postmeta field="wpcf-expertise" url_param="wpv-wpcf-expertise"] </div> </div> <div class="col-sm-6"> <div class="form-group"> <label>[wpml-string context="wpv-views"]Min price per hour[/wpml-string]</label> [wpv-control-postmeta field="wpcf-hourly-rate" url_param="wpv-wpcf-hourly-rate_min"] </div> <div class="form-group"> <label>[wpml-string context="wpv-views"]Max price per hour[/wpml-string]</label> [wpv-control-postmeta field="wpcf-hourly-rate" url_param="wpv-wpcf-hourly-rate_max"] </div> <div class="form-group"> <label>[wpml-string context="wpv-views"]Languages[/wpml-string]</label> [wpv-control-post-taxonomy taxonomy="language" type="select" url_param="wpv-language"] </div> [wpv-filter-submit name="Search" output="bootstrap"] </div> </div> [/wpv-filter-controls] [wpv-filter-end]
Design the output
You will still need to design the output of the consultant search. In our demo we display the results in a table.
To do the same, use the Loop Wizard and choose to display the loop as a table, checking the option “Make the table sortable by columns” so that column headers are added.
Then add the fields you want to display, namely
- the profile image (choose the thumbnail size)
- the post title
- the expertise field
- the hourly rate field
- the languages taxonomy
When you complete the wizard this will add the markup for the table layout in the Loop Output Editor, and the fields to repeat on each row in the Content Template below.
You will want to edit the table column headings in the Loop Output Editor (removing the unnecessary profile image heading, and changing “Post title” to “Consultant name”, for example).
You might also want to tweak the table appearance with CSS. Try adding the classes “table” and “table-striped” to the <table> tag to adopt some of the Bootstrap table styles.
Go to the Getting Started support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.
If you find this guide useful or have suggestions on how to improve it please add a comment to the support page