Filters, sorting and search let visitors narrow a grid down to what they look for. All three are set on the Navigation page of the grid editor. Each is a control that you place around the grid: a filter row above it, a sort menu beside it, a search field. Where the controls sit is explained in Pagination, Load more and placement.
The Navigation page starts with its presets. The menu Filters sets the filters’ style and behaviour in one click (Buttons · one at a time, Buttons with counts · several, Dropdown); the rows Filters, Sorting and Search hold every setting.
Filters
The filter buttons come from the categories and tags of the grid’s items: the categories of its posts (Posts, pages and custom post types) or the categories you give your own items (Custom grids).
How the filters behave, for the whole grid:
| Setting | What it does |
|---|---|
| Filter items by | Categories and tags, Categories or Tags. |
| Visitors pick | One filter at a time, or Several. |
| Show items that match | With several filters picked: items that match any of them, or only items that match all of them. |
| Start with filter | A filter that is already chosen when the grid loads. |
| Filter in address | Shows the chosen filter in the page’s address, so a link opens the grid with it. |
| Open on | For a filter dropdown: it opens on a click or when pointed at. |
| Phones: dropdown | On small screens the filter buttons become one dropdown; Small screens: below sets the width. |
Filter groups
Each filter group is one control with its own buttons, Filter – 1, Filter – 2 and so on. A grid can have several, for example one for the topic and one for the region. In each group:
| Setting | What it does |
|---|---|
| “All” button | Show or Hide the button that shows every item. |
| “All” button text | Its text. |
| Filter style | Buttons in a row, or a Dropdown with its Dropdown text. |
| Show counts | The number of items next to each filter. |
| Sort A–Z | The filters in alphabetical order instead of your order; Direction: Ascending or Descending. |
| Filters in this group | The categories and tags this group offers, ticked; drag them into your order. |
The + below the groups adds a group; the × in a group’s head removes it. A new group is not shown until you place its control (Filter 2) in a zone.
Sorting
The Sort control is a menu that lets visitors reorder the grid.
| Setting | What it does |
|---|---|
| Sort menu label | The menu’s text; a new grid says “Sort By”. |
| Sort options for visitors | The orders visitors can choose: date, title, excerpt and more; prices, sales and stock for WooCommerce products; your custom fields. |
The order the items have when the grid loads is not set here but in Content › Order (Initial order, Direction).
Search
The Search control is a search field over the grid’s items. Placeholder is the text in the empty field. By default it searches the items’ titles and text; with Extended search in Global Settings › Search it also finds categories, tags and custom fields.
On the page
A visitor picks a filter, and only its items stay; the change effect plays as they rearrange (Motion).
With Phones: dropdown, small screens show one Filter menu instead of the row of buttons:
Links that open a grid filtered
With Filter in address on, the address of the page changes when a visitor picks a filter. Copy that address to link to the grid with the filter already chosen, from a menu, another page or a newsletter.
Controls outside the grid
A control can also sit elsewhere on the page, away from the grid: in Where the controls sit, move it into the zone Outside the grid. The editor then shows its shortcode, [ess_grid_nav id="…" alias="…"][/ess_grid_nav]; put it anywhere on the same page as the grid, for example in a sidebar. The widgets Essential Grid Filter, Essential Grid Sorting and Essential Grid Pagination place a grid’s controls in a widget area the same way.
Good to know
- On the new front end of Essential Grid 4 the filters, the sort menu and the page buttons are real buttons with their state, and the result of a filter or a search is announced to screen readers: Accessibility and reduced motion.
- An add-on source (a social stream, for example) may have no categories; the Filters section then says so.