Adding button with custom settings form at BB title bar

Custom Button 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 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.

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.

/**
 * 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.

/**
 * 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

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.

Login

1 Comment

  1. BB_bb on June 13, 2018 at 9:53 pm

    Any plans to update this article for BB V2? It would help me a ton!

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares