4. How It Works on the Frontend

4.1 The Filter Sidebar

When a visitor loads a member directory page with Faceted Search enabled, the filter sidebar appears automatically alongside the member grid. No shortcode or template modification is required — the plugin injects the sidebar by hooking into the UM directory’s existing header area and repositioning it via an inline script with no visible layout flash.

Each configured facet appears as a collapsible filter group. The visitor sees the facet label, the list of available values (as checkboxes, radio buttons, a dropdown, tag cloud, or range inputs), and — if counts are enabled — a number next to each value showing how many members match.

4.2 Live Filtering (AJAX)

When a visitor selects a filter value, the member grid updates immediately without reloading the page. The plugin achieves this by:

1. Intercepting Ultimate Member’s native um_get_members AJAX request using the WordPress hooks API (wp.hooks.addFilter).
2. Appending the active filter selections to the request payload.
3. On the server, injecting SQL JOIN and WHERE clauses into UM’s query to filter members precisely.
4. Simultaneously calling a separate AJAX endpoint (um_fs_get_facet_counts) to refresh the count badges in the sidebar, reflecting the narrowed result set.

The result: the member grid and the sidebar counts both update together, giving visitors accurate, real-time feedback on how their filter choices affect the results.

4.3 Active Filter Chips

If the Active Filter Chips toggle is on, each selected filter appears as a labelled chip above the member grid. Example: “Country: Thailand ×” and “Industry: Technology ×”. Clicking × removes that individual filter. A “Clear all” button removes all active filters at once, returning the directory to its unfiltered state.

4.4 URL State & Shareable Links

When URL State Persistence is on, active filters are encoded into the page URL as query parameters. For example:

This means:

• Visitors can share filtered directory views via a link.
• Browsers remember the filter state when the back button is pressed.
• Visitors can bookmark a specific filtered view.
• This can benefit SEO if Google chooses to index certain filtered states (though this is at Google’s discretion and depends on your crawl budget and robots.txt settings).

4.5 Mobile Behaviour

When Collapsible on Mobile is on, the filter panel collapses behind a toggle button on screens narrower than the plugin’s CSS breakpoint. This prevents the filter panel from pushing member cards off-screen on phones. The filter panel can be opened by tapping the toggle, and closed again after applying filters.