[Resolved] FacetWP problem with column setup

[Thomas]

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

[David]

Hi there,

see my reply here:

https://generatepress.com/forums/topic/wrap-archive-results-in-template/#post-2255170

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

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.

[David]

Can i see what you have so far ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Are you asking for site access or an image…?

Cheers,
Thomas

[David]

Can i see the Site, i just want to get a better picture of the filter and layout ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

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

[David]

Ok, now try adding this CSS:

.generate-columns-container .facetwp-template {
    display: flex;
    flex-wrap: wrap;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Thanks, that did the trick!

Cheers,
Thomas

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts