Adding extra tab to beaver builder module settings form

FB Post

Someone submitted above post at Beaver Builder group. I got it with small PHP snippets. In this article I am sharing it.

Beaver Builder plugin have fl_builder_register_settings_form filter. You can customize the settings form of all modules or specific module(s) with this filter. Below checkout the two methods.

Adding Custom Tab to Individual Module

With this snippet you can add the custom tab into specific module’s settings form. Here I am targeted the “Accordion” module. You will change “accordion” with your module slug. Open the functions.php of your active theme and add it there.

add_filter( 'fl_builder_register_settings_form', 'probb_add_custom_tab_accordion_modules', 1010, 2 );
function probb_add_custom_tab_accordion_modules( $form, $slug )
{
	if( $slug === 'accordion' ) //* "accordion" is the Accordion module slug/id
	{
		$form['my-custom-tab'] = array( //* my-custom-tab is the custom tab slug
			'title' => __( 'My Custom Tab', 'fl-automator' ), //* Tab title
			'sections' => array( //* creating sections
				'sec-1' => array( //* "sec-1" is the slug
					'title' => __( 'Section 1', 'fl-automator' ), //* Section title.
					'fields' => array ( //* creating the fields under sec-1 section
						'field-1' => array( //* field-1 is the field name
							'type' 	=> 'text', //* Field type. It can be text, select, textarea, icon, font etc
							'label' => __( 'Field 1', 'fl-automator' ) //* Field title
						),

						'field-2' => array( //* field-2 is the field name
							'type' 		=> 'select', //* Drop down field
							'label' 	=> __( 'Field 2', 'fl-automator' ), //* Field title
							'options' 	=> array(
								'val-1' 	=> __( 'Option 1', 'fl-automator' ),
								'val-2' 	=> __( 'Option 2', 'fl-automator' ),
								'val-3' 	=> __( 'Option 3', 'fl-automator' ),
							)
						),
					)
				), //* section 1 is end here

				'sec-2' => array( //* "sec-2" is the slug
					'title' => __( 'Section 2', 'fl-automator' ), //* Section title.
					'fields' => array ( //* creating the fields under sec-1 section
						'field-3' => array( //* field-3 is the field name
							'type' 	=> 'text', //* Field type. It can be text, select, textarea, icon, font etc
							'label' => __( 'Field 3', 'fl-automator' ) //* Field title
						),

						'field-4' => array( //* field-4 is the field name
							'type' 		=> 'select',
							'label' 	=> __( 'Field 4', 'fl-automator' ), //* Field title
							'options' 	=> array(
								'none' 		=> __( 'None', 'fl-automator' ),
								'val-1' 	=> __( 'Option 1', 'fl-automator' ),
								'val-2' 	=> __( 'Option 2', 'fl-automator' ),
								'val-3' 	=> __( 'Option 3', 'fl-automator' ),
							)
						),
					)
				),  //* section 2 is end here
			)
		);
	}

	return $form;
}

 

Adding Custom Tab to All Modules

With following snippet you can add same custom tab to all active modules. Open the functions.php of your active theme and add it there.

add_filter( 'fl_builder_register_settings_form', 'probb_add_custom_tab_all_modules', 1010, 2 );
function probb_add_custom_tab_all_modules( $form, $slug )
{
	$modules = FLBuilderModel::get_enabled_modules(); //* getting all active modules slug

	if( in_array( $slug, $modules ) ) 
	{
		$form['my-custom-tab'] = array( //* my-custom-tab is the tab slug
			'title' => __( 'My Custom Tab', 'fl-automator' ), //* Tab title
			'sections' => array( //* create sections
				'sec-1' => array( //* "sec-1" is the slug
					'title' => __( 'Section 1', 'fl-automator' ), //* Section title.
					'fields' => array ( //* creating the fields under sec-1 section
						'field-1' => array( //* field-1 is the field name
							'type' 	=> 'text', //* Field type. It can be text, select, textarea, icon, font etc
							'label' => __( 'Field 1', 'fl-automator' ) //* Field title
						),

						'field-2' => array( //* field-2 is the field name
							'type' 		=> 'select',
							'label' 	=> __( 'Field 2', 'fl-automator' ), //* Field title
							'options' 	=> array(
								'val-1' 	=> __( 'Option 1', 'fl-automator' ),
								'val-2' 	=> __( 'Option 2', 'fl-automator' ),
								'val-3' 	=> __( 'Option 3', 'fl-automator' ),
							)
						),
					)
				), //* section 1 is end here

				'sec-2' => array( //* "sec-2" is the slug
					'title' => __( 'Section 2', 'fl-automator' ), //* Section title.
					'fields' => array ( //* creating the fields under sec-1 section
						'field-3' => array( //* field-3 is the field name
							'type' 	=> 'text', //* Field type. It can be text, select, textarea, icon, font etc
							'label' => __( 'Field 3', 'fl-automator' ) //* Field title
						),

						'field-4' => array( //* field-4 is the field name
							'type' 		=> 'select',
							'label' 	=> __( 'Field 4', 'fl-automator' ), //* Field title
							'options' 	=> array(
								'none' 		=> __( 'None', 'fl-automator' ),
								'val-1' 	=> __( 'Option 1', 'fl-automator' ),
								'val-2' 	=> __( 'Option 2', 'fl-automator' ),
								'val-3' 	=> __( 'Option 3', 'fl-automator' ),
							)
						),
					)
				),  //* section 2 is end here
			)
		);
	}

	return $form;
}

 

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares