FLBuilderModule class

The FLBuilderModule class is the foundation for all modules in Beaver Builder. Custom modules extend this class to inherit core functionality and integrate with the builder.

Overview

The FLBuilderModule class is defined in classes/class-fl-builder-module.php and provides:

Module metadata and configuration
Settings form integration
Frontend rendering hooks
Asset management
Module lifecycle methods

Class Properties

All module classes that extend FLBuilderModule have access to these properties:

Core Properties

$node

string

Unique ID for the module instance (e.g., '5a3d9f12345')

$parent

string

Node ID of the parent column

$position

int

Sort order within the parent column (0-indexed)

$name

string

Display name for the module (e.g., 'Button')

$description

string

Description shown in the module panel

$category

string

Module category: 'Basic', 'Content', 'Layout', or custom

$slug

string

Module folder name - must match the directory name

$dir

string

Absolute path to the module directory

$url

string

URL to the module directory

Settings and Configuration

$settings

object

Module settings values from the user

$form

array

Settings form configuration array

$enabled

bool

Whether the module is enabled on the frontend (default: true)

$editor_export

bool

Whether to export content to WordPress editor (default: true)

$partial_refresh

bool

Enable partial refresh for live editing (default: false)

Asset Management

$css

array

Additional CSS files to enqueue

$js

array

Additional JS files to enqueue

$include_wrapper

bool

Whether to include module wrapper divs (default: true)

Source: class-fl-builder-module.php:10-160

Constructor

Every custom module must call the parent constructor:

class MyCustomModule extends FLBuilderModule {
    public function __construct() {
        parent::__construct(array(
            'name'            => __( 'My Custom Module', 'my-textdomain' ),
            'description'     => __( 'A custom module', 'my-textdomain' ),
            'category'        => __( 'Basic', 'my-textdomain' ),
            'dir'             => __DIR__,
            'url'             => plugins_url( '', __FILE__ ),
            'partial_refresh' => true,
            'icon'            => 'button.svg',
        ));
    }
}

Constructor Parameters

name

string

required

Module display name

description

string

Module description

Methods to Override

enqueue_scripts()

Enqueue module-specific CSS and JavaScript files.

public function enqueue_scripts() {
    // Enqueue CSS
    $this->add_css( 'my-module-css', $this->url . 'css/frontend.css' );
    
    // Enqueue JS
    $this->add_js( 'my-module-js', $this->url . 'js/frontend.js', array( 'jquery' ), '', true );
}

Called: When the module is rendered on the page

update( $settings )

Process and validate settings before saving.

public function update( $settings ) {
    // Sanitize text field
    $settings->my_text = sanitize_text_field( $settings->my_text );
    
    // Validate URL
    if ( ! empty( $settings->my_url ) ) {
        $settings->my_url = esc_url( $settings->my_url );
    }
    
    return $settings;
}

$settings

object

required

Module settings object to validate

Returns: (object) Sanitized settings object

delete()

Clean up when the module is deleted.

public function delete() {
    // Delete associated custom post
    if ( ! empty( $this->settings->custom_post_id ) ) {
        wp_delete_post( $this->settings->custom_post_id, true );
    }
}

Called: When the module instance is deleted

get_classname()

Customize the CSS class for the module wrapper.

public function get_classname() {
    $classes = array( 'my-custom-class' );
    
    if ( ! empty( $this->settings->style ) ) {
        $classes[] = 'my-module-' . $this->settings->style;
    }
    
    return implode( ' ', $classes );
}

Returns: (string) Space-separated CSS classes

Helper Methods

add_css()

Enqueue a CSS file for the module.

$this->add_css( 'handle', $url, $deps = array(), $version = FL_BUILDER_VERSION, $media = 'all' );

add_js()

Enqueue a JavaScript file for the module.

$this->add_js( 'handle', $url, $deps = array(), $version = FL_BUILDER_VERSION, $in_footer = false );

render_button()

Render a button using Beaver Builder’s button renderer.

FLBuilder::render_module_html( 'button', $this->settings->my_button );

Module Files Structure

A typical module directory structure:

my-module/
├── my-module.php           # Module class
├── includes/
│   ├── frontend.php        # Frontend HTML template
│   ├── frontend.css.php    # Dynamic CSS
│   └── frontend.js.php     # Dynamic JS (optional)
├── css/
│   └── frontend.css        # Static CSS (optional)
├── js/
│   └── frontend.js         # Static JS (optional)
└── icon.svg                # Module icon

Frontend Templates

The includes/frontend.php file has access to:

$module

object

The module instance (FLBuilderModule object)

$settings

object

Module settings values

$id

string

The module node ID

<!-- includes/frontend.php -->
<div class="my-module-content">
    <h2><?php echo $settings->title; ?></h2>
    <p><?php echo $settings->description; ?></p>
</div>

Usage Example

Complete custom module:

<?php

class MyAlertModule extends FLBuilderModule {
    
    public function __construct() {
        parent::__construct(array(
            'name'            => __( 'Alert', 'my-textdomain' ),
            'description'     => __( 'Display an alert message', 'my-textdomain' ),
            'category'        => __( 'Basic', 'my-textdomain' ),
            'dir'             => __DIR__,
            'url'             => plugins_url( '', __FILE__ ),
            'icon'            => 'alert.svg',
            'partial_refresh' => true,
        ));
    }
    
    public function enqueue_scripts() {
        $this->add_css( 'alert-css', $this->url . 'css/frontend.css' );
    }
    
    public function update( $settings ) {
        $settings->message = wp_kses_post( $settings->message );
        return $settings;
    }
}

FLBuilder::register_module( 'MyAlertModule', array(
    'general' => array(
        'title'    => __( 'General', 'my-textdomain' ),
        'sections' => array(
            'general' => array(
                'title'  => '',
                'fields' => array(
                    'message' => array(
                        'type'    => 'editor',
                        'label'   => __( 'Message', 'my-textdomain' ),
                        'default' => '',
                    ),
                    'type' => array(
                        'type'    => 'select',
                        'label'   => __( 'Type', 'my-textdomain' ),
                        'default' => 'info',
                        'options' => array(
                            'info'    => __( 'Info', 'my-textdomain' ),
                            'success' => __( 'Success', 'my-textdomain' ),
                            'warning' => __( 'Warning', 'my-textdomain' ),
                            'error'   => __( 'Error', 'my-textdomain' ),
                        ),
                    ),
                ),
            ),
        ),
    ),
));

Creating Modules

Step-by-step guide to building modules

Module Structure

Learn about module file structure

Frontend Rendering

Render module output

Settings Forms

Configure module settings

Best Practices

Always sanitize and validate user input in the update() method:

public function update( $settings ) {
    $settings->text = sanitize_text_field( $settings->text );
    $settings->html = wp_kses_post( $settings->html );
    return $settings;
}

The $settings property contains user input. Always escape output in templates:

<h2><?php echo esc_html( $settings->title ); ?></h2>

Enable partial_refresh for better user experience during live editing:

'partial_refresh' => true,

Source Code Reference

File: classes/class-fl-builder-module.php
Since: Version 1.0
Version: 2.10.1.1

Core Classes

Available Modules

Hooks & Filters

Services

Overview

Class Properties

Core Properties

Settings and Configuration

Asset Management

Constructor

Constructor Parameters

Methods to Override

enqueue_scripts()

update( $settings )

delete()

get_classname()

Helper Methods

add_css()

add_js()

render_button()

Module Files Structure

Frontend Templates

Usage Example

Creating Modules

Module Structure

Frontend Rendering

Settings Forms

Best Practices

Source Code Reference

Build docs developers (and LLMs) love

Core Classes

Available Modules

Hooks & Filters

Services

​Overview

​Class Properties

​Core Properties

​Settings and Configuration

​Asset Management

​Constructor

​Constructor Parameters

​Methods to Override

​enqueue_scripts()

​update( $settings )

​delete()

​get_classname()

​Helper Methods

​add_css()

​add_js()

​render_button()

​Module Files Structure

​Frontend Templates

​Usage Example

​Related Documentation

Creating Modules

Module Structure

Frontend Rendering

Settings Forms

​Best Practices

​Source Code Reference

Build docs developers (and LLMs) love

Overview

Class Properties

Core Properties

Settings and Configuration

Asset Management

Constructor

Constructor Parameters

Methods to Override

enqueue_scripts()

update( $settings )

delete()

get_classname()

Helper Methods

add_css()

add_js()

render_button()

Module Files Structure

Frontend Templates

Usage Example

Related Documentation

Best Practices

Source Code Reference