Theme Integration

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 in an upcoming version.

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

Spacing

These sections will be added in an upcoming version.

This will include paddings and margin.

Icons

These sections will be added in an upcoming version.

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