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.

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.

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.

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.

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.


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.


Get free weekly PRO Beaver Builder Tutorials