[Resolved] Facet WP with blog archive

[Christine]

Hi! I’m setting up FacetWP on a GB/GP site.
Unlike with other themes I’ve tried it didn’t work out of the box on GP’s blog archives. When I first tried, the facets were not visible.

FacetWP says sometimes you need to wrap the loop with their CSS class: https://facetwp.com/help-center/troubleshooting/using-the-right-query/

And this code was offered in the past to make it work with GP: https://gist.facetwp.com/gist/gist-327b6cf26e13c39582e5baa79b5508f5/
Which is about the same advice offered here: https://generatepress.com/forums/topic/generatepress-and-facetwp/#post-845032

When I used the code, the facets were now visible (yay), however the layout of my blog archive was broken. Only one column showed instead of 3, and sometimes only half a column.

Any clue how I can get it to work? This is my ideal solution if possible.

As a secondary solution I could use the shortcode method and build my content cards within facet wp. In this case I want the cards to match the ones I already created using GenerateBlocks. How can I grab the html/css of my generate blocks cards so I can rebuild the template?

[David]

Hi there,

could i see the blog with the Facet WP and the broken columns ?

[Christine]

Hi David,

Ok, check out the blog page now. I added the opening div with a class of facetwp-template, and the closing div, using hook elements. And now the facets appear the way I made them. Only the layout is broken. I will be so happy if you can figure out how to solve it. Thank you!!

[David]

Try adding this CSS:

.generate-columns-container:not(.masonry-container) {
    display: block !important;
    margin-left: 0;
}
@media(min-width: 769px) {
    .generate-columns-container:not(.masonry-container) .facetwp-template {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    
    .generate-columns-container .facetwp-template {
        margin-left: -40px;
    }
}

[Christine]

Amazing! It works! Thank you SO MUCH!

[David]

Happy to hear that!

[Author]

Posts