Index Logo

Creating custom smart filters

Note: this resource assumes you have knowledge of how to use WordPress filters

With our built-in php filter, you can add unique filters to your content. Let’s say you are using WooCommerce and want to filter based on price. With the following code, you can now filter results that are under $100, $100 – $200, and over $200:

add_filter('index_product_filters', 'add_meta_filter');

function add_meta_filter($filters) {
	$filters[] = [
		'key' => '_price',
		'label' => 'Price',
		'filters' => [
			[
				'label' => 'Less than $100',
				'value' => 100,
				'compare' => '<',
				'type' => 'numeric'
			], [
				'label' => '$100 — $250',
				'value' => [100, 250],
				'compare' => 'IN',
				'type' => 'numeric'
			], [
				'label' => 'Over $250',
				'value' => 2500,
				'compare' => '>',
				'type' => 'numeric'
			]
		]
	];
      
	return $filters;
}

Setting up the filter

Index comes with a filter for each post type. In this case we are targeting the product post type, but if you wanted to add a filter for pages you would change the first parameter of add_filter to be index_page_filters.

The second parameter is a function name (or an inline function) which is passed a list of custom meta filters. You can add as many filters as you want, and change between a radio list or a free form text field.

Formatting how the filters are displayed

Each custom filter is an associative array with the following fields:

  • key (required): the meta key you are querying
  • label (required): the overall filter name displayed to the visitor in both the filters dropdown and the active filter tag
  • placeholder (optional): if you are using a text field, you can add a placeholder description value in the textfield
  • type (optional): filter type (selection, number, or string), defaults to selection
  • filters (optional): if you are using the default seletction filter, you can create a list of options and how they should be queried (more below);

Setting up predefined radio list options

If you are using the radio list format with predefined filter options, there are a few settings you can place in each filter to ensure correct filtering. These mostly map to the WP_Meta_Query options listed here:

function add_meta_filter($filters) {
	$filters[] = [
                // ... other filter settings
		'filters' => [
			[
				'label' => 'Less than $100',
				'value' => 100,
				'compare' => '<',
				'type' => 'numeric'
			],
                        // ... other filters
		]
	];
      
	return $filters;
}

The field options are:

  • label (required): the radio item label displayed to the visitor
  • value (required): the actual value to query for
  • compare (optional): Defaults to =. A comparison operator (less than, greater than, equal to, etc)
  • type (optional): Defaults to CHAR. The value type (NUMERIC, CHAR, etc)

Summary

With these api options, you can quickly create powerful, custom smart filters that fit your workflow. Remember that Index allows you to combine different filters together, so you should group your own filters by type and keep them simple.

Get started for free

Try Index free for 14 days and see for yourself why it's the best interface for managing your WordPress content — no credit card required.

Start your free trial