Archived topic
Facet WP with blog archive
5 replies · Started by Christine on February 14, 2022
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?
Hi there,
could i see the blog with the Facet WP and the broken columns ?
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!!
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;
}
}Amazing! It works! Thank you SO MUCH!
Happy to hear that!
