Controlling Beaver Button Module’s Default Color from Theme Customizer

Original Request

Another tutorial request!

Referencing the below tutorial:

https://pro.wpbeaverworld.com/add-default-colors-button-module/

Would be great if instead of hard-coding the colors, they could be taken from the theme customizer’s Accent Colors for example…?

Adding the new color settings controls ( like text color, hover color, background color, background hover color etc) under Beaver theme customizer’s Accent Color section for Beaver builder’s all kind of button modules.

Here is the step by step instructions:

Adding Button Color Control

Adding the button colors control in theme customizer. It will render under “General -> Accent Color” section. First create two new files: class-customizer-control.php and  class-customize-button.php and put them into beaver child theme’s classes folder.

Here is the full code of class-customizer-control.php file which is creating the custom control for Heading.

Here is the full code of another file class-customize-button.php which is creating the controls for button like color, hover color, background color, background hover color & button radius fields

Button Color Controls

Including the Files & Filtering the Button’s Default Value

Open the functions.php file of your beaver child theme and add this PHP snippets at end of the file.

Using PowerPack Smart Button

If you are using the PowerPack Smart Button module, you will use this PHP snippet. Add this in your functions.php file

 

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares