Post filter by metaboxes WordPress. Code example

Require filter on your page. Depending on $_POST data our WP_Query($args) will change.

In the place where we want to see the filter, add the following code:

<?php 
require get_template_directory_uri() . 'inc/fiter.php';
?>

After that, in the folder with your theme, if not, create a folder inc. In this folder, create a filter.php file and add the following code to it:

<div class="wrapper archive_cars">

<?php 
if(!empty($_POST['submit'])) { // Check if the form has been submitted

    $args = array(
        'post_type' => 'cars',
        'posts_per_page' => -1, // Display all cars
        'meta_query' => array('relation' => 'AND'),
        'tax_query' => array('relation' => 'AND'),
    );

    if(isset($_POST['car_type']) && $_POST['car_type'] !='') {
        array_push($args['meta_query'], array(
            'key' => 'car_type',
            'value' => esc_attr($_POST['car_type']),
        ));
    }

    if(isset($_POST['car_price']) && $_POST['car_price'] !='') {
        array_push($args['meta_query'], array(
            'key' => 'car_price',
            'value' => esc_attr($_POST['car_price']),
            'type' => 'numeric',
            'compare' => '<=', // Filter cars with a price less than or equal to the selected value
        ));
    }

    $properties = new WP_Query($args); // Create a query to retrieve cars based on the form filter

    if ( $properties->have_posts() ) {

        while ( $properties->have_posts() ) {
            $properties->the_post(); 
        
            get_template_part('partials/content'); // Include content from the content.php file
        
        }
    } else {
        echo '<p>'.esc_html__('No Entries','myplugin').'</p>'; // Display a message for no entries
    }

} else {

    $properties = new WP_Query($args); // Create a default query to retrieve all cars

    if ( $properties->have_posts() ) {

        while ( $properties->have_posts() ) {
            $properties->the_post(); 
            
            get_template_part('partials/content'); // Include content from the content.php file
        
        }
    } else {
        echo '<p>'.esc_html__('No Entries','myplugin').'</p>'; // Display a message for no entries
    }
}

// Display pagination
posts_nav_link();

?>
</div>

All that remains is to add the body of our posts, for this, create a new folder in the root directory of your site and name it partials. In this folder, add a new content.php file and fill it with the code below:

<div class="wrapper filter">
   


    <form method="post" action="<?php get_post_type_archive_link('property'); ?>">
        

        <input type="text" placeholder="Maximum Price" name="car_price" value="<?php  if(isset($_POST['car_price'])){echo esc_attr($_POST['car_price']);} ?>" /> 
        
        <select name="cars_type">
            <option value="">Select</option>
            <option value="4x4" <?php if(isset($_POST['cars_type']) and $_POST['car_type'] == '4x4') { echo 'selected'; } ?>>4x4</option>
            <option value="New" <?php if(isset($_POST['cars_type']) and $_POST['car_type'] == 'New') { echo 'selected'; } ?>>New</option>
            <option value="Used"  <?php if(isset($_POST['cars_type']) and $_POST['car_type'] == 'Used') { echo 'selected'; } ?>>Used</option>
        </select>

       
        <input type="submit" name="submit" value="filter" />
    </form>
</div>

In directory inc create filter.php file. Which is essentially a form that sends data by POST to this page

<div class="wrapper filter">
    <form method="post" action="<?php echo get_post_type_archive_link('property'); ?>">
        <input type="text" placeholder="Maximum Price" name="car_price" value="<?php if(isset($_POST['car_price'])){echo esc_attr($_POST['car_price']);} ?>" /> <!-- Input field for maximum price with pre-filled value if set -->
        
        <select name="car_type"> <!-- Dropdown for car type -->
            <option value="">Select</option>
            <option value="4x4" <?php if(isset($_POST['car_type']) && $_POST['car_type'] == '4x4') { echo 'selected'; } ?>>4x4</option> <!-- Option for 4x4 car type with selected attribute if matching the posted value -->
            <option value="New" <?php if(isset($_POST['car_type']) && $_POST['car_type'] == 'New') { echo 'selected'; } ?>>New</option> <!-- Option for New car type with selected attribute if matching the posted value -->
            <option value="Used" <?php if(isset($_POST['car_type']) && $_POST['car_type'] == 'Used') { echo 'selected'; } ?>>Used</option> <!-- Option for Used car type with selected attribute if matching the posted value -->
        </select>

        <input type="submit" name="submit" value="Filter" /> <!-- Submit button to trigger the filter -->
    </form>
</div>