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:

  1. Creating Panel
  2. Adding multiple sections inside a panel
  3. Fields type
    • Text
    • Textarea
    • Select
    • Color
    • Slider (range)
    • Font Family, Size and weight
Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.

Login

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

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.

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.

Setting Fields

1. Text Field

2. Textarea Field

3. Select Field

4. Color Field

5. Range/Slider Field

6. Font Family, Size and Weight Field

2 Comments

  1. bob on November 6, 2017 at 12:32 am

    Great tutorial.
    Is there a tutorial that could help us understand how to connect these controls to elements on the site?
    Love the Idea of adding controls to the customizer.
    thanks again!

    • WP Beaver World on November 6, 2017 at 2:46 am

      You will get the custom field data from customizer with `FLTheme::get_setting(‘ENTER YOUR FIELD NAME/KEY HERE’)`;

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares