FacetWP – Beaver Builder

Enhance Your Site with FacetWP and Beaver Builder Integration

The combination of FacetWP and Beaver Builder offers an exceptional way to create dynamic and user-friendly post listings on your WordPress site. This integration allows you to implement filtering options to refine search results effortlessly, providing your audience with an engaging browsing experience.

Development

Understanding the Module Compatibility

First off, it’s essential to note that not all modules are compatible with FacetWP in Beaver Builder. The primary supported modules include Posts and WooCommerce. If you want to dive deeper, Advanced Posts and Woo Products modules are available exclusively through the Ultimate Addons for Beaver Builder plugin. For those using PowerPack, the Content Grid module will also be compatible. Additionally, WooPack can be used for Product Grid modules.

When you set up these compatible modules, you’ll notice a new “FacetWP” setting on the module’s edit screen. Simply toggle this to “Enabled” to leverage the full power of FacetWP for filtering your listings.

Step-by-Step Implementation

1. Activate the Facets: While editing your page in Beaver Builder, you can navigate to the blue “+” button to view the available modules. Here, you’ll find a new section dedicated to “FacetWP” where you can select your desired facets.

2. Faceting Your Content: After enabling FacetWP for your listing module, the next step involves adding facets to enhance filtering. The facets can range from categories to tags, or even custom attributes specific to your products. ByUsing these facets, your website visitors can filter the displayed posts or products based on their preferences, significantly improving their user experience.

3. Pagination Control: FacetWP is equipped to automatically detect Beaver Builder’s numbered pagination. However, should you prefer to manage pagination manually, you can set the module’s pagination option to “None” and create a Pager facet to control the display of pages visually.

Creating Archive Pages

The integration does not stop at simple posts; it can also handle more complex structures like archive pages. If you’re employing Beaver Themer, you can craft layouts specifically for Archive pages, which apply to categories and tags. To accomplish this, ensure the Content > Source setting in your posts module is set to Main Query, allowing WordPress to manage the archive queries effectively in tandem with Beaver Builder and FacetWP.

Advanced Customization

Sometimes, you need to go beyond standard queries. The ability to customize the posts module query greatly enhances your site’s functionality. Using Beaver Builder’s fl_builder_loop_query_args hook enables you to modify how posts are fetched and displayed. For instance, you may want to showcase specific custom post types. Here’s a nifty example that alters the primary sorting method on the front page.

php
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' );

You can add this PHP snippet to your child theme’s functions.php file, or alternatively, utilize a custom hooks add-on or a code snippets plugin to ensure your website maintains its performance.

Handling Scrolling Issues

One potential problem you may encounter when using FacetWP-enabled modules is the unintended scrolling to the top of the page when it loads. This behavior typically occurs if you receive JavaScript errors related to FLBuilderLayout due to improper loading order of scripts.

If you experience this, a few common culprits might be causing the issue:
– Settings Configuration: If the “Render CSS/JS assets inline” is enabled in Beaver Builder settings under Settings > Beaver Builder > Advanced > Frontend, you may need to disable it. This should help prevent erratic page scrolling.

• Inline Filters: If you have any custom code in your functions.php file that renders assets inline, it may conflict with the loading sequence of FacetWP and Beaver Builder. Ensure any such filters are removed.

• Caching Plugins: Some caching or optimization plugins might also interfere by deferring the JavaScript load or combining scripts. Check their settings thoroughly to ensure that JavaScript loads in the appropriate sequence.

Special Considerations for PowerPack Modules

If you employ PowerPack’s Content Grid module in conjunction with FacetWP, extra caution is warranted. Issues similar to those experienced using standard Beaver Builder modules may occur. To mitigate potential scrolling problems with these content grids, adding a specific action hook to your child theme can resolve the automatic scrolling.

php
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 );

Keep Things Updated: Changelog Insights

Regular updates are part and parcel of ensuring everything runs smoothly. The plugin has seen various changes in its update cycle, addressing crucial functionality:
– Version 1.4.2 resolved issues surrounding script enqueueing to support deferred loading strategies in order to rectify JavaScript errors.
– Version 1.4.1 enhanced compatibility with the Ultimate Addons for Beaver Builder.
– Fixes have also been applied to ensure proper pagination detection and functionality for Themer layouts through various updates.

Maintaining an updated system means less hassle and improved performance, ensuring your website operates seamlessly.

Conclusion

Integrating FacetWP with Beaver Builder presents a fantastic opportunity to enhance your WordPress site. It allows for dynamic post listings and custom filters, enriching user interaction and engagement. The capacity to customize queries and handle pagination not only empowers you as a site owner but ensures your visitors have a seamless experience as they explore your content.

By following best practices for setup and customization, you can effectively implement this powerful pairing to create a unique and navigable site that caters to your audience’s needs. Whether it’s through showcasing your blog posts, products, or archives, the capabilities of FacetWP and Beaver Builder combined will undoubtedly enhance your website’s functionality and user engagement.