Search & Filter supports integration with themes by allowing them define a set of styles to use.

This allows theme builders to provide a seamless integration of their theme styling with Search & Filter.

How it works

If a theme opts in to supporting Search & Filter styles then a “Theme” styles preset will be created – this preset cannot be edited or deleted and always appears at the top of the styles presets lists.

Providing a theme style gives users visually pleasing and sensible defaults when working with your theme and Search & Filter. Users are still able to create their own styles presets if they wish.

There are two ways to add default styling support for Search & Filter:

Via theme.json

The default framework structure of theme JSON looks something like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {
		"blocks": {},
		"color": {},
		"elements": {},
		"spacing": {},
		"typography": {}
	}
}

Note: values and theme settings have been removed for simplicity.

To add support for Search & Filter styles presets requires adding a sub property plugins to the styles property, followed by another property with our plugin slug search-filter.

Adding this to the styles section would look like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {
		"blocks": {},
		"color": {},
		"elements": {},
		"spacing": {},
		"typography": {},
		"plugins": {
			"search-filter": {
				"color": {
					"text": "#3C434A",
					"background": "#fff",
					"active-text": "#fff",
					"active-background": "#167DE4",
					"label-text": "#3C434A",
					"secondary": "#3C434A",
					"primary-accent": "#BBBBBB",
					"secondary-accent": "#888888",
					"tertiary-accent": "#333333"
				}
			}
		}
	}
}

Via add_theme_supports

We can also use the PHP function add_theme_supports to set the Theme preset style:

$search_filter_styles = array(
	'color' => array(
		'text'              => '#3C434A',
		'background'        => '#ffffff',
		'active-text'       => '#ffffff',
		'active-background' => '#167DE4',
		'label-text'        => '#3C434A',
		'secondary'         => '#3C434A',
		'primary-accent'    => '#BBBBBB',
		'secondary-accent'  => '#888888',
		'tertiary-accent'   => '#333333'
	)
);

add_theme_support( 'search-filter-styles', $search_filter_styles );

Supported styles

Currently Search & Filter supports customising the color scheme as shown in the examples above

Colors

There are currently 6 colors that can be defined which are used across all our UI widgets. It might be a good idea to design the preset via our styles editor and then copy the color references into your theme settings.

Borders

These sections will be added once version 3 is out of beta.

This will include border style and thickness (colors are already supported above).

Spacing

These sections will be added once version 3 is out of beta.

This will include paddings and margin.

Icons

These sections will be added once version 3 is out of beta.

It will be possible to replace any of the icons used in our plugin with icons defined by the theme.