Using Theme Cards with FacetWP

FacetWP is an excellent plugin for building filterable grids, and the best part is that it works seamlessly with the Total theme’s Cards.

To display a theme card using FacetWP, you simply need to create a new template. In the Display tab, add the loop and call the wpex_card function like this:

while ( have_posts() ) : the_post();
    wpex_card( [
        'style'   => 'blog_1',
        'post_id' => get_the_ID(),
    ] );
endwhile;

Be sure to update the style parameter to match the card style you want. You can create multiple templates for different card styles. Additionally, you can pass extra arguments to wpex_card. A full list of available arguments can be found here.

How to create a grid?

When creating a custom template in FacetWP, you might want to display your items in a grid. To do this, wrap the loop in a <div> with a custom class that you can target with CSS, or use the theme’s built-in CSS framework.

For example, if you want to use the theme’s grid classes, your code could look something like this:

<div class="wpex-grid wpex-sm-grid-cols-2 wpex-md-grid-cols-4 wpex-grid-gap-20"><?php
    while ( have_posts() ) : the_post();
        wpex_card( [
            'style'   => 'blog_1',
            'post_id' => get_the_ID(),
        ] );
    endwhile;
?></div>