Add custom panel, sections, settings and fields in Beaver Builder Theme Customizer
In this article I am introducing, how do you add custom panels, sections, fields etc using Beaver Builder Theme’s Customizer module. Theme have native class which is handling the theme customizer. I covered following things in this tutorial:
- Creating Panel
- Adding multiple sections inside a panel
- Fields type
- Text
- Textarea
- Select
- Color
- Slider (range)
- Font Family, Size and weight
Checkout step-by-step guideline at below:
Step 1
Create a php file “customize.php” file and add the following codes in this file. Next you will save and upload into includes folder of your child theme.
Customize.php
_x( 'My Custom Panel', 'Customizer panel title.', 'fl-automator' ),
'sections' => array(
/* My Custom Section 1*/
'section-1' => array(
'title' => _x( 'Custom Section 1', 'Customizer section title.', 'fl-automator' ),
'options' => array(
/* Text Field */
'text-field' => array(
'setting' => array(
'default' => '',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => __( 'Text Field', 'fl-automator' ),
'type' => 'text'
)
),
/* Text Area Field*/
'textarea-field' => array(
'setting' => array(
'default' => '',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => __( 'Textarea Field', 'fl-automator' ),
'type' => 'textarea'
)
),
/* Select Field */
'select-field' => array(
'setting' => array(
'default' => 'index-2', //* By default option 2 will be selected
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => _x( 'Select Field', 'Testing select field.', 'fl-automator' ),
'type' => 'select',
'choices' => array(
'index-1' => __('Option 1', 'fl-automator'),
'index-2' => __('Option 2', 'fl-automator'),
'index-3' => __('Option 3', 'fl-automator')
)
)
)
)
),//* end section 1
/* My Custom Section 2*/
'section-2' => array(
'title' => _x( 'Custom Section 2', 'Customizer section 2 title.', 'fl-automator' ),
'options' => array(
/* Color Field */
'color-field' => array(
'setting' => array(
'default' => '#ffffff',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Color_Control',
'label' => __('Color Field', 'fl-automator')
)
),
/* Slider Type */
'slide-type' => array(
'setting' => array(
'default' => '100',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Color Opacity', 'fl-automator'),
'type' => 'slider',
'choices' => array(
'min' => 0,
'max' => 100,
'step' => 1
),
)
),
/* Font Family, Size and Weight Fields */
'font-family' => array(
'setting' => array(
'default' => 'Helvetica',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Family', 'fl-automator'),
'type' => 'font',
'connect' => 'font-weight'
)
),
/* Font Weight */
'font-weight' => array(
'setting' => array(
'default' => '400',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Weight', 'fl-automator'),
'type' => 'font-weight',
'connect' => 'font-family'
)
),
/* Font Size */
'font-size' => array(
'setting' => array(
'default' => '30',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Size', 'fl-automator'),
'type' => 'slider',
'choices' => array(
'min' => 16,
'max' => 72,
'step' => 1
),
)
),
)
) //* end section 2
)//* closed sections
));//* closed panel
Step 2
In your beaver builder child theme’s classes folder have class-fl-child-theme.php file. Open this file and add the following snippets above the closing bracket (})
class-fl-child-theme.php
/**
* Theme setup logic called by the after_setup_theme action.
*
* @return void
*/
static public function theme_setup() {
include FL_CHILD_THEME_DIR .'/includes/customize.php';
}
Step 3
Open the functions.php file and add this snippet at end of the file.
functions.php
//* Theme setup
add_action( ‘after_setup_theme’, ‘FLChildTheme::theme_setup’ );
All are done. Now click on “customize” link from admin bar (if you are logged in) or login to Dashboard, navigate to Appearance -> Customize and you will get the new custom panel with 2 custom sections.
Below I am describing the full codes of customize.php file in details way. So you can easily and quickly create the custom panels for your site.
Creating a Panel
Beaver Builder theme have a final class “FLCustomizer” which is following the PHP 5 Object Oriented Programming (OOP) concept. This class is controlling the theme customizer.
What is Object-Oriented Programming (OOP)?
OO programming is a different way of thinking about the way you construct your applications. Instead of thinking about an application as a thread of control that passes chunks of data from one function to the next, an OOP approach allows you to model the applications as a set of collaborating objects that independently handle certain activities.
What is Final Class in PHP?
PHP 5 introduces the final keyword, which prevents child classes from overriding a method by prefixing the definition with final. If the class itself is being defined final then it cannot be extended.
Source PHP.net
FLCustomizer class have a public static method “add_panel” which is creating the panel. The class is defined by final keyword and method access is defined as public static, so you can call this method like this way FLCustomizer::add_panel() from your function or class file. This method is containing 2 parameters.
1. $key – String (required) The key for the panel to add. Must be unique.
2. $data – Array (required) The panel data.
Syntax
FLCustomizer::add_panel( 'unique-key-name', array(
'title' => _x( 'My Custom Panel', 'Customizer panel title.', 'fl-automator' ),
'sections' => array(
'section1' => array(),
'section2' => array(),
.
.
.
)
));
Creating Section(s): Sections Array
You can create single or multiple sections under a panel. It is totally depending on your requirement. If you look the above syntax, there have a sections array. Within your sections arrays should be another array that defines your sections, with the slug for the sections as the array keys. The title of the sections should also be defined within these arrays as shown in the example below.
Add Sections
FLCustomizer::add_panel( 'unique-key-name', array(
'title' => _x( 'My Custom Panel', 'Customizer panel title.', 'fl-automator' ),
'sections' => array(
'section-1' => array(
'title' => _x( 'Custom Section 1', 'Customizer section title.', 'fl-automator' ),
),
'section-2' => array(
'title' => _x( 'Custom Section 2', 'Customizer section title.', 'fl-automator' ),
)
)
));
Within your section arrays should be another array that defines your fields, with the slug for the fields as the array keys. See the example below.
Add Fields
FLCustomizer::add_panel( 'unique-key-name', array(
'title' => _x( 'My Custom Panel', 'Customizer panel title.', 'fl-automator' ),
'sections' => array(
'section-1' => array(
'title' => _x( 'Custom Section 1', 'Customizer section title.', 'fl-automator' ),
'options' => array(
/* Field */
'my-field-1' => array(
'setting' => array(
'default' => '',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => __( 'Text Field Title', 'fl-automator' ),
'type' => 'text'
)
),
/* Field 2 */
'my-field-2' => array(
'setting' => array(
'default' => '',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => __( 'Field Title', 'fl-automator' ),
'type' => 'text'
)
)
)
)
)
));
Setting Fields
1. Text Field
Text Field
/* Text Field */ 'text-field' => array( 'setting' => array( 'default' => '', 'transport' => 'postMessage' ), 'control' => array( 'class' => 'WP_Customize_Control', 'label' => __( 'Text Field', 'fl-automator' ), 'type' => 'text' ) )
2. Textarea Field
Textarea Field
/* Textarea Field */ 'text-field' => array( 'setting' => array( 'default' => '', 'transport' => 'postMessage' ), 'control' => array( 'class' => 'WP_Customize_Control', 'label' => __( 'Text Field', 'fl-automator' ), 'type' => 'textarea' ) )
3. Select Field
Select Field
/* Select Field */
'select-field' => array(
'setting' => array(
'default' => 'index-2', //* By default option 2 will be selected
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Control',
'label' => _x( 'Select Field', 'Testing select field.', 'fl-automator' ),
'type' => 'select',
'choices' => array(
'index-1' => __('Option 1', 'fl-automator'),
'index-2' => __('Option 2', 'fl-automator'),
'index-3' => __('Option 3', 'fl-automator')
)
)
)
4. Color Field
Color Field
/* Color Field */
'color-field' => array(
'setting' => array(
'default' => '#ffffff',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'WP_Customize_Color_Control',
'label' => __('Color Field', 'fl-automator')
)
)
5. Range/Slider Field
Slider/Range Field
/* Slider Type */
'slide-type' => array(
'setting' => array(
'default' => '100',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Color Opacity', 'fl-automator'),
'type' => 'slider',
'choices' => array(
'min' => 0,
'max' => 100,
'step' => 1
),
)
)
6. Font Family, Size and Weight Field
Font Family, Size and Weight Fields
/* Font Family, Size and Weight Fields */
'font-family' => array(
'setting' => array(
'default' => 'Helvetica',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Family', 'fl-automator'),
'type' => 'font',
'connect' => 'font-weight'
)
),
/* Font Weight */
'font-weight' => array(
'setting' => array(
'default' => '400',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Weight', 'fl-automator'),
'type' => 'font-weight',
'connect' => 'font-family'
)
),
/* Font Size */
'font-size' => array(
'setting' => array(
'default' => '30',
'transport' => 'postMessage'
),
'control' => array(
'class' => 'FLCustomizerControl',
'label' => __('Font Size', 'fl-automator'),
'type' => 'slider',
'choices' => array(
'min' => 16,
'max' => 72,
'step' => 1
),
)
)