$wp_customize->add_control(
new ET_Divi_Select_Option(
'et_divi[all_buttons_font]',
'label' => esc_html__( 'Buttons Font', 'Divi' ),
'section' => 'et_divi_buttons',
'settings' => 'et_divi[all_buttons_font]',
'choices' => $font_choices,
$wp_customize->add_setting(
'et_divi[all_buttons_icon]',
'capability' => 'edit_theme_options',
'sanitize_callback' => 'et_sanitize_yes_no',
$wp_customize->add_control(
'et_divi[all_buttons_icon]',
'label' => esc_html__( 'Add Button Icon', 'Divi' ),
'section' => 'et_divi_buttons',
'choices' => et_divi_yes_no_choices(),
$wp_customize->add_setting(
'et_divi[all_buttons_selected_icon]',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_font_icon',
$wp_customize->add_control(
new ET_Divi_Icon_Picker_Option(
'et_divi[all_buttons_selected_icon]',
'label' => esc_html__( 'Select Icon', 'Divi' ),
'section' => 'et_divi_buttons',
$wp_customize->add_setting(
'et_divi[all_buttons_icon_color]',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_alpha_color',
$wp_customize->add_control(
new ET_Divi_Customize_Color_Alpha_Control(
'et_divi[all_buttons_icon_color]',
'label' => esc_html__( 'Icon Color', 'Divi' ),
'section' => 'et_divi_buttons',
'settings' => 'et_divi[all_buttons_icon_color]',
$wp_customize->add_setting(
'et_divi[all_buttons_icon_placement]',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_left_right',
$wp_customize->add_control(
'et_divi[all_buttons_icon_placement]',
'label' => esc_html__( 'Icon Placement', 'Divi' ),
'section' => 'et_divi_buttons',
'choices' => et_divi_left_right_choices(),
$wp_customize->add_setting(
'et_divi[all_buttons_icon_hover]',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_yes_no',
$wp_customize->add_control(
'et_divi[all_buttons_icon_hover]',
'label' => esc_html__( 'Only Show Icon on Hover', 'Divi' ),
'section' => 'et_divi_buttons',
'choices' => et_divi_yes_no_choices(),
$wp_customize->add_setting(
'et_divi[all_buttons_text_color_hover]',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_alpha_color',
$wp_customize->add_control(
new ET_Divi_Customize_Color_Alpha_Control(
'et_divi[all_buttons_text_color_hover]',
'label' => esc_html__( 'Text Color', 'Divi' ),
'section' => 'et_divi_buttons_hover',
'settings' => 'et_divi[all_buttons_text_color_hover]',
$wp_customize->add_setting(
'et_divi[all_buttons_bg_color_hover]',
'default' => 'rgba(255,255,255,0.2)',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_alpha_color',
$wp_customize->add_control(
new ET_Divi_Customize_Color_Alpha_Control(
'et_divi[all_buttons_bg_color_hover]',
'label' => esc_html__( 'Background Color', 'Divi' ),
'section' => 'et_divi_buttons_hover',
'settings' => 'et_divi[all_buttons_bg_color_hover]',
$wp_customize->add_setting(
'et_divi[all_buttons_border_color_hover]',
'default' => 'rgba(0,0,0,0)',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_alpha_color',
$wp_customize->add_control(
new ET_Divi_Customize_Color_Alpha_Control(
'et_divi[all_buttons_border_color_hover]',
'label' => esc_html__( 'Border Color', 'Divi' ),
'section' => 'et_divi_buttons_hover',
'settings' => 'et_divi[all_buttons_border_color_hover]',
$wp_customize->add_setting(
'et_divi[all_buttons_border_radius_hover]',
'default' => ET_Global_Settings::get_value( 'all_buttons_border_radius_hover', 'default' ),
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'absint',
$wp_customize->add_control(
new ET_Divi_Range_Option(
'et_divi[all_buttons_border_radius_hover]',
'label' => esc_html__( 'Border Radius', 'Divi' ),
'section' => 'et_divi_buttons_hover',
$wp_customize->add_setting(
'et_divi[all_buttons_spacing_hover]',
'default' => ET_Global_Settings::get_value( 'all_buttons_spacing_hover', 'default' ),
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'et_sanitize_int_number',
$wp_customize->add_control(
new ET_Divi_Range_Option(
'et_divi[all_buttons_spacing_hover]',
'label' => esc_html__( 'Letter Spacing', 'Divi' ),
'section' => 'et_divi_buttons_hover',
* Add action hook to the footer in customizer preview.
function et_customizer_preview_footer_action() {
if ( is_customize_preview() ) {
do_action( 'et_customizer_footer_preview' );
add_action( 'wp_footer', 'et_customizer_preview_footer_action' );
* Add container with social icons to the footer in customizer preview.
* Used to get the icons and append them into the header when user enables the header social icons in customizer.
function et_load_social_icons() {
$post_id = is_singular() ? get_the_ID() : 0;
$is_custom_post_type = et_builder_post_is_of_custom_post_type( $post_id );
echo '<div class="et_customizer_social_icons" style="display:none;">';
get_template_part( 'includes/social_icons', 'header' );
<script type="text/javascript">
var isCustomPostType = <?php echo json_encode( $is_custom_post_type ); ?>;
$(document).ready(function() {
$(document).trigger('et-customizer-preview-load', {
isCustomPostType: isCustomPostType,
selectorWrapper: <?php echo json_encode( ET_BUILDER_CSS_PREFIX ); ?>
add_action( 'et_customizer_footer_preview', 'et_load_social_icons' );
function et_divi_customize_preview_js() {
$theme_version = et_get_theme_version();
wp_enqueue_script( 'divi-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), $theme_version, true );
wp_localize_script( 'divi-customizer', 'et_main_customizer_data', array(
'original_footer_credits' => et_get_original_footer_credits(),
add_action( 'customize_preview_init', 'et_divi_customize_preview_js' );
function et_divi_customize_preview_js_context() {
// Run in the wp_enqueue_scripts hook as it fires late enough that the main WP query has been resolved.
$layouts = et_theme_builder_get_template_layouts();
wp_localize_script( 'divi-customizer', 'et_theme_builder_customizer_data', array(
'hasHeaderLayout' => ! empty( $layouts ) && $layouts[ ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE ]['override'],
'hasFooterLayout' => ! empty( $layouts ) && $layouts[ ET_THEME_BUILDER_FOOTER_LAYOUT_POST_TYPE ]['override'],
add_action( 'wp_enqueue_scripts', 'et_divi_customize_preview_js_context' );
function et_divi_customize_preview_css() {
$theme_version = et_get_theme_version();
wp_enqueue_style( 'divi-customizer-controls-styles', get_template_directory_uri() . '/css/theme-customizer-controls-styles.css', array(), $theme_version );
wp_enqueue_script( 'divi-customizer-controls-js', get_template_directory_uri() . '/js/theme-customizer-controls.js', array( 'jquery' ), $theme_version, true );
wp_localize_script( 'divi-customizer-controls-js', 'et_divi_customizer_data', array(
'is_old_wp' => et_pb_is_wp_old_version() ? 'old' : 'new',
'color_palette' => implode( '|', et_pb_get_default_color_palette() ),
add_action( 'customize_controls_enqueue_scripts', 'et_divi_customize_preview_css' );
* Modifying builder options based on saved Divi values
* @param array current builder options values
* @return array modified builder options values
function et_divi_builder_options( $options ) {
$options['all_buttons_icon'] = et_get_option( 'all_buttons_icon', 'yes' );
add_filter( 'et_builder_options', 'et_divi_builder_options' );
* Add custom customizer control
* Check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control is loaded on customizer page only
* @see _wp_customize_include()
if ( class_exists( 'WP_Customize_Control' ) ) {
* Font style control for Customizer
class ET_Divi_Font_Style_Option extends WP_Customize_Control {
public $type = 'font_style';
public function render_content() {
<?php if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
if ( ! empty( $this->description ) ) : ?>
<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
<?php $current_values = explode('|', $this->value() );
if ( empty( $this->choices ) )
foreach ( $this->choices as $value => $label ) :
$checked_class = in_array( $value, $current_values ) ? ' et_font_style_checked' : '';
<span class="et_font_style et_font_value_<?php echo esc_attr( $value ); echo $checked_class; ?>">
<input type="checkbox" class="et_font_style_checkbox" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $current_values ) ); ?> />
<input type="hidden" class="et_font_styles" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
* Icon picker control for Customizer
class ET_Divi_Icon_Picker_Option extends WP_Customize_Control {
public $type = 'icon_picker';
public function render_content() {
<?php if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
et_pb_font_icon_list(); ?>
<input type="hidden" class="et_selected_icon" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
* Range-based sliding value picker for Customizer
class ET_Divi_Range_Option extends WP_Customize_Control {
public function render_content() {
<?php if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
if ( ! empty( $this->description ) ) : ?>
<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
<input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> data-reset_value="<?php echo esc_attr( $this->setting->default ); ?>" />
<input type="number" <?php $this->input_attrs(); ?> class="et-pb-range-input" value="<?php echo esc_attr( $this->value() ); ?>" />
<span class="et_divi_reset_slider"></span>
* Custom Select option which supports data attributes for the <option> tags
class ET_Divi_Select_Option extends WP_Customize_Control {
public function render_content() {
<?php if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
if ( ! empty( $this->description ) ) : ?>
<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
<select <?php $this->link(); ?>>
foreach ( $this->choices as $value => $attributes ) {
if ( ! empty( $attributes['data'] ) ) {
foreach( $attributes['data'] as $data_name => $data_value ) {
if ( '' !== $data_value ) {
$data_output .= sprintf( ' data-%1$s="%2$s"',
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . $data_output . '>' . esc_html( $attributes['label'] ) . '</option>';
* Color picker with alpha color support for Customizer
class ET_Divi_Customize_Color_Alpha_Control extends WP_Customize_Control {
public $type = 'et_coloralpha';
public function __construct( $manager, $id, $args = array() ) {
$this->statuses = array( '' => esc_html__( 'Default', 'Divi' ) );
parent::__construct( $manager, $id, $args );
// Printed saved value should always be in lowercase
add_filter( "customize_sanitize_js_{$id}", array( $this, 'sanitize_saved_value' ) );
public function enqueue() {
wp_enqueue_script( 'wp-color-picker-alpha' );
wp_enqueue_style( 'wp-color-picker' );
public function to_json() {
$this->json['statuses'] = $this->statuses;
$this->json['defaultValue'] = $this->setting->default;
public function render_content() {}
public function content_template() {
<# var defaultValue = '';
if ( data.defaultValue ) {
if ( '#' !== data.defaultValue.substring( 0, 1 ) && 'rgba' !== data.defaultValue.substring( 0, 4 ) ) {
defaultValue = '#' + data.defaultValue;
defaultValue = data.defaultValue;
defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
<# if ( data.label ) { #>