Skip to main content

​
Development Environment Setup

Before you start developing custom modules or extensions for Beaver Builder, ensure you have a proper development environment:

​
Requirements

  • WordPress 5.0 or higher
  • PHP 7.4 or higher
  • Beaver Builder plugin installed and activated
  • Code editor (VS Code, PHPStorm, etc.)
  • Local development environment (Local, MAMP, Docker, etc.)

​
Setting Up Your Plugin

Create a custom plugin to house your Beaver Builder customizations: 
<?php
/**
 * Plugin Name: My Beaver Builder Extensions
 * Description: Custom modules and extensions for Beaver Builder
 * Version: 1.0.0
 * Author: Your Name
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

define( 'MY_BB_DIR', plugin_dir_path( __FILE__ ) );
define( 'MY_BB_URL', plugins_url( '/', __FILE__ ) );

/**
 * Load custom modules
 */
function my_bb_load_modules() {
    if ( class_exists( 'FLBuilder' ) ) {
        require_once MY_BB_DIR . 'modules/my-custom-module/my-custom-module.php';
    }
}
add_action( 'init', 'my_bb_load_modules' );

​
Plugin Structure Overview

Beaver Builder follows a modular architecture. Understanding the core structure will help you develop effectively:

​
Directory Structure

my-bb-extensions/
├── modules/
│   └── my-custom-module/
│       ├── includes/
│       │   ├── frontend.php
│       │   ├── frontend.css.php
│       │   └── frontend.js.php
│       ├── css/
│       │   └── frontend.css
│       ├── js/
│       │   └── frontend.js
│       ├── icon.svg
│       └── my-custom-module.php
├── extensions/
│   └── my-extension/
└── my-bb-extensions.php

​
Key Components

Modules

Custom content blocks that users drag and drop into their layouts

Extensions

Functionality that extends or modifies Beaver Builder’s core features

Settings Forms

Configuration interfaces for modules and rows/columns

Templates

PHP files that render module output on the frontend

​
Best Practices

​
Code Standards

Follow WordPress coding standards and Beaver Builder conventions:
  • Use descriptive, prefixed class names (e.g., FLMyCustomModule)
  • Prefix functions to avoid conflicts (e.g., my_bb_custom_function)
  • Use lowercase with hyphens for slugs (e.g., my-custom-module)
  • Keep module files in their own directories
  • Use includes/ for template files
  • Separate CSS and JS into dedicated files
  • Include an icon.svg for your module icon
  • Sanitize all user inputs
  • Escape all outputs
  • Check user capabilities
  • Use nonces for AJAX requests
  • Enqueue scripts/styles only when needed
  • Use transients for expensive operations
  • Optimize database queries
  • Implement proper caching

​
Module Development Workflow

1

Plan Your Module

Define the purpose, features, and settings your module will need
2

Create Module Structure

Set up the directory structure and base files
3

Define Settings

Create the settings form with fields users will configure
4

Build Frontend Template

Develop the HTML output in includes/frontend.php
5

Style Your Module

Add CSS in includes/frontend.css.php or static CSS files
6

Add Interactivity

Include JavaScript in includes/frontend.js.php if needed
7

Test Thoroughly

Test in the builder, frontend, and with different settings combinations

​
Development Workflow

​
Local Development

  1. Enable WordPress Debug Mode
// In wp-config.php
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'SCRIPT_DEBUG', true );
  1. Clear Cache Frequently
Beaver Builder caches CSS and JS. Clear it while developing: 
FLBuilderModel::delete_asset_cache_for_all_posts();
  1. Use Partial Refresh
Enable partial refresh in your module to speed up development: 
public function __construct() {
    parent::__construct(array(
        'partial_refresh' => true,
    ));
}

​
Debugging Tools

// In your module class
public function __construct() {
    parent::__construct(array(
        'name' => 'My Module',
    ));
    
    // Debug settings
    if ( WP_DEBUG ) {
        error_log( print_r( $this->settings, true ) );
    }
}

​
Core Classes Reference

FLBuilder

Main class for registering modules and rendering layouts

FLBuilderModule

Base class that all custom modules extend

FLBuilderModel

Handles data operations and layout management

FLBuilderCSS

Helper methods for generating CSS rules

​
Key File Locations

# Core module base class
/classes/class-fl-builder-module.php

# Module settings handling
/includes/module-settings.php

# Built-in modules (for reference)
/modules/button/button.php
/modules/heading/heading.php

# CSS helper class
/classes/class-fl-builder-css.php

​
Next Steps

Create Custom Modules

Learn how to build your first custom module

Module Settings

Configure settings forms and field types

Hooks & Filters

Extend functionality with WordPress hooks

Build docs developers (and LLMs) love

Get started for freeTalk to us