Skip to content

Instantly share code, notes, and snippets.

@beaverbuilder
Last active Oct 12, 2019
Embed
What would you like to do?
This snippet is used on the following knowledge base article - http://kb.wpbeaverbuilder.com/article/124-custom-module-developer-guide
<?php // Do not copy this line, start with line 3
/**
* 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' );
<?php // Do not copy this line, start with line 3
class MyModuleClass extends FLBuilderModule {
public function __construct()
{
parent::__construct(array(
'name' => __( 'My Module', 'fl-builder' ),
'description' => __( 'A totally awesome module!', 'fl-builder' ),
'group' => __( 'My Group', 'fl-builder' ),
'category' => __( 'My Category', 'fl-builder' ),
'dir' => MY_MODULES_DIR . 'my-module/',
'url' => MY_MODULES_URL . 'my-module/',
'icon' => 'button.svg',
'editor_export' => true, // Defaults to true and can be omitted.
'enabled' => true, // Defaults to true and can be omitted.
'partial_refresh' => false, // Defaults to false and can be omitted.
));
}
}
<?php // Do not copy this line, start with line 3
function my_load_module_examples() {
if ( class_exists( 'FLBuilder' ) ) {
require_once 'my-module/my-module.php';
}
}
<?php // Do not copy this line, start with line 3
FLBuilder::register_module( 'MyModuleClass', array() );
<?php // Do not copy this line, start with line 3
FLBuilder::register_module( 'MyModuleClass', array(
'my-tab-1' => array(
'title' => __( 'Tab 1', 'fl-builder' ),
),
'my-tab-2' => array(
'title' => __( 'Tab 2', 'fl-builder' ),
),
) );
<?php // Do not copy this line, start with line 3
FLBuilder::register_module( 'MyModuleClass', array(
'my-tab-1' => array(
'title' => __( 'Tab 1', 'fl-builder' ),
'sections' => array(
'my-section-1' => array(
'title' => __( 'Section 1', 'fl-builder' ),
),
'my-section-2' => array(
'title' => __( 'Section 2', 'fl-builder' ),
)
)
)
) );
<?php // Do not copy this line, start with line 3
FLBuilder::register_module( 'MyModuleClass', array(
'my-tab-1' => array(
'title' => __( 'Tab 1', 'fl-builder' ),
'sections' => array(
'my-section-1' => array(
'title' => __( 'Section 1', 'fl-builder' ),
'fields' => array(
'my-field-1' => array(
'type' => 'text',
'label' => __( 'Text Field 1', 'fl-builder' ),
),
'my-field-2' => array(
'type' => 'text',
'label' => __( 'Text Field 2', 'fl-builder' ),
)
)
)
)
)
) );
<div class="fl-example-text">
<?php echo $settings->textarea_field; ?>
<?php $module->example_method(); ?>
</div>
<?php // Do not copy this line, start with line 3
.fl-node-<?php echo $id; ?> {
background-color: #'<?php echo $settings->bg_color; ?>';
}
console.log('Module ID: <?php echo $id; ?>');
console.log('Text: <?php echo $settings->text_field; ?>');
<?php // Do not copy this line, start with line 3
// Already registered by Beaver Builder.
$this->add_css( 'font-awesome' );
// Register and enqueue your own.
$this->add_css( 'example-lib', $this->url . 'css/example-lib.css' );
<?php // Do not copy this line, start with line 3
// Already registered by Beaver Builder.
$this->add_js( 'jquery-bxslider' );
// Register and enqueue your own.
$this->add_js( 'example-lib', $this->url . 'js/example-lib.js', array(), '', true );
<?php // Do not copy this line, start with line 3
public function remove() {
if( !empty( $this->settings->photo_path ) )
unlink( $this->settings->photo_path );
}
<?php // Do not copy this line, start with line 3
public function delete() {
if( !empty( $this->settings->photo_path ) )
unlink( $this->settings->photo_path );
}
<?php // Do not copy this line, start with line 3
public function enqueue_scripts()
{
if ( $this->settings && $this->settings->link_type == 'lightbox' ) {
$this->add_js( 'jquery-magnificpopup' );
$this->add_css( 'jquery-magnificpopup' );
}
}
<?php // Do not copy this line, start with line 3
public function update( $settings ) {
if( empty( $settings->my_field ) )
$settings->my_field = 'Default Text';
return $settings;
}
<?php // Do not copy this line, start with line 3
'my_code_field' => array(
'type' => 'code',
'editor' => 'html',
'rows' => '18'
),
<?php // Do not copy this line, start with line 3
'my_color_field' => array(
'type' => 'color',
'label' => __( 'Color Picker', 'fl-builder' ),
'default' => '333333',
'show_reset' => true,
'show_alpha' => true
),
<?php // Do not copy this line, start with line 3
$settings->margin_top
$settings->margin_right
$settings->margin_bottom
$settings->margin_left
<?php // Do not copy this line, start with line 3
'margin' => array(
'type' => 'dimension',
'label' => 'Margins',
'description' => 'px',
),
<?php // Do not copy this line, start with line 3
'my_editor_field' => array(
'type' => 'editor',
'media_buttons' => true,
'wpautop' => true
),
<?php // Do not copy this line, start with line 3
global $wp_embed;
echo wpautop( $wp_embed->autoembed( $settings->text ) );
<?php // Do not copy this line, start with line 3
Array
(
[family] => Helvetica
[weight] => 300
)
<?php // Do not copy this line, start with line 3
'my_font_field' => array(
'type' => 'font',
'label' => __( 'Font', 'fl-builder' ),
'default' => array(
'family' => 'Helvetica',
'weight' => 300
)
),
<?php // Do not copy this line, start with line 3
FLBuilder::register_settings_form('my_form_field', array(
'title' => __('My Form Field', 'fl-builder'),
'tabs' => array(
'general' => array(
'title' => __('General', 'fl-builder'),
'sections' => array(
'general' => array(
'title' => '',
'fields' => array(
'label' => array(
'type' => 'text',
'label' => __('Label', 'fl-builder')
)
)
),
)
)
)
));
<?php // Do not copy this line, start with line 3
'my_form_field' => array(
'type' => 'form',
'label' => __('My Form', 'fl-builder'),
'form' => 'my_form_field', // ID of a registered form.
'preview_text' => 'label', // ID of a field to use for the preview text.
)
<?php // Do not copy this line, start with line 3
'my_icon_field' => array(
'type' => 'icon',
'label' => __( 'Icon Field', 'fl-builder' ),
'show_remove' => true
),
<?php // Do not copy this line, start with line 3
'my_loop_settings' => array(
'title' => __( 'Loop Settings', 'fl-builder' ),
'file' => FL_BUILDER_DIR . 'includes/loop-settings.php',
)
<?php // Do not copy this line, start with line 3
$query = FLBuilderLoop::query( $settings );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
}
}
wp_reset_postdata();
<?php // Do not copy this line, start with line 3
if ( $query->have_posts() ) {
FLBuilderLoop::pagination( $query );
}
<?php // Do not copy this line, start with line 3
'my_multiple_audios_field' => array(
'type' => 'multiple-audios',
'label' => __( 'Multiple Audios Field', 'fl-builder' )
),
<?php // Do not copy this line, start with line 3
'my_multiple_photos_field' => array(
'type' => 'multiple-photos',
'label' => __( 'Multiple Photos Field', 'fl-builder' )
),
<?php // Do not copy this line, start with line 3
'my_photo_field' => array(
'type' => 'photo',
'label' => __('Photo Field', 'fl-builder'),
'show_remove' => false,
),
<?php // Do not copy this line, start with line 3
'my_photo_sizes_field' => array(
'type' => 'photo-sizes',
'label' => __('Photo Sizes Field', 'fl-builder'),
'default' => 'medium'
),
<?php // Do not copy this line, start with line 3
'my_post_type_field' => array(
'type' => 'post-type',
'label' => __('Post Type', 'fl-builder'),
'default' => 'post'
),
<?php // Do not copy this line, start with line 3
'my_select_field' => array(
'type' => 'select',
'label' => __( 'Select Field', 'fl-builder' ),
'default' => 'option-1',
'options' => array(
'option-1' => __( 'Option 1', 'fl-builder' ),
'option-2' => __( 'Option 2', 'fl-builder' )
),
'toggle' => array(
'option-1' => array(
'fields' => array( 'my_field_1', 'my_field_2' ),
'sections' => array( 'my_section' ),
'tabs' => array( 'my_tab' )
),
'option-2' => array()
)
),
<?php // Do not copy this line, start with line 3
'my_multi_select_field' => array(
'type' => 'select',
'label' => __( 'Multi Select Field', 'fl-builder' ),
'default' => 'option-1',
'options' => array(
'option-1' => __( 'Option 1', 'fl-builder' ),
'option-2' => __( 'Option 2', 'fl-builder' )
),
'multi-select' => true
),
<?php // Do not copy this line, start with line 3
'service' => array(
'title' => __( 'Service Settings', 'fl-builder' ),
'file' => FL_BUILDER_DIR . 'includes/service-settings.php',
'services' => 'autoresponder'
),
<?php // Do not copy this line, start with line 3
// Subscribe to an autoresponder service.
$instance = FLBuilderServices::get_service_instance( $settings->service );
$response = $instance->subscribe( $settings, $email, $name );
<?php // Do not copy this line, start with line 3
$instance = FLBuilderServices::get_service_instance( $settings->service );
$account_data = $instance->get_account_data( $settings->service_account );
<?php // Do not copy this line, start with line 3
// Search all pages.
'my_suggest_field' => array(
'type' => 'suggest',
'label' => __( 'Suggest Field', 'fl-builder' ),
'action' => 'fl_as_posts', // Search posts.
'data' => 'page', // Slug of the post type to search.
'limit' => 3, // Limits the number of selections that can be made.
),
<?php // Do not copy this line, start with line 3
'my_text_field' => array(
'type' => 'text',
'label' => __( 'Text Field', 'fl-builder' ),
'default' => '',
'maxlength' => '2',
'size' => '3',
'placeholder' => __( 'Placeholder text', 'fl-builder' ),
'class' => 'my-css-class',
'description' => __( 'Text displayed after the field', 'fl-builder' ),
'help' => __( 'Text displayed in the help tooltip', 'fl-builder' )
),
<?php // Do not copy this line, start with line 3
'my_textarea_field' => array(
'type' => 'textarea',
'label' => __( 'Textarea Field', 'fl-builder' ),
'default' => '',
'placeholder' => __( 'Placeholder Text', 'fl-builder' ),
'maxlength' => '255'
'rows' => '6'
),
<?php // Do not copy this line, start with line 3
'my_time_field' => array(
'type' => 'time',
'label' => __( 'Time', 'fl-builder' ),
'default' =>array(
'hours' => '01',
'minutes' => '00',
'day_period' => 'am'
)
),
<?php // Do not copy this line, start with line 3
$settings->my_time_field['hour'];
$settings->my_time_field['minutes'];
$settings->my_time_field['day_period'];
<?php // Do not copy this line, start with line 3
'my_timezone_field' => array(
'type' => 'timezone',
'label' => __( 'Time Zone', 'fl-builder' ),
'default' => 'UTC',
),
<?php // Do not copy this line, start with line 3
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
),
<?php // Do not copy this line, start with line 3
'my_video_field' => array(
'type' => 'video',
'label' => __( 'Video Field', 'fl-builder' )
),
<?php // Do not copy this line, start with line 3
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
'placeholder' => 24,
'responsive' => true,
),
<?php // Do not copy this line, start with line 3
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
'responsive' => array(
'placeholder' => array(
'default' => 36,
'medium' => 24,
'responsive' => 16,
),
),
),
<?php // Do not copy this line, start with line 3
'my_text_field' => array(
'type' => 'text',
'label' => __( 'My Text Field', 'fl-builder' ),
'multiple' => true,
),
<?php // Do not copy this line, start with line 3
function sanitize_number( $value ) {
return absint( $value );
}
<?php // Do not copy this line, start with line 3
'font_size' => array(
'type' => 'unit',
'label' => 'Font Size',
'description' => 'px',
'sanitize' => 'sanitize_number',
),
<input type="text" name="{{data.name}}" value="{{data.value}}" />
<?php // Do not copy this line, start with line 3
function my_custom_builder_fields( $fields ) {
$fields['my-field'] = '/path/to/my/fields/my-field.php';
$fields['my-other-field'] = '/path/to/my/fields/my-other-field.php';
return $fields;
}
add_filter( 'fl_builder_custom_fields', 'my_custom_builder_fields' );
<?php // Do not copy this line, start with line 3
'example_custom_field' => array(
'type' => 'my-field',
'label' => 'My Field',
'default' => '',
'foo' => 'bar'
),
<?php // Do not copy this line, start with line 3
function fl_my_custom_field_assets() {
if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
wp_enqueue_style( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/css/fields.css', array(), '' );
wp_enqueue_script( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/js/fields.js', array(), '', true );
}
}
add_action( 'wp_enqueue_scripts', 'fl_my_custom_field_assets' );
<?php // Do not copy this line, start with line 3
function fl_my_custom_field($name, $value, $field, $settings) {
echo '<input type="text" class="text text-full" name="' . $name . '" value="' . $value . '" />';
}
<?php // Do not copy this line, start with line 3
add_action('fl_builder_control_my-custom-field', 'fl_my_custom_field', 1, 4);
<?php // Do not copy this line, start with line 3
'example_custom_field' => array(
'type' => 'my-custom-field',
'label' => __( 'Example Custom Field', 'fl-builder' ),
'default' => '',
'foo' => 'bar'
),
<?php // Do not copy this line, start with line 3
function fl_my_custom_field_assets() {
if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
wp_enqueue_style( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/css/fields.css', array(), '' );
wp_enqueue_script( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/js/fields.js', array(), '', true );
}
}
add_action( 'wp_enqueue_scripts', 'fl_my_custom_field_assets' );
<?php // Do not copy this line, start with line 3
'my_text' => array(
'type' => 'text',
'label' => __('My Text', 'fl-builder'),
'preview' => array(
'type' => 'text',
'selector' => '.fl-example-text'
)
),
<?php // Do not copy this line, start with line 3
'my_font_size' => array(
'type' => 'text',
'label' => __('My Font Size', 'fl-builder'),
'description' => 'px',
'preview' => array(
'type' => 'css',
'selector' => '.fl-example-text',
'property' => 'font-size',
'unit' => 'px'
)
),
<?php // Do not copy this line, start with line 3
'my_color' => array(
'type' => 'color',
'label' => __('My Color', 'fl-builder'),
'preview' => array(
'type' => 'css',
'rules' => array(
array(
'selector' => '.selector-1',
'property' => 'color'
),
array(
'selector' => '.selector-2',
'property' => 'background-color'
),
)
)
),
<?php // Do not copy this line, start with line 3
'my_color' => array(
'type' => 'color',
'label' => __('My Color', 'fl-builder'),
'preview' => array(
'type' => 'css',
'selector' => '.fl-example-text',
'property' => 'color'
)
),
<?php // Do not copy this line, start with line 3
'my_select' => array(
'type' => 'select',
'label' => __('My Select', 'fl-builder'),
'default' => 'option-2',
'options' => array(
'option-1' => __('Option 1', 'fl-builder'),
'option-2' => __('Option 2', 'fl-builder')
),
'preview' => array(
'type' => 'none'
)
),
$( '.fl-builder-content' ).on( 'fl-builder.layout-rendered', myCallbackFunction );
$( '.fl-builder-content' ).on( 'fl-builder.preview-rendered', myCallbackFunction );
$( '.my-module-class' ).each( function(){
// Do something to each module on the page.
} );
$( '.fl-node-<?php echo $id; ?>' ).css( 'background', '#ffffff' );
(function($) {
$(function() {
new FLBuilderAccordion({
id: '<?php echo $id ?>'
});
});
})(jQuery);
(function($) {
FLBuilderAccordion = function( settings ) {
this.settings = settings;
this.nodeClass = '.fl-node-' + settings.id;
this._init();
};
FLBuilderAccordion.prototype = {
_init: function() {
$( this.nodeClass + ' .fl-accordion-button' ).click( $.proxy( this._buttonClick, this ) );
},
_buttonClick: function( e ) {
...
},
_slideUpComplete: function() {
...
},
_slideDownComplete: function() {
...
}
};
})(jQuery);
<?php // Do not copy this line, start with line 3
class MyModuleClass extends FLBuilderModule {
public function __construct()
{
parent::__construct(array(
'partial_refresh' => true // Set this to true to enable partial refresh.
));
}
}
@lemehovskaya

This comment has been minimized.

Copy link

@lemehovskaya lemehovskaya commented Feb 27, 2019

Help me please. My question about example 53-repeater-field-example.php. What should I write in frontend.php if I need repeat some images?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment