Archived topic
FacetWP problem with column setup
9 replies · Started by Thomas on September 10, 2022
Hi,
The FacetWP filter functionality works fine with GeneratePress but it breaks the column setup (posts show below each other).
It seems adding the necessary class for filtering "facetwp-template" inside the "generate-columns-container" via the hook "generate_before_main_content" breaks the column display.
When using the prior "generate_inside_container" hook for adding the "facetwp-template" class the column layout works ans intended.
The problem: Anything before the columns wrapped in the "facetwp-template" class (e.g. the FacetWP filter selects) has to be added via the "generate_after_header hook - and therefore outside the content area which throws the layout off (margins, padding, etc.)
Is there a recommended way to use FacetWP with the GeneratePress column setup? If not, is there a way to add something before the "generate-columns-container" class but still inside the content area?
Cheers,
Thomas
Hi there,
see my reply here:
https://generatepress.com/forums/topic/wrap-archive-results-in-template/#post-2255170
Hi,
Thanks, unfortunately that doesn't seem to work with FacetWP - the columns are still broken and displayed below each other.
I can only get it to work with this hook setup:
add_action( 'generate_after_header', function() {
if ( is_post_type_archive( 'deals' ) ) {
echo '<div class="facetwp-filter-section">';
echo facetwp_display('facet','deals_category');
echo facetwp_display('facet','reset');
echo '</div>';
}
});
add_action( 'generate_inside_container', function() {
if ( is_post_type_archive( 'deals' ) ) {
echo '<div class="facetwp-template">';
}
});
add_action( 'generate_after_main_content', function() {
if ( is_post_type_archive( 'deals' ) ) {
echo '</div>';
}
});It's not optimal as the filters should be inside the main content section too in order to use the corresponding margins/padding.
Can i see what you have so far ?
Are you asking for site access or an image...?
Cheers,
Thomas
Can i see the Site, i just want to get a better picture of the filter and layout ?
I added the link in the private info section.
I set the hooks for the FacetWP wrap as recommended (generate_before_loop/generate_after_loop) and added the FacetWP filters before via generate_before_main_content.
Cheers,
Thomas
Ok, now try adding this CSS:
.generate-columns-container .facetwp-template {
display: flex;
flex-wrap: wrap;
}Thanks, that did the trick!
Cheers,
Thomas
Glad to be of help!
