FacetWP is an amazing plugin for creating filterable grids and the best part is that it integrates nicely with the Total theme Cards. If you want to use a theme card with FacetWP all you need to do is create a new template and in the “Display” tab add the loop and use the wpex_card function (see the screenshot below for reference).
Make sure to change the “style” parameter to the card style you want. You can create multiple templates for different card styles. Also if you want to pass more arguments to the wpex_card such as “thumbnail_size” you can. You can find a list of arguments here.
How to create a grid?
When you create a custom template in FacetWP you may want to display your items in a grid, in which case you would do this by adding a div around the loop with a custom classname that you can target with CSS or using the theme’s CSS framework. So for example if you wanted to use the theme’s grid classes you may write the code above something like this:
<div class="wpex-grid wpex-grid-cols-3 wpex-grid-gap-20">
'blog_1',
'post_id' => get_the_ID(),
) );
endwhile; ?>
</div>Which will add your entries inside a 3 column grid with a 20px gap between the items.