: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
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 ) { #>
<span class="customize-control-title">{{{ data.label }}}</span>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<div class="customize-control-content">
<input class="color-picker-hex" data-alpha="true" type="text" maxlength="30" placeholder="<?php esc_attr_e( 'Hex Value', 'Divi' ); ?>" {{ defaultValue }} />
* Ensure saved value to be printed in lowercase.
* Mismatched case causes broken 4.7 in Customizer. Color Alpha control only saves string.
* @param string saved value
* @return string formatted value
public function sanitize_saved_value( $value ) {
return strtolower( $value );
function et_divi_add_customizer_css() {
if ( wp_doing_ajax() || wp_doing_cron() || ( is_admin() && ! is_customize_preview() ) ) {
/** @see ET_Core_SupportCenter::toggle_safe_mode */
if ( et_core_is_safe_mode_active() ) {
$post_id = et_core_page_resource_get_the_ID();
$is_preview = is_preview() || isset( $_GET['et_pb_preview_nonce'] ) || is_customize_preview();
$is_singular = et_core_page_resource_is_singular();
$is_cpt = et_builder_is_custom_post_type_archive() || ( et_builder_post_is_of_custom_post_type( $post_id ) && et_pb_is_pagebuilder_used( $post_id ) );
$disabled_global = 'off' === et_get_option( 'et_pb_static_css_file', 'on' );
$disabled_post = $disabled_global || ( $is_singular && 'off' === get_post_meta( $post_id, '_et_pb_static_css_file', true ) );
$forced_inline = $is_preview || $disabled_global || $disabled_post || post_password_required();
$builder_in_footer = 'on' === et_get_option( 'et_pb_css_in_footer', 'off' );
$unified_styles = $is_singular && ! $forced_inline && ! $builder_in_footer && et_core_is_builder_used_on_current_request();
$resource_owner = $unified_styles ? 'core' : 'divi';
$resource_slug = $unified_styles ? 'unified' : 'customizer';
$resource_slug .= $is_cpt ? '-cpt' : '';
$css = 'et_builder_maybe_wrap_css_selector';
// Don't let previews cause existing saved static css files to be modified.
$resource_slug .= '-preview';
if ( function_exists( 'et_fb_is_enabled' ) && et_fb_is_enabled() ) {
if ( ! $unified_styles ) {
$resource_slug = et_theme_builder_decorate_page_resource_slug( $post_id, $resource_slug );
$styles_manager = et_core_page_resource_get( $resource_owner, $resource_slug, $post_id );
$styles_manager->forced_inline = $forced_inline;
if ( ! $styles_manager->forced_inline && $styles_manager->has_file() ) {
// Static resource has already been created. No need to continue here.
// Detect legacy settings
$detect_legacy_secondary_nav_color = et_get_option( 'secondary_nav_text_color', 'Light' );
$detect_legacy_primary_nav_color = et_get_option( 'primary_nav_text_color', 'Dark' );
if ( $detect_legacy_primary_nav_color == 'Light' ) {
$legacy_primary_nav_color = '#ffffff';
$legacy_primary_nav_color = 'rgba(0,0,0,0.6)';
if ( $detect_legacy_secondary_nav_color == 'Light' ) {
$legacy_secondary_nav_color = '#ffffff';
$legacy_secondary_nav_color = 'rgba(0,0,0,0.7)';
$body_font_size = absint( et_get_option( 'body_font_size', '14' ) );
$body_font_height = floatval( et_get_option( 'body_font_height', '1.7' ) );
$body_header_size = absint( et_get_option( 'body_header_size', '30' ) );
$body_header_style = et_get_option( 'body_header_style', '', '', true );
$body_header_spacing = intval( et_get_option( 'body_header_spacing', '0' ) );
$body_header_height = floatval( et_get_option( 'body_header_height', '1' ) );
$body_font_color = et_get_option( 'font_color', '#666666' );
$body_header_color = et_get_option( 'header_color', '#666666' );
$accent_color = et_get_option( 'accent_color', '#2ea3f2' );
$link_color = et_get_option( 'link_color', $accent_color );
$content_width = absint( et_get_option( 'content_width', '1080' ) );
$large_content_width = intval ( $content_width * 1.25 );
$use_sidebar_width = et_get_option( 'use_sidebar_width', false );
$sidebar_width = intval( et_get_option( 'sidebar_width', 21 ) );
$section_padding = absint( et_get_option( 'section_padding', '4' ) );
$row_padding = absint( et_get_option( 'row_padding', '2' ) );
$tablet_header_font_size = absint( et_get_option( 'tablet_header_font_size', '30' ) );
$tablet_body_font_size = absint( et_get_option( 'tablet_body_font_size', '14' ) );
$tablet_section_height = absint( et_get_option( 'tablet_section_height', '50' ) );
$tablet_row_height = absint( et_get_option( 'tablet_row_height', '30' ) );
$phone_header_font_size = absint( et_get_option( 'phone_header_font_size', $tablet_header_font_size ) );
$phone_body_font_size = absint( et_get_option( 'phone_body_font_size', $tablet_body_font_size ) );
$phone_section_height = absint( et_get_option( 'phone_section_height', $tablet_section_height ) );
$phone_row_height = absint( et_get_option( 'phone_row_height', $tablet_row_height ) );
$header_style = et_get_option( 'header_style', 'left' );
$menu_height = absint( et_get_option( 'menu_height', '66' ) );
$logo_height = absint( et_get_option( 'logo_height', '54' ) );
$menu_margin_top = absint( et_get_option( 'menu_margin_top', '0' ) );
$menu_link = et_get_option( 'menu_link', $legacy_primary_nav_color );
$menu_link_active = et_get_option( 'menu_link_active', '#2ea3f2' );
$vertical_nav = et_get_option( 'vertical_nav', false );
$hide_primary_logo = et_get_option( 'hide_primary_logo', 'false' );
$hide_fixed_logo = et_get_option( 'hide_fixed_logo', 'false' );
$default_primary_nav_font_size = 14;
$primary_nav_font_size = absint( et_get_option( 'primary_nav_font_size', $default_primary_nav_font_size ) );
$primary_nav_font_spacing = intval( et_get_option( 'primary_nav_font_spacing', '0' ) );
$primary_nav_bg = et_get_option( 'primary_nav_bg', '#ffffff' );
$primary_nav_font_style = et_get_option( 'primary_nav_font_style', '', '', true );
$primary_nav_dropdown_bg = et_get_option( 'primary_nav_dropdown_bg', $primary_nav_bg );
$primary_nav_dropdown_link_color = et_get_option( 'primary_nav_dropdown_link_color', $menu_link );
$primary_nav_dropdown_line_color = et_get_option( 'primary_nav_dropdown_line_color', $accent_color );
$mobile_menu_link = et_get_option( 'mobile_menu_link', $menu_link );
$mobile_primary_nav_bg = et_get_option( 'mobile_primary_nav_bg', $primary_nav_bg );
$secondary_nav_font_size = absint( et_get_option( 'secondary_nav_font_size', '12' ) );
$secondary_nav_font_spacing = intval( et_get_option( 'secondary_nav_font_spacing', '0' ) );
$secondary_nav_font_style = et_get_option( 'secondary_nav_font_style', '', '', true );
$secondary_nav_text_color_new = et_get_option( 'secondary_nav_text_color_new', $legacy_secondary_nav_color );
$secondary_nav_bg = et_get_option( 'secondary_nav_bg', et_get_option( 'accent_color', '#2ea3f2' ) );
$secondary_nav_dropdown_bg = et_get_option( 'secondary_nav_dropdown_bg', $secondary_nav_bg );
$secondary_nav_dropdown_link_color = et_get_option( 'secondary_nav_dropdown_link_color', $secondary_nav_text_color_new );
$fixed_primary_nav_font_size = absint( et_get_option( 'fixed_primary_nav_font_size', $primary_nav_font_size ) );
$fixed_primary_nav_bg = et_get_option( 'fixed_primary_nav_bg', $primary_nav_bg );
$fixed_secondary_nav_bg = et_get_option( 'fixed_secondary_nav_bg', $secondary_nav_bg );
$fixed_menu_height = absint( et_get_option( 'minimized_menu_height', '40' ) );
$fixed_menu_link = et_get_option( 'fixed_menu_link', $menu_link );
$fixed_menu_link_active = et_get_option( 'fixed_menu_link_active', $menu_link_active );
$fixed_secondary_menu_link = et_get_option( 'fixed_secondary_menu_link', $secondary_nav_text_color_new );
$footer_bg = et_get_option( 'footer_bg', '#222222' );
$footer_widget_link_color = et_get_option( 'footer_widget_link_color', '#fff' );
$footer_widget_text_color = et_get_option( 'footer_widget_text_color', '#fff' );
$footer_widget_header_color = et_get_option( 'footer_widget_header_color', $accent_color );
$footer_widget_bullet_color = et_get_option( 'footer_widget_bullet_color', $accent_color );
$widget_header_font_size = intval( et_get_option( 'widget_header_font_size', $body_header_size * .6 ) );
$widget_body_font_size = absint( et_get_option( 'widget_body_font_size', $body_font_size ) );
$widget_body_line_height = floatval( et_get_option( 'widget_body_line_height', '1.7' ) );
$button_text_size = absint( et_get_option( 'all_buttons_font_size', '20' ) );
$button_text_color = et_get_option( 'all_buttons_text_color', '' );
$button_bg_color = et_get_option( 'all_buttons_bg_color', 'rgba(0,0,0,0)' );
$button_border_width = absint( et_get_option( 'all_buttons_border_width', '2' ) );
$button_border_color = et_get_option( 'all_buttons_border_color', '#ffffff' );
$button_border_radius = absint( et_get_option( 'all_buttons_border_radius', '3' ) );
$button_text_style = et_get_option( 'all_buttons_font_style', '', '', true );
$button_icon = et_get_option( 'all_buttons_selected_icon', '5' );
$button_spacing = intval( et_get_option( 'all_buttons_spacing', '0' ) );
$button_icon_color = et_get_option( 'all_buttons_icon_color', '#ffffff' );
$button_text_color_hover = et_get_option( 'all_buttons_text_color_hover', '' );
$button_bg_color_hover = et_get_option( 'all_buttons_bg_color_hover', 'rgba(255,255,255,0.2)' );
$button_border_color_hover = et_get_option( 'all_buttons_border_color_hover', 'rgba(0,0,0,0)' );
$button_border_radius_hover = absint( et_get_option( 'all_buttons_border_radius_hover', '3' ) );
$button_spacing_hover = intval( et_get_option( 'all_buttons_spacing_hover', '0' ) );
$button_icon_size = 1.6 * intval( $button_text_size );
$slide_nav_show_top_bar = et_get_option( 'slide_nav_show_top_bar', true );
$slide_nav_bg = et_get_option( 'slide_nav_bg', $accent_color );
$slide_nav_links_color = et_get_option( 'slide_nav_links_color', '#ffffff' );
$slide_nav_links_color_active = et_get_option( 'slide_nav_links_color_active', '#ffffff' );
$slide_nav_top_color = et_get_option( 'slide_nav_top_color', 'rgba(255,255,255,0.6)' );
$slide_nav_search = et_get_option( 'slide_nav_search', 'rgba(255,255,255,0.6)' );
$slide_nav_search_bg = et_get_option( 'slide_nav_search_bg', 'rgba(0,0,0,0.2)' );
$slide_nav_width = intval( et_get_option( 'slide_nav_width', '320' ) );
$slide_nav_font_style = et_get_option( 'slide_nav_font_style', '', '', true );
$slide_nav_font_size = intval( et_get_option( 'slide_nav_font_size', '14' ) );
$slide_nav_top_font_size = intval( et_get_option( 'slide_nav_top_font_size', '14' ) );
$slide_nav_font_spacing = et_get_option( 'slide_nav_font_spacing', '0' );
$fullscreen_nav_font_size = intval( et_get_option( 'fullscreen_nav_font_size', '30' ) );
$fullscreen_nav_top_font_size = intval( et_get_option( 'fullscreen_nav_top_font_size', '18' ) );
// use different selector for the styles applied directly to body tag while in Visual Builder. Otherwise unwanted styles applied to the Builder interface.
$body_selector = empty( $_GET['et_fb'] ) ? 'body' : 'body .et-fb-post-content';
$body_selector_sibling = empty( $_GET['et_fb'] ) ? '' : 'body .et-fb-root-ancestor-sibling, ';
/* ====================================================
* --------->>> BEGIN THEME CUSTOMIZER CSS <<<---------
* ==================================================== */
if ( 14 !== $body_font_size ) { ?>
<?php echo esc_html( $body_selector_sibling ); ?>
<?php echo esc_html( $body_selector ); ?>,
<?php echo $css( '.et_pb_column_1_2 .et_quote_content blockquote cite', false ); ?>,
<?php echo $css( '.et_pb_column_1_2 .et_link_content a.et_link_main_url', false ); ?>,
<?php echo $css( '.et_pb_column_1_3 .et_quote_content blockquote cite', false ); ?>,
<?php echo $css( '.et_pb_column_3_8 .et_quote_content blockquote cite', false ); ?>,
<?php echo $css( '.et_pb_column_1_4 .et_quote_content blockquote cite', false ); ?>,
<?php echo $css( '.et_pb_blog_grid .et_quote_content blockquote cite', false ); ?>,
<?php echo $css( '.et_pb_column_1_3 .et_link_content a.et_link_main_url', false ); ?>,
<?php echo $css( '.et_pb_column_3_8 .et_link_content a.et_link_main_url', false ); ?>,
<?php echo $css( '.et_pb_column_1_4 .et_link_content a.et_link_main_url', false ); ?>,
<?php echo $css( '.et_pb_blog_grid .et_link_content a.et_link_main_url', false ); ?>,
<?php echo $css( 'body', '.et_pb_bg_layout_light .et_pb_post p', false ); ?>,
<?php echo $css( 'body', '.et_pb_bg_layout_dark .et_pb_post p', false ); ?> {
font-size: <?php echo esc_html( $body_font_size ); ?>px;
<?php echo $css( '.et_pb_slide_content', false ); ?>,
<?php echo $css( '.et_pb_best_value', false ); ?> {
font-size: <?php echo esc_html( intval( $body_font_size * 1.14 ) ); ?>px;
<?php if ( '#666666' !== $body_font_color) { ?>
<?php echo esc_html( $body_selector_sibling ); ?>
<?php echo esc_html( $body_selector ); ?> {
color: <?php echo esc_html( $body_font_color ); ?>;
<?php if ( '#666666' !== $body_header_color ) { ?>
<?php echo $css( 'h1' ); ?>,
<?php echo $css( 'h2' ); ?>,
<?php echo $css( 'h3' ); ?>,
<?php echo $css( 'h4' ); ?>,
<?php echo $css( 'h5' ); ?>,
<?php echo $css( 'h6' ); ?> {
color: <?php echo esc_html( $body_header_color ); ?>;
<?php if ( 1.7 !== $body_font_height ) { ?>
<?php echo esc_html( $body_selector_sibling ); ?>
<?php echo esc_html( $body_selector ); ?> {
line-height: <?php echo esc_html( $body_font_height ); ?>em;
<?php if ( $accent_color !== '#2ea3f2' ) { ?>
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page #content input.button,
background: <?php echo esc_html( $accent_color ); ?> !important;
.et_toggle_slide_menu:after,
<?php echo $css( '.et_pb_sum' ); ?>,
<?php echo $css( '.et_pb_pricing li a', false ); ?>,
<?php echo $css( '.et_pb_pricing_table_button', false ); ?>,
<?php echo $css( '.et_overlay:before' ); ?>,
<?php echo $css( '.entry-summary p.price ins' ); ?>,
.woocommerce div.product span.price,
.woocommerce-page div.product span.price,
.woocommerce #content div.product span.price,
.woocommerce-page #content div.product span.price,
.woocommerce div.product p.price,
.woocommerce-page div.product p.price,
.woocommerce #content div.product p.price,
.woocommerce-page #content div.product p.price,
<?php echo $css( '.et_pb_member_social_links a:hover', false ); ?>,
.woocommerce .star-rating span:before,
.woocommerce-page .star-rating span:before,
<?php echo $css( '.et_pb_widget li a:hover' ); ?>,
<?php echo $css( '.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active', false ); ?>,
<?php echo $css( '.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active', false ); ?>,
<?php echo $css( '.et_pb_gallery .et_pb_gallery_pagination ul li a.active', false ); ?>,
.wp-pagenavi span.current,
<?php echo $css( '.nav-single a' ); ?>,
<?php echo $css( '.tagged_as a' ); ?>,
<?php echo $css( '.posted_in a' ); ?> {
color: <?php echo esc_html( $accent_color ); ?>;
<?php echo $css( '.et_pb_contact_submit', false ); ?>,
<?php echo $css( '.et_password_protected_form .et_submit_button', false ); ?>,
<?php echo $css( '.et_pb_bg_layout_light .et_pb_newsletter_button', false ); ?>,
<?php echo $css( '.comment-reply-link', false ); ?>,
<?php echo $css( '.form-submit .et_pb_button', false ); ?>,
<?php echo $css( '.et_pb_bg_layout_light .et_pb_promo_button', false ); ?>,
<?php echo $css( '.et_pb_bg_layout_light .et_pb_more_button', false ); ?>,
<?php echo $css( '.woocommerce', 'a.button.alt' ); ?>,
<?php echo $css( '.woocommerce-page', 'a.button.alt' ); ?>,