In the previous section, we saw how to create a custom list of content called a View. You can also add front-end controls to let the users apply filtering. For example, only show Consultants who speak a particular language or whose hourly rate is less than a certain amount.

Exposing the Filter Editor in a View

To use front-end filters in a View select Display the results as a custom search option creating a new View.

Screenshot of View cell for custom search

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.

Screenshot of View Cell Screen Options

Adding filters to the Filter Section

A Filter Section will now be visible.

Screenshot of a View cell Filter section

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.

Create Richer Custom Searches

Allowing visitors to sort the front-end results

Need help?

Go to the Getting Started support page, leave a comment and we will reply to you.

What’s next?

Customize Archives