Custom module developer guide

http://kb.wpbeaverbuilder.com/article/124-custom-module-developer-guide#overview

• Overview
• 1. Create a plugin
• 2. Add a module to your plugin
• 3. Define module settings
• 4. Module settings CSS and JavaScript
• 5. Module HTML
• 6. Module CSS
• 7. Module JavaScript
• Module property reference
• Module method reference
• Setting fields reference
• Repeater fields reference
• Create custom fields
• Live preview reference
• Partial refresh reference
• Override built-in modules
• Localization

Create a plugin

• Make a new folder in plugins: bb-plugin-custom
• Create a php file with the same name: bb-plugin-custom.php
• Copy-paste this in the file:<?php
  /**
  * Plugin Name: My Custom Modules
  * Plugin URI: http://www.mywebsite.com
  * Description: Custom modules for the Beaver Builder Plugin.
  * Version: 1.0
  * Author: Your Name
  * Author URI: http://www.mywebsite.com
  */

  define( ‘MY_MODULES_DIR’, plugin_dir_path( __FILE__ ) );
  define( ‘MY_MODULES_URL’, plugins_url( ‘/’, __FILE__ ) );
  function my_load_module_examples() {
  if ( class_exists( ‘FLBuilder’ ) ) {
  // Include your custom modules here.
  }
  }
  add_action( ‘init’, ‘my_load_module_examples’ );

• Edit the information such as Plugin Name and Author. You should also rename the constants MY_MODULES_DIR and MY_MODULES_URL to match your plugin’s namespace, keeping the _DIRand _URL suffixes.

Add a module to your plugin

 

Overriding built-In modules

Any of the built-in modules can be overridden within your theme by following the steps below.

1. Create a new folder in your theme’s folder named fl-builder.

2. Create a new folder within your theme’s fl-builder folder named modules.

3. Copy the module you wish to override from wp-content/plugins/bb-plugin/modulesto your theme’s fl-builder/modules folder.

That’s it! You can now start editing the module to suit your needs. Note that even though you can customize the module’s code, the module’s folder name, main PHP file name, and main class name must remain unchanged to be recognized by the builder.

If you’re not seeing your changes, try clearing the Page Builder cache.