How To's & Tips

Home > PageBuilder > Developer > How To's & Tips

Create a video lightbox for an Amazon S3 video

These instructions assume that you haven't uploaded your video to Amazon S3 yet but also describe the folder structure and file permissions you need to get the video lightbox to work. Thanks to one of our members for providing this information! - Create a folder on Amazon S3 that ends as a domain name. For example, create a folder with your domain name at the end, such as name.myurl.com. - Under that folder, create another folder with any name. - Upload the video. - Change...

Prevent CSS and JavaScript from loading on archive pages

When you have blog posts or custom posts displayed on an archive page that was built with PageBuilder, the CSS and JavaScript might be loaded onto the archive page. Sometimes you want this functionality, other times, not. This behavior occurs because of the way PageBuilder taps into the loop to know which CSS and JavaScript files to load. To prevent the CSS and JavaScript files from loading on archive pages, add the following code to your child theme’s functions.php file. if ( is_archive()...

Load Google fonts locally (GDPR)

PageBuilder accesses Google Fonts through its Content Delivery Network (CDN). Google claims to be compliant with GDPR in their use of personal information. If you still want to load Google fonts locally from your own server, this article has the procedure to do so. TIP PageBuilder includes Font Awesome 5 icons with the plugin and loads them locally. Load Google Fonts locally This tutorial affects both the PageBuilder plugin and the theme. It changes the way the actual font files are deli...

Render layouts with PHP

You can render PageBuilder layouts using PHP. This is typically done in theme files to create editable headers and footers, but there are other uses as well, such as an editable callout below your posts. Use the FLBuilder::render_query method for this purpose. It accepts an array of query parameters and works exactly the same way WP_Query works, except that it renders PageBuilder layout for any posts that are found instead of returning them. See the WordPress Codex on WP_Query (https://develop...

Add custom attributes to rows, columns or modules

You can easily add custom attributes when you need them for a particular row, column or module. The code examples below use filters to add the attributes to a row, column or module that has a custom ID. In all of these examples, assign your own custom ID to the ID field in the HTML attributes section of the Advanced tab. Substitute your own attribute name and value and your custom ID in the code and place the code in the functions.php file of your child theme. Add an attribute to a row T...

Disable minification and caching with WP_DEBUG

It is a best practice to set WP_DEBUG (https://wordpress.org/support/article/debugging-in-wordpress/) to true during development to catch errors that might not otherwise show. Setting WP_DEBUG to true in your wp-config.php file will have the following effects: - The compiled css/js files that are normally stored in the /uploads/bb-plugin/cache directory will be unminified and regenerated on every page load. - It will disable minification and concatenation of the core UI files in the /plug...

Disable schema markup in PageBuilder

If you'd like to disable Schema (https://schema.org/) markup within PageBuilder, use the filter: add_filter( 'fl_builder_disable_schema', '__return_true' );

Load CSS and JavaScript inline

Instead of loading Beaver Builder CSS and JavaScript as an asset file, you can render the CSS inline in the <head> tag and the JavaScript inline right before the closing <body> tag. This can be a solution to some rare caching issues, but in most cases you don’t need to do it. Add the following line of code to your functions.php file in your child theme: add_filter( 'fl_builder_render_assets_inline', '__return_true' );

Theme author templates

Theme authors can make their layout templates available to users within the lite and premium versions of Beaver Builder without needing to import them through the WordPress importer. This is perfect for theme authors who distribute PageBuilder using TGM plugin activation (http://tgmpluginactivation.com/), and it's a great addition for those already building custom modules for their themes. Using the following method, templates are automatically made available in Beaver Builder’s template sele...

HTML, CSS, and JavaScript reference

Each PageBuilder layout has a dynamically generated and compressed CSS and JavaScript file, which is cached each time you update or save a layout. Each file name starts with the current post ID, followed by either -layout , -layout-draft , or -layout-preview. Additionally, instead of loading the CSS and JavaScript for every possible module, PageBuilder only loads the CSS and JavaScript for the modules currently on the page. That includes only enqueuing when needed third-party libraries such as...

Data storage

Layout data for PageBuilder is stored in the WordPress postmeta table in a serialized array. Live PageBuilder data is stored using the postmeta key _fl_builder_data, , while draft data is stored using the postmeta key _fl_builder_draft. When you activate PageBuilder, any content that is already in the WordPress editor is migrated to a text module within PageBuilder. In addition, every time you make changes and publish a PageBuilder layout, a stripped-down version of the layout is saved to the ...

Limit Typography section controls

You can add code that displays only a subset of the Typography section in modules that include it. For example, if you add the following code to a modules typography array, it will disable font size controls for mobile device settings. 'disabled' => array( 'responsive' => array( 'font_size' ) )

Filter Google Map arguments in the Map module

The fl_builder_map_args filter lets you add or change Google map arguments to filter the location on the map, add language parameters for WPML, or even change the key. Here's an example. add_filter( 'fl_builder_map_args', function( $args, $settings ) { if ( defined( 'ICL_LANGUAGE_CODE' ) ) { $args['language'] = ICL_LANGUAGE_CODE; } return $args; }, 10, 2 );