The default state of the page is to show "all kitchens list of all categories" (/?cat=0) with a category dropdown generated using wp_dropdown_categories() which allows the user to select other categories.
The desired use case is:
The user selects a category from a dropdown list and create a search query in the search box and seeing only kitchens in that category that contain the search term. the result displays only the title and it displays it in another page please how can i filter kitchens in the same page
add_image_size('header-image', 1200, 360, true);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('bootstrap4');
wp_dequeue_style('bootstrap-basic4-main');
wp_enqueue_style('webfont-roboto', get_stylesheet_directory_uri() . '/webfont/roboto/stylesheet.css');
wp_enqueue_style('nelga-bootstrap', get_stylesheet_directory_uri() . '/assets/css/bootstrap.css');
wp_enqueue_style('font-lato', get_stylesheet_directory_uri() . '/assets/fonts/stylesheet.css');
wp_enqueue_script('nelga-block-map', get_stylesheet_directory_uri() . '/block/interactive-map/map.js');
}, 11);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('wpuf-css');
wp_register_style('wpuf-css', WPUF_ASSET_URI . '/css/frontend-forms.css');
});
/*add_filter( 'allowed_block_types_all', function () {
return [
'core/block',
'core/image',
'core/paragraph',
'core/heading',
'core/list',
'core/shortcode',
'nelga/icon-with-text',
'nelga/interactive-map
];
});
*/
add_action('init', function () {
register_block_type(__DIR__ . '/block/icon-with-text');
register_block_type(__DIR__ . '/block/interactive-map');
});
// Scripts for Ajax Filter Search
function my_ajax_filter_search_scripts()
{
wp_localize_script('my_ajax_filter_search', 'ajax_url', admin_url('admin-ajax.php'));
}
// Shortcode: [my_ajax_filter_search]
function my_ajax_filter_search_shortcode(){
my_ajax_filter_search_scripts(); // Added here
ob_start(); ?>
<div id="my-ajax-filter-search" class="filter">
<div class="container p-0">
<form>
<div class="d-inline-flex mb-2 mb-lg-0">
<div class="position-relative first-input">
<svg class="position-absolute" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 9.9999;
}
</style>
<g>
<circle class="st0" cx="21" cy="21" r="20" />
<line class="st0" x1="35" y1="35" x2="41" y2="41" />
<rect x="46.3" y="37.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.9172 50.5006)" class="st1" width="8.5" height="26.9" />
</g>
</svg>
<label class="screen-reader-text" for="s">Search for:</label>
<input value="<?php the_search_query(); ?>" name="s" id="s" class="form-control " placeholder="Diese Kuche such ich ..">
</div>
<?php wp_dropdown_categories( array(
'show_option_all' => 'All Kategorien',
'show_option_none' => '',
'orderby' => 'id',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 0,
'child_of' => 0,
'exclude' => '',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => '',
'id' => 'custom-cat-drop',
'class' => 'form-select',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'option_none_value' => -1,
'value_field' => 'term_id',
'required' => false,
) ); ?>
</div>
<select class="form-select">
<option selected>Ganzer Ort</option>
<option value="action">Ganzer Ort1</option>
<option value="action">Ganzer Ort2</option>
<option value="action"><?php the_field('state'); ?></option>
</select>
</div>
<div class="d-inline-flex mb-2 mb-lg-0 ml-lg-3">
<input type="submit" id="searchsubmit" class="btn" name="submit" value="Jetzt Kuche finden">
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode('my_ajax_filter_search', 'my_ajax_filter_search_shortcode');
add_filter('doing_it_wrong_trigger_error', function () {
return false;
}, 10, 0);
This is my custom plugin
<?php
$args = array(
'post_type' => 'kitchen',
$postID = get_the_ID()
);
$the_query = new WP_Query($args);
?>
<div class="container">
<div class="row card-kitchens-title">
<h3>Top Küchen</h3>
</div>
<div class="row card-kitchens">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<?php if (get_field('featured', $postID)) : ?>
<div class="col-sm-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price1"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<div class="container">
<div class="row card-kitchens-title">
<h3>Empfohlene Küchen</h3>
</div>
</div>
<div class="container p-0">
<div class="row second-box">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<div class="col-sm-3 cards pb-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>