Use FacetWP alongside Beaver Builder and (optionally) Beaver Themer.

Supported modules

  1. Posts
  2. WooCommerce
  3. Advanced Posts (requires the Ultimate Addons for Beaver Builder plugin)
  4. Woo Products (requires the Ultimate Addons for Beaver Builder plugin)
  5. Content Grid (requires the PowerPack plugin)
  6. Product Grid (requires WooPack)

Usage

FacetWP and supported modules for Beaver Builder

If you’re using a supported listing module (see above), you’ll see a new “FacetWP” setting on the module’s edit screen.

Set it to “Enabled” for FacetWP to use the listing for filtering.

Next, add some facets to the page. When editing the page via Beaver Builder’s visual mode, click the blue “+” to display available modules. Within that area, you’ll see a new “FacetWP” section.

Select the “Facet” option, then choose an existing facet:

Other FacetWP features (Sort, Selections, etc.) are available as modules too.

Pagination

In most cases, FacetWP will automatically detect Beaver Builder’s numbered pagination. However, you can optionally set the module’s pagination to “None” and use a Pager facet instead.

Archive pages

Beaver Themer allows you to design layouts for Archive pages (blog posts archive, taxonomy archives, etc).

You will need to set the Content > Source in your posts module for the archive to Main Query. This ensures the WordPress archive query is used for both Beaver Builder and FacetWP.

Customizing a Posts module query

If you need to adapt or override the query of a Posts module, you can use Beaver Builder’s fl_builder_loop_query_args hook. For example if you want to display only specific custom post types, change the order, or use a meta query.

This hook works similar to WP’s pre_get_posts hook. It exposes the WP_Query object and allows you to customize the query in any way you want.

The following example adds a fallback sorting method by overriding the original orderby query argument, on the front page only:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

function my_query_order( $query_args ) { if ( is_front_page() ) { $query_args['orderby'] = array( 'date' => 'DESC', // Primary sort: by post date 'title' => 'ASC' // Secondary, fallback sort: by post title ); } return $query_args; } add_filter( 'fl_builder_loop_query_args', 'my_query_order' );

For more examples of how to use this hook, including how to apply it only to a specific module, see this Beaver Builder tutorial.

For an overview of all available Beaver Builder hooks, see this page.

Prevent unwanted scrolling

Beaver Builder, by itself, automatically scrolls the page to the top of the module when the page loads.

On pages with FacetWP-enabled modules, you will normally not see this scroll, as FacetWP automatically prevents it. So if you do see the page scrolling when it loads, something is wrong. When you open your browser Console, you’ll likely see one of the following errors, or something similar referencing FLBuilderLayout:

Uncaught ReferenceError: FLBuilderLayout is not defined -or- ReferenceError: Can’t find variable: FLBuilderLayout

This error is most often caused by the use of the fl_builder_render_assets_inline hook, which makes Beaver Builder’s JavaScript load inline in the footer, after FacetWP’s Beaver Builder add-on script that prevents the scrolling. FacetWP’s script expects Beaver Builder’s JavaScript to load before it.

To fix this, search your functions.php file for the use of this snippet, and remove it:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

// DON'T use this. REMOVE it if you have this in your functions.php add_filter( 'fl_builder_render_assets_inline', '__return_true' );

If you’re certain you are not using this filter, be aware that the same situation could also be caused by a caching/optimization plugin. Check your settings and make sure to not load JavaScript deferred, and don’t combine scripts. Or experiment with the settings to make sure that FacetWP’s Beaver Builder add-on’s front.js script loads after all Beaver Builder scripts.

Prevent PowerPack Content Grid module scrolling

If you are using any PowerPack Content Grid modules on a page that also has (any type of) FacetWP-enabled post listing, depending on your setup, you may see unexpected automatic scrolling to the top of these PowerPack modules when the page is (pre-)loaded with a facet selection. To prevent these automatic scrolls, add the following code to your (child) theme’s functions.php:

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_action( 'pp_cg_before_posts', function( $settings, $query ) { $paged = $GLOBALS['wp_the_query']->get( 'paged' ); $paged = ( $paged < 2 ) ? 0 : $paged; $GLOBALS['wp_the_query']->set( 'page', $paged ); $GLOBALS['wp_the_query']->set( 'paged', $paged ); }, 10, 2 );

Changelog

1.4.1

  • Fixed changes fl_builder_loop_query_args priority for UABB compatibility

1.4

  • Fixed JS updated to support FacetWP 3.9
  • Fixed removed BB's "offset" setting when FacetWP is enabled for the current grid

1.3.3

  • Fixed issue with the WooCommerce module
  • Fixed issue with query detection and pagination when using a Themer layout

1.3.2

  • New added support for the UABB "Woo Products" module
  • New support equal heights for "Posts" module
  • Fixed ignore the main archive query if a Beaver Themer archive layout exists
  • Fixed only intercept pagination for FWP-enabled modules

See also