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.

Beaver Builder Course

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.

1. Download the Example Plugin zip to your computer.
2. Go to your website's WordPress Admin Dashboard > Plugins > Add New > Upload Plugin.
3. Upload the bb-custom-module-examples-2.0.zip file.
4. Activate the plugin.
5. Launch Beaver Builder on a page and find the new Example Modules section in the Content Panel, containing the Basic Example and Example modules.

tip

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.