Custom Modules
Creating custom modules for Beaver Builder can open up a world of possibilities for you and your clients. You can extend and modify our existing modules to fit a specific use case, or create brand new modules.
We highly recommend taking advantage of our Custom Module Developer Course, which offers a comprehensive guide on creating an Image Comparison Slider module.
Getting Started
To begin, feel free to download our example plugin below. You can explore the code or refer to the step-by-step guide provided below.
- Download the Example Plugin zip to your computer.
- Go to your website's WordPress Admin Dashboard > Plugins > Add New > Upload Plugin.
- Upload the
bb-custom-module-examples-2.0.zip
file. - Activate the plugin.
- Launch Beaver Builder on a page and find the new Example Modules section in the Content Panel, containing the Basic Example and Example modules.
You can override any of the built-in modules by following the steps in the Override Built-In Modules article.
Step by Step Guide
In this step-by-step guide, we'll go over how to code custom modules with their own settings panel just like the modules included with the builder.
📄️ 01: Create a plugin
To create custom modules, you will first need to create a simple plugin. This will ensure that your modules are not overwritten when updating Beaver Builder via the remote updates interface.
📄️ 02: Add a module to your plugin
To add a module, create a folder in your plugin folder and give it a unique name using lowercase letters and dashes such as my-module.
📄️ 03: Define module settings
Registering your module is done through the FLBuilder::register_module
📄️ 04: Module Settings CSS & JavaScript
Now that you've defined your settings, you're ready to customize them using CSS and JavaScript. Beaver Builder gives you two entry points for doing this.
📄️ 05: Module HTML
It is essential that the frontend.php file is present for a module to function. This file should be placed in the /includes/ directory of your module, as shown in the example below.
📄️ 06: Module CSS
Now that you have a completed module, it's time to style it! Beaver builder
📄️ 07: Module JavaScript
Beaver Builder gives you two entry points for defining JavaScript for your
📄️ 08: Module property reference
$category string
📄️ 09: Module method reference
add_css( $handle, $src, $deps, $ver, $media )
📄️ 10: Setting fields reference
Please refrain from using the type or connection keys within the settings fields, as they have been designated for internal purposes and should not be used.
📄️ 11: Responsive fields reference
Users can enter different responsive breakpoint values for a single field by clicking on the device toggle icon associated with that field. You can see an example of this in the Beaver Builder editor if you visit the margins setting for rows, columns or modules.
📄️ 12: Repeater fields reference
A repeater field is a field that can be duplicated multiple times, reordered
📄️ 13: Sanitize field values
You can provide a sanitization callback function for your field's value. For
📄️ 14: Create custom fields
In addition to creating custom modules, developers can also define custom
📄️ 15: Helpers
There are helpers for CSS rendering and settings compatibility, as follows.
📄️ 16: Live preview reference
By default, whenever a user changes a module setting, the Beaver Builder
📄️ 17: Partial refresh reference
Current versions of Beaver Builder plugin employ Partial Refresh for layout,
📄️ 18: Override modules
Overriding Beaver Builder modules can be beneficial when you need to modify the module's functionality beyond what is available through its settings or options. This approach can be applied to all Beaver Builder modules.
📄️ 19: Localization
You will notice that in all of the examples we are using WordPress' built-in
📄️ 20: Module Aliases
Module aliases are a way to create copies of modules with pre-configured settings without having to completely write a new module from scratch. While the module aliases settings are pre-configured when a user drops the module on the page, the settings can still be changed by the user.