Filter results with custom field values and dropdown

by

I need to filter posts by a custom field value.

My specific example:

  • User browse to products > category 1 > subcategory A.
  • ALL “subcategory A” items (products custom post type) are displayed
    as default by date.
  • Each item in subcategory A has a custom field “size”. User can select the size with a dropdown menu and posts are filtered displaying only items with “custom field:size” = “selected size”. Filter is kept also in pagination, because products are on more pages.

I’ve checked a lot of answers, but no case was simple as that. I was thinking about doing it using a custom search or a plugin, but I really don’t know where to start. thanks for your help.

EDIT: the custom field values are fixed, not auto-populated. The select can be built in plain html without extra queries.

1 Answer
1

Edited according to first comments and Pastebin code:

<?php /* You can also leave 'action' blank: action="" */ ?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="my_size" id="size" class="postform" onchange="submit();">
        <option selected="selected">Choose a size</option>
        <option value="10">10</option>
        <option value="20">20</option>
</select>
</form>
<?php /* Reset filter */ ?>
<p><a href="https://wordpress.stackexchange.com/questions/83928/<?php the_permalink(); ?>">Clear filter</a></p>

<?php
if( !isset($_POST['my_size']) || '' == $_POST['my_size']) {

    // unfiltered product list here

}
else {

    // Get dropdown value
    // Don't forget to sanitize this!
    $size = $_POST['my_size'];

    // Create new query
    $query = new WP_Query( array(
        'post_type'=> 'product', // your CPT
        'post_status' => 'publish',
        'meta_key' => 'size',
        'meta_value' => $size, // Dropdown value
    ) );

    // Loop
    if($query->have_posts()):
        while( $query->have_posts() ): $query->the_post();
            // Product content
        endwhile;
    endif;

    // reset query to default
    wp_reset_postdata();

}

See Codex for WP_Query reference.

Leave a Comment