Создаете простую html форму с get-запросом. Очевидно, что товары не могут быть одновременно светлыми и темными, поэтому это должны быть радио-кнопки, а не чекбоксы, как на макете
<form method="get" class="obj-filter">
<input class="obj-filter-input" type="radio" id="light" name="color" value="light">
<label class="obj-filter-label" for="light">Light</label>
<input class="obj-filter-input" type="radio" id="dark" name="color" value="dark">
<label class="obj-filter-label" for="dark">Dark</label>
<input id="obj-filter-submit" type="submit" class="button" value="Фильтровать">
</form>
Теперь вам нужно зарегистрировать этот параметр
color для того, чтобы можно было получить его из ссылки с get-параметрами
add_filter( 'query_vars', 'add_query_vars' );
function add_query_vars( $qvars ) {
$qvars[] = 'color';
return $qvars;
}
При нажатии кнопки "Фильтровать" страница перезагружается, при этом создается новый запрос в базу, на хуке
pre_get_posts вы можете выдернуть параметры get-запроса из ссылки и отсортировать нужные вам записи
add_action( 'pre_get_posts', 'custom_pre_get_posts', 1 );
function custom_pre_get_posts( $query ) {
// Выходим, если это админ-панель или не основной запрос
if( is_admin() || !$query->is_main_query() )
return;
// сортируем записи 'obj', если указан гет-запрос
if ( $query->is_archive() && $query->get('post_type') === 'obj' ) {
if ( $var = get_query_var( 'color', false ) ) {
$query->set( 'obj-cat', $var );
}
}
}
