Shortcodes

FilterX provides shortcodes to embed grids and facets anywhere shortcodes are supported — pages, posts, widgets, and page builders.

[filterx_grid]

Renders a full grid with all associated facets in a sidebar layout. This is the primary shortcode most users will need.

[filterx_grid id="product-grid"]

[filterx_grid id="product-grid" layout="grid" columns="3" per_page="12"]

[filterx_grid id="product-grid" show_facets="false"]

Attribute	Default	Description
id	required	Grid ID or slug from FilterX admin
layout	grid (from DB)	Override layout: grid \| masonry \| list \| carousel \| table
columns	3 (from DB)	Override column count (1–6)
per_page	12 (from DB)	Override items per page
show_facets	true	Show associated facets sidebar
facet_position	left	Facet sidebar position: left \| right \| top
class	""	Additional CSS class on the wrapper

[filterx_facets]

Renders only the facet controls, linked to a grid. Use this when you want to place facets and the grid in different page sections.

[filterx_facets grid="product-grid"]

[filterx_facets grid="product-grid" facets="price,color,size"]

Attribute	Description
grid	Grid slug to link control to (required)
facets	Comma-separated list of facet slugs. If empty, shows all facets linked to the grid.
class	CSS class on the facet container

[filterx_results]

Renders only the results grid area without facets. Pair with [filterx_facets] for full control.

[filterx_results grid="product-grid"]

[filterx_search]

Embeds a single search/autocomplete filter that connects to a grid.

[filterx_search grid="product-grid" placeholder="Search products..."]

Attribute	Description
grid	Grid slug (required)
placeholder	Input placeholder text
debounce	Milliseconds debounce (default: 300)
min_chars	Minimum characters before search fires (default: 2)

JavaScript API

FilterX exposes a global window.FilterXFrontend object for programmatic control:

// Trigger a filter update programmatically window.FilterXFrontend.setFilter('product-grid', 'price', [0, 500]); // Reset all active filters for a grid window.FilterXFrontend.resetFilters('product-grid'); // Get current active filters const filters = window.FilterXFrontend.getActiveFilters('product-grid'); // Listen for filter change events document.addEventListener('filterx:results', (e) => { console.log('Found:', e.detail.total, 'results'); });

← Integrations REST API →