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.

<?php

class ProbbCustomizerControl extends WP_Customize_Control
{
	/**
	 * Renders the content for a control based on the type
	 * of control specified when this class is initialized.
	 *
	 * @return void
	 */
	protected function render_content()
	{
		switch($this->type) {

			case 'heading':
			$this->render_heading();
			break;
		}
	}

	/**
	 * Renders heading control.
	 *
	 * @return void
	 */
	protected function render_heading()
	{
		echo '<label>
				<span class="customize-control-title">'. esc_html( $this->label ) .'</span>
				<span class="description customize-control-description">' . esc_html( $this->description ) . '</span>
			 </label>';
	}
}

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

<?php

class Probb_ButtonColors
{
	static public function init()
	{
		// Setup the Theme Customizer settings and controls...
		add_action( 'customize_register', __CLASS__ .'::probb_customize_register', 11 );
	}

	static public function probb_customize_register( $wp_customize )
	{
		require_once FL_CHILD_THEME_DIR . '/classes/class-customizer-control.php';

		self::_button_colors( $wp_customize );
	}

	/**
	 * Adds button colors control into fl-accent-color section
	 */
	static private function _button_colors( $wp_customize )
	{
		self::_add_settings_control( $wp_customize, array(
			/* Line */
			'bb-button-line' 	=> array(
				'section_key' 	=> 'fl-accent-color',
				'control'   => array(
					'class'     => 'FLCustomizerControl',
					'type'      => 'line'
				)
			),

			/* Heading */
			'bb-button-heading' 	=> array(
				'section_key' 	=> 'fl-accent-color',
				'control'   		=> array(
					'class'     		=> 'ProbbCustomizerControl',
					'type'      		=> 'heading',
					'label' 			=> __( 'Button Style', 'fl-automator' ),
					'description' 		=> __( 'Customize the button color', 'fl-automator' )
				)
			),


			/* Button Text Color */
			'bb-button-color' 	=> array(
				'section_key' 			=> 'fl-accent-color',
				'setting' 				=> array(
					'default' 				=> '#ffffff'
				),
				'control' 				=> array(
					'class'					=> 'WP_Customize_Color_Control',
					'label' 				=> __('Color', 'fl-automator')
				)
			),

			/* Button Text Hover Color */
			'bb-button-hover-color' 	=> array(
				'section_key' 			=> 'fl-accent-color',
				'setting' 				=> array(
					'default' 				=> '#ffffff'
				),
				'control' 				=> array(
					'class'					=> 'WP_Customize_Color_Control',
					'label' 				=> __('Hover Color', 'fl-automator')
				)
			),

			/* Button Background Color */
			'bb-button-bg-color' => array(
				'section_key' 			=> 'fl-accent-color',
				'setting' 				=> array(
					'default' 				=> '#2e2f33'
				),
				'control' 				=> array(
					'class'					=> 'WP_Customize_Color_Control',
					'label' 				=> __('Background Color', 'fl-automator')
				)
			),

			/* Button Background Hover Color */
			'bb-button-bg-hover-color' => array(
				'section_key' 			=> 'fl-accent-color',
				'setting' 				=> array(
					'default' 				=> '#13afdf'
				),
				'control' 				=> array(
					'class'					=> 'WP_Customize_Color_Control',
					'label' 				=> __('Background Hover Color', 'fl-automator')
				)
			),

			/* Border Radius */
			'bb-button-border-radius' => array(
				'section_key' 			=> 'fl-accent-color',
				'setting' 				=> array(
					'default' 				=> '4px'
				),
				'control' 				=> array(
					'class'					=> 'WP_Customize_Control',
					'label' 				=> __('Border Radius', 'fl-automator'),
					'type' 					=> 'text'
				)
			)
		));
	}

	/**
	 * Adding new setting control into existing sections
	 */
	static private function _add_settings_control( $customizer, $settings_data )
	{
		$option_priority = 10;

		foreach ( $settings_data as $option_key => $option_data ) {

			// Add setting
			if ( ! isset( $option_data['setting'] ) ) {
				$option_data['setting'] = array( 'default' => '' );
			}

			if ( isset( $option_data['priority'] ) ) {
				$option_priority = $option_data['priority'];
			}

			$customizer->add_setting( $option_key, $option_data['setting'] );

			// Add control
			$option_data['control']['section']  = $option_data['section_key'];
			$option_data['control']['settings'] = $option_key;
			$option_data['control']['priority'] = $option_priority;
			$customizer->add_control(
				new $option_data['control']['class']( $customizer, $option_key, $option_data['control'] )
			);

			// Increment option priority
			$option_priority++;
		}
	}
}

Probb_ButtonColors::init();

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.

require_once 'classes/class-customize-button.php';
/**
 * Filters the modules default value
 * Editings the button, contact form, subscribe form, call to action & call out modules
 */
add_filter( 'fl_builder_settings_form_defaults', 'probb_default_color_button_module', 20, 2 );
function probb_default_color_button_module( $defaults, $type )
{
	if( $type == "button-module" || $type == "contact-form-module" || $type == "subscribe-form-module" || $type == "cta-module" || $type == "callout-module" )
	{
		$bg_color 			= ( $type == "button-module" ) ? 'bg_color' : 'btn_bg_color'; 
		$bg_hover_color 	= ( $type == "button-module" ) ? 'bg_hover_color' : 'btn_bg_hover_color'; 
		$text_color 		= ( $type == "button-module" ) ? 'text_color' : 'btn_text_color'; 
		$text_hover_color 	= ( $type == "button-module" ) ? 'text_hover_color' : 'btn_text_hover_color'; 
		$border_radius 		= ( $type == "button-module" ) ? 'border_radius' : 'btn_border_radius';

		$btn_bg_color 		= FLColor::hex( array( FLTheme::get_setting( 'bb-button-bg-color' ), '2e2f33' ) );
		$btn_bg_hover_color 	= FLColor::hex( array( FLTheme::get_setting( 'bb-button-bg-hover-color' ), '13afdf' ) );
		$btn_text_color 		= FLColor::hex( array( FLTheme::get_setting( 'bb-button-color' ), 'ffffff' ) );
		$btn_text_hover_color 	= FLColor::hex( array( FLTheme::get_setting( 'bb-button-hover-color' ), 'ffffff' ) );
		$btn_border_radius 		= ! empty( FLTheme::get_setting( 'bb-button-border-radius' ) ) ? FLTheme::get_setting( 'bb-button-border-radius' ) : '4px';

		$defaults->{$bg_color} 			= FLColor::clean_hex( $btn_bg_color );
		$defaults->{$bg_hover_color} 	= FLColor::clean_hex( $btn_bg_hover_color );
		$defaults->{$text_color} 		= FLColor::clean_hex( $btn_text_color );
		$defaults->{$text_hover_color} 	= FLColor::clean_hex( $btn_text_hover_color );
		$defaults->{$border_radius} 	= str_replace( 'px', '', $btn_border_radius );
	}

	return $defaults;
}

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

add_filter( 'fl_builder_settings_form_defaults', 'probb_default_color_pp_button_module', 20, 2 );
function probb_default_color_pp_button_module( $defaults, $type )
{
	if( $type == "pp-smart-button-module" )
	{
		$btn_bg_color 			= FLColor::hex( array( FLTheme::get_setting( 'bb-button-bg-color' ), '2e2f33' ) );
		$btn_bg_hover_color 	= FLColor::hex( array( FLTheme::get_setting( 'bb-button-bg-hover-color' ), '13afdf' ) );
		$btn_text_color 		= FLColor::hex( array( FLTheme::get_setting( 'bb-button-color' ), 'ffffff' ) );
		$btn_text_hover_color 	= FLColor::hex( array( FLTheme::get_setting( 'bb-button-hover-color' ), 'ffffff' ) );
		$btn_border_radius 		= ! empty( FLTheme::get_setting( 'bb-button-border-radius' ) ) ? FLTheme::get_setting( 'bb-button-border-radius' ) : '4px';

		$defaults->bg_color['primary'] 		= FLColor::clean_hex( $btn_bg_color );
		$defaults->bg_color['secondary'] 	= FLColor::clean_hex( $btn_bg_hover_color );
		$defaults->text_color['primary'] 	= FLColor::clean_hex( $btn_text_color );
		$defaults->text_color['secondary'] 	= FLColor::clean_hex( $btn_text_hover_color );
		$defaults->border_radius 			= str_replace( 'px', '', $btn_border_radius );
	}

	return $defaults;
}

 

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares