beaverbuilder/01-create-a-plugin.php Secret

## 01-create-a-plugin.php
<?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' );

## 02-page-builder-2.php
<?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.
        ));
    }
}

## 04-module-class-include.php
<?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';
    }
}

## 05-define-settings.php
<?php // Do not copy this line, start with line 3

FLBuilder::register_module( 'MyModuleClass', array() );

## 06-example-1.php
<?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' ),
    ),
) );

## 07-example-2.php
<?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' ),
            )
        )
    )
) );

## 08-example-3.php
<?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' ),
                    )
                )
            )
        )
    )
) );

## 09-module-html-example.html
<div class="fl-example-text">
    <?php echo $settings->textarea_field; ?>
    <?php $module->example_method(); ?>
</div>

## 10-module-css-example.php
<?php // Do not copy this line, start with line 3

.fl-node-<?php echo $id; ?> {
    background-color: #'<?php echo $settings->bg_color; ?>';
}

## 11-module-javascript-example.js
console.log('Module ID: <?php echo $id; ?>');
console.log('Text: <?php echo $settings->text_field; ?>');

## 12-module-method-reference-example-1.php
<?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' );

## 13-module-method-reference-example-2.php
<?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 );

## 14-module-method-reference-example-3.php
<?php // Do not copy this line, start with line 3

public function remove() {
    if( !empty( $this->settings->photo_path ) )
        unlink( $this->settings->photo_path );
}

## 15-module-method-reference-example-4.php
<?php // Do not copy this line, start with line 3

public function delete() {
    if( !empty( $this->settings->photo_path ) )
        unlink( $this->settings->photo_path );
}

## 16-module-method-reference-example-5.php
<?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' );
    }
}

## 17-module-method-reference-example-6.php
<?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;
}

## 18-code-field-example-1.php
<?php // Do not copy this line, start with line 3

'my_code_field' => array(
    'type'          => 'code',
    'editor'        => 'html',
    'rows'          => '18'
),

## 19-code-field-example-2.php
<?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
),

## 20-dimension-field-example-1.php
<?php // Do not copy this line, start with line 3

$settings->margin_top
$settings->margin_right
$settings->margin_bottom
$settings->margin_left

## 21-dimension-field-example-2.php
<?php // Do not copy this line, start with line 3

'margin' => array(
	'type'        => 'dimension',
	'label'       => 'Margins',
	'description' => 'px',
),

## 22-editor-field-example.php
<?php // Do not copy this line, start with line 3

'my_editor_field' => array(
    'type'          => 'editor',
    'media_buttons' => true,
    'wpautop'       => true
),

## 23-editor-field-oembed.php
<?php // Do not copy this line, start with line 3

global $wp_embed;
echo wpautop( $wp_embed->autoembed( $settings->text ) );

## 24-font-field-example-1.php
<?php // Do not copy this line, start with line 3

Array
(
    [family] => Helvetica
    [weight] => 300
)

## 25-font-field-example-2.php
<?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
    )
),

## 26-form-field-example-1.php
<?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')
                        )
                    )
                ),
            )
        )
    )
));

## 27-form-field-example-2.php
<?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.
)

## 28-icon-field-example.php
<?php // Do not copy this line, start with line 3

'my_icon_field' => array(
    'type'          => 'icon',
    'label'         => __( 'Icon Field', 'fl-builder' ),
    'show_remove'   => true
),

## 29-link-field-example.php
<?php // Do not copy this line, start with line 3

'my_link_field' => array(
    'type'          => 'link',
    'label'         => __('Link Field', 'fl-builder')
),

## 30-loop-field-example-1.php
<?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',
)

## 31-loop-field-example-2.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();

## 32-loop-field-example-3.php
<?php // Do not copy this line, start with line 3

if ( $query->have_posts() ) {
    FLBuilderLoop::pagination( $query );
}

## 33-multiple-audio-field-example.php
<?php // Do not copy this line, start with line 3

'my_multiple_audios_field' => array(
    'type'          => 'multiple-audios',
    'label'         => __( 'Multiple Audios Field', 'fl-builder' )
),

## 34-multiple-audio-field-example.php
<?php // Do not copy this line, start with line 3

'my_multiple_photos_field' => array(
    'type'          => 'multiple-photos',
    'label'         => __( 'Multiple Photos Field', 'fl-builder' )
),

## 35-photo-field-example.php
<?php // Do not copy this line, start with line 3

'my_photo_field' => array(
    'type'          => 'photo',
    'label'         => __('Photo Field', 'fl-builder'),
    'show_remove'   => false,
),

## 36-photo-field-size-example.php
<?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'
),

## 37-photo-field-type-example.php
<?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'
),

## 38-select-field-example-1.php
<?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()
    )
),

## 39-select-field-example-2.php
<?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
),

## 40-service-field-example-1.php
<?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'
),

## 41-service-field-example-2.php
<?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 );

## 42-service-field-example-3.php
<?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 );

## 43-suggest-field-example.php
<?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.
),

## 44-text-field-example.php
<?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' )
),

## 45-textarea-field-example.php
<?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'
),

## 46-time-field-example-1.php
<?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'
	)
),

## 47-time-field-example-2.php
<?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'];

## 48-timezone-field-example.php
<?php // Do not copy this line, start with line 3

'my_timezone_field' => array(
	'type'          => 'timezone',
	'label'         => __( 'Time Zone', 'fl-builder' ),
	'default'	=> 'UTC',
),

## 49-unit-field-example.php
<?php // Do not copy this line, start with line 3

'font_size' => array(
	'type'        => 'unit',
	'label'       => 'Font Size',
	'description' => 'px',
),

## 50-video-field-example.php
<?php // Do not copy this line, start with line 3

'my_video_field' => array(
    'type'          => 'video',
    'label'         => __( 'Video Field', 'fl-builder' )
),

## 51-responsive-field-example-1.php
<?php // Do not copy this line, start with line 3

'font_size' => array(
	'type'        => 'unit',
	'label'       => 'Font Size',
	'description' => 'px',
	'placeholder' => 24,
	'responsive'  => true,
),

## 52-responsive-field-example-2.php
<?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,
		),
	),
),

## 53-repeater-field-example.php
<?php // Do not copy this line, start with line 3

'my_text_field' => array(
    'type'          => 'text',
    'label'         => __( 'My Text Field', 'fl-builder' ),
    'multiple'      => true,
),

## 54-sanitize-field-example-1.php
<?php // Do not copy this line, start with line 3

function sanitize_number( $value ) {
	return absint( $value );
}

## 55-sanitize-field-example-2.php
<?php // Do not copy this line, start with line 3

'font_size' => array(
	'type'          => 'unit',
	'label'         => 'Font Size',
	'description'   => 'px',
	'sanitize'	=> 'sanitize_number',
),

## 56-create-custom-field.html
<input type="text" name="{{data.name}}" value="{{data.value}}" />

## 57-register-custom-field-example-1.php
<?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' );

## 58-register-field-example-2.php
<?php // Do not copy this line, start with line 3

'example_custom_field' => array(
    'type'          => 'my-field',
    'label'         => 'My Field',
    'default'       => '',
    'foo'           => 'bar'
),

## 59-register-custom-field-assets-bb-2.php
<?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' );

## 60-register-custom-field-assets-bb-1.php
<?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 . '" />';
}

## 61-render-function-bb-1-example-1.php
<?php // Do not copy this line, start with line 3

add_action('fl_builder_control_my-custom-field', 'fl_my_custom_field', 1, 4);

## 62-rednder-function-bb-1-example-2.php
<?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'
),

## 63-enqueue-custom-field-assets-bb-1.php
<?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' );

## 64-text-preview-example.php
<?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'
    )
),

## 65-css-preview-example-1.php
<?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'
    )
),

## 66-css-preview-example-2.php
<?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'
            ),
        )
    )
),

## 67-css-color-preview.php
<?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'
    )
),

## 68-preview-none.php
<?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'
    )
),

## 69-javascript-events-example-1.js
$( '.fl-builder-content' ).on( 'fl-builder.layout-rendered', myCallbackFunction );

## 70-javascript-events-example-2.js
$( '.fl-builder-content' ).on( 'fl-builder.preview-rendered', myCallbackFunction );

## 71-partial-refresh-example-1.js
$( '.my-module-class' ).each( function(){
	// Do something to each module on the page.
} );

## 72-partial-refresh-example-2.js
$( '.fl-node-<?php echo $id; ?>' ).css( 'background', '#ffffff' );

## 73-partial-refresh-example-3.js
(function($) {
	$(function() {
		new FLBuilderAccordion({
			id: '<?php echo $id ?>'
		});
	});
})(jQuery);

## 74--partial-refresh-example-4.js
(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);

## 75-enable-partial-refresh.php
<?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.
        ));
    }
}
	<?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

	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' ),
	),
	) );
	<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 );
	}