Adding button with custom settings form at BB title bar
In this article I am showing how you will add custom button(s) and own settings form on page builder (Beaver Builder plugin) title bat. Multiple purposes you can use this idea like you will create a separate theme settings page for your site. So you can do this in page builder and add/edit the data quickly from there. It will give the nice and you can save the data with few clicks.
Note: This tutorial is not compatible with Beaver Builder 2.0 or later version. Because they updated their backend coding structure (I shall write another one when stable version of BB 2.0 will be released). Current tutorial will work on all themes which are supporting the Beaver Builder plugin.
Here is a quick video explaining what I am saying.
Ok… Part by part I am explaining the full codes of the class-add-button-bb-bar.php class file. Later I shall share full code with complete instruction. So you can easily integrate it with your theme.
Adding Button
Adding a custom button at page builder title bar. There have a filter fl_builder_ui_bar_buttons in core files of BB plugin. So you can add multiple buttons as per your requirement without editing the core plugin. Filter is accepting the array variable.
Adding new button
/**
* Adding button at title bar
*/
static public function probb_add_buttons()
{
add_filter( 'fl_builder_ui_bar_buttons', __CLASS__ . '::probb_ui_bar_buttons' );
}
static public function probb_ui_bar_buttons( $buttons )
{
$simple_ui = ! FLBuilderUserAccess::current_user_can( 'unrestricted_editing' );
/**
* 'custom-btn' is the my button id . It is using at lot of places for some actions.
* You will update this button id at all places with your own button id
*/
$buttons['custom-btn'] = array(
'label' => __('Button Title', 'text_domain'), //* Button Title
'show' => ! $simple_ui
);
//* Returning the variable
return $buttons;
}
Registering Own Settings Form
register_settings_form method of FLBuilder class is registering the own form with fields. This method is accepting the two variables: string (form id) and array (form fields). Loading the settings with init hook. Keep in mind that form id (here customform) is using in the AJAX and JS scripts for add/edit action. So you will replace it carefully in your code.
Loading the settings form
add_action( 'init', __CLASS__ . '::probb_load_settings_form' );
/**
* Registering the custom settings form
*/
static public function probb_load_settings_form()
{
FLBuilder::register_settings_form('customform', array( //* "customform" is the settings form id. It is using in PHP and JS snippets
'title' => __( 'Custom Settings', 'theme-prefix' ), //* form title
'tabs' => array( //* creating tab(s)
'general' => array( //* tab slug
'title' => __( 'General', 'theme-prefix' ), //* Tab title
'sections' => array(
//* no section...just fields
'no_section' => array( //* section slug
'title' => __('', 'theme-prefix'),
'fields' => array(
/**
* creating the fields.
* All field types are listed here https://www.wpbeaverbuilder.com/custom-module-documentation/#setting-fields-ref
*/
'code_field' => array( //* field slug
'label' => __('Code Field', 'theme-prefix'),
'type' => 'code',
'editor' => 'html',
'rows' => '8'
)
)
),
//* Creating 1st section
'sec_1' => array( //* 1st section slug
'title' => __( 'Section 1', 'theme-prefix' ),
'fields' => array(
'text_field' => array( //* field slug here
'label' => __('Text Field', 'theme-prefix'), //* field title/label
'type' => 'text',
'placeholder' => 'start typing...',
'connections' => array('custom_field') //* This is for beaver themer add-on
),
'ta_field' => array( //* field slug here
'label' => __('Textarea Field', 'theme-prefix'), //* field title/label
'type' => 'textarea',
'rows' => 5,
'connections' => array('string') //* This is for beaver themer add-on
)
)
),
//* Creating 2nd section
'sec_2' => array( //* 2nd section slug
'title' => __( 'Section 2', 'theme-prefix' ),
'fields' => array(
'color_field' => array(
'label' => __( 'Color Field', 'theme-prefix' ),
'type' => 'color',
'default' => 'efefef',
'show_reset' => true,
'connections' => array( 'color' )
),
'photo_field' => array(
'label' => __( 'Photo Field', 'theme-prefix' ),
'type' => 'photo',
'connections' => array( 'photo' )
)
)
)
),
),
//* Creating 2nd tab
'another_tab' => array(
'title' => __( 'Another Tab', 'theme-prefix' ),
'descriptions' => __( 'It is just a another tab', 'theme-prefix' ),
'sections' => array(
'sec_3' => array(
'title' => __( 'Section 3', 'theme-prefix' ),
'fields' => array(
)
)
)
)
//* if you want then you can add more tabs here...
)
));
}
Rendering the Settings form
Rendering the settings form at frontend with Builder AJAX method. When you will click on the button, form will load via AJAX. add_action method of FLBuilderAjax class is registering the all callable AJAX action.
Rendering the markup for settings form
/**
* Runs AJAX action
* Select the priority between 1 and 9
*/
add_action( 'wp', __CLASS__ . '::probb_add_ajax_actions', 9 );
/**
* Adds all callable AJAX actions.
*/
static public function probb_add_ajax_actions()
{
//* Render the custom settings form
FLBuilderAjax::add_action( 'render_customform_settings', 'AddButtonBBBar::render_customform_settings' );
}
/**
* Renders the markup for the custom settings form.
*/
static public function render_customform_settings() {
$settings = self::get_customform_settings();
$form = FLBuilderModel::$settings_forms['customform']; //* form id is using here
return FLBuilder::render_settings(array(
'class' => 'fl-builder-customform-settings', //* form id is using here
'title' => $form['title'],
'tabs' => $form['tabs'],
'resizable' => true,
), $settings);
}
Saving the Form Data
Another AJAX method is performing for saving the data. All data are saving into _fl_builder_customform_settings option key as an object in options database table.
Saving the data
/**
* Runs AJAX action
* Select the priority between 1 and 9
*/
add_action( 'wp', __CLASS__ . '::probb_add_ajax_actions', 9 );
/**
* Adds all callable AJAX actions.
*/
static public function probb_add_ajax_actions()
{
//* Saves the custom settings form
FLBuilderAjax::add_action( 'save_customform_settings', 'AddButtonBBBar::save_customform_settings', array( 'settings' ) );
}
/**
* Save the custom settings form data.
*/
static public function save_customform_settings( $settings = array() ) {
$old_settings = self::get_customform_settings();
$new_settings = (object) array_merge( (array) $old_settings, (array) $settings );
self::$customform_settings = null;
update_option( '_fl_builder_customform_settings', $new_settings );
return self::get_customform_settings();
}
Full Instructions: How do you integrate it with your theme
Create an new file “class-add-button-bb-bar.php” and put into classes folder (you will create this folder if you have not yet). Here is the complete code of this file
Class AddButtonBBBar
__( 'Custom Settings', 'theme-prefix' ), //* form title
'tabs' => array( //* creating tab(s)
'general' => array( //* tab slug
'title' => __( 'General', 'theme-prefix' ), //* Tab title
'sections' => array(
//* no section...just fields
'no_section' => array( //* section slug
'title' => __('', 'theme-prefix'),
'fields' => array(
/**
* creating the fields.
* All field types are listed here https://www.wpbeaverbuilder.com/custom-module-documentation/#setting-fields-ref
*/
'code_field' => array( //* field slug
'label' => __('Code Field', 'theme-prefix'),
'type' => 'code',
'editor' => 'html',
'rows' => '8'
)
)
),
//* Creating 1st section
'sec_1' => array( //* 1st section slug
'title' => __( 'Section 1', 'theme-prefix' ),
'fields' => array(
'text_field' => array( //* field slug here
'label' => __('Text Field', 'theme-prefix'), //* field title/label
'type' => 'text',
'placeholder' => 'start typing...',
'connections' => array('custom_field') //* This is for beaver themer add-on
),
'ta_field' => array( //* field slug here
'label' => __('Textarea Field', 'theme-prefix'), //* field title/label
'type' => 'textarea',
'rows' => 5,
'connections' => array('string') //* This is for beaver themer add-on
)
)
),
//* Creating 2nd section
'sec_2' => array( //* 2nd section slug
'title' => __( 'Section 2', 'theme-prefix' ),
'fields' => array(
'color_field' => array(
'label' => __( 'Color Field', 'theme-prefix' ),
'type' => 'color',
'default' => 'efefef',
'show_reset' => true,
'connections' => array( 'color' )
),
'photo_field' => array(
'label' => __( 'Photo Field', 'theme-prefix' ),
'type' => 'photo',
'connections' => array( 'photo' )
)
)
)
),
),
//* Creating 2nd tab
'another_tab' => array(
'title' => __( 'Another Tab', 'theme-prefix' ),
'descriptions' => __( 'It is just a another tab', 'theme-prefix' ),
'sections' => array(
'sec_3' => array(
'title' => __( 'Section 3', 'theme-prefix' ),
'fields' => array(
)
)
)
)
//* if you want then you can add more tabs here...
)
));
}
/**
* Renders the markup for the custom settings form.
*/
static public function render_customform_settings() {
$settings = self::get_customform_settings();
$form = FLBuilderModel::$settings_forms['customform'];
return FLBuilder::render_settings(array(
'class' => 'fl-builder-customform-settings',
'title' => $form['title'],
'tabs' => $form['tabs'],
'resizable' => true,
), $settings);
}
/**
* Save the custom settings form data.
*/
static public function save_customform_settings( $settings = array() ) {
$old_settings = self::get_customform_settings();
$new_settings = (object) array_merge( (array) $old_settings, (array) $settings );
self::$customform_settings = null;
update_option( '_fl_builder_customform_settings', $new_settings );
return self::get_customform_settings();
}
/**
* Get the custom form settings.
*/
static public function get_customform_settings()
{
if ( null === self::$customform_settings ) {
$settings = get_option( '_fl_builder_customform_settings' ); //* data was saving in wp-options table with _fl_builder_customform_settings key
$defaults = FLBuilderModel::get_settings_form_defaults( 'customform' );
if ( ! $settings ) {
$settings = new StdClass();
}
// Merge in defaults and cache settings
self::$customform_settings = (object) array_merge( (array) $defaults, (array) $settings );
self::$customform_settings = FLBuilderModel::merge_nested_form_defaults( 'general', 'customform', self::$customform_settings );
}
return self::$customform_settings;
}
/**
* Adding button at title bar
*/
static public function probb_add_buttons()
{
add_filter( 'fl_builder_ui_bar_buttons', __CLASS__ . '::probb_ui_bar_buttons' );
}
static public function probb_ui_bar_buttons( $buttons )
{
$simple_ui = ! FLBuilderUserAccess::current_user_can( 'unrestricted_editing' );
/**
* 'custom-btn' is the my button id . It is using at lot of places for some actions.
* You will update this button id at all places with your own button id
*/
$buttons['custom-btn'] = array(
'label' => __('Button Title', 'theme-prefix'), //* Button Title
'show' => ! $simple_ui
);
//* Returning the variable
return $buttons;
}
/**
* Enqueue the style and scripts file
*/
static public function probb_enqueue_scripts()
{
if ( FLBuilderModel::is_builder_active() )
{
wp_enqueue_script( 'button-action', get_stylesheet_directory_uri() . '/js/button-action.js', array(), time() );
}
}
}
AddButtonBBBar::init();
Creating JS File
Creating new JS file “button-action.js” and put into js folder. This file is performing the add, edit and render action.
button-action.js
(function($){
ButtonAction = {
init: function()
{
ButtonAction._bindEvents();
},
_cbuttonSettingsClicked: function()
{
FLBuilder._actionsLightbox.close();
FLBuilder._showLightbox();
FLBuilder.ajax({
action: 'render_customform_settings'
}, ButtonAction._coustomformlSettingsLoaded);
},
_coustomformlSettingsLoaded: function(response)
{
var data = JSON.parse(response);
FLBuilder._setSettingsFormContent(data.html);
FLBuilder._layoutSettingsInitCSS();
FLBuilder._initSettingsValidation({
row_width: {
required: true,
number: true
},
responsive_breakpoint: {
required: true,
number: true
},
medium_breakpoint: {
required: true,
number: true
}
});
},
_saveCustomFormSettingsClicked: function()
{
var form = $(this).closest('.fl-builder-settings'),
valid = form.validate().form(),
settings = FLBuilder._getSettings( form );
if(valid) {
FLBuilder.showAjaxLoader();
FLBuilder._layoutSettingsCSSCache = null;
FLBuilder.ajax({
action: 'save_customform_settings',
settings: settings
}, FLBuilder._saveCustomFormSettingsComplete);
FLBuilder._lightbox.close();
}
},
_saveCustomFormSettingsComplete: function( response )
{
FLBuilderConfig.customform = JSON.parse( response );
FLBuilder._updateLayout();
},
_bindEvents: function()
{
//* Here add the custom-btn slug for action
$('.fl-builder-custom-btn-button').on('click', ButtonAction._cbuttonSettingsClicked);
//* Here custom settings form slug using for action
$('body').delegate('.fl-builder-customform-settings .fl-builder-settings-save', 'click', ButtonAction._saveCustomFormSettingsClicked);
$('body').delegate('.fl-builder-customform-settings .fl-builder-settings-cancel', 'click', FLBuilder._cancelLayoutSettingsClicked);
}
}
$(function(){
ButtonAction.init();
});
})(jQuery);
Editing the functions.php file
Open the functions.php file of your theme and this small PHP snippets there.
Include the file
if( class_exists('FLBuilder') ) {
require_once 'classes/class-add-button-bb-bar.php';
}
Now launch the page builder and you will get the new button at title bar. If you have any questions, you can ask via comment form.
Posted in Beaver Builder