$icon_dimension = intval( $value ) * 2;
.et_pb_social_media_follow li a.icon{
margin-right: <?php echo esc_html( $icon_margin ); ?>px;
width: <?php echo esc_html( $icon_dimension ); ?>px;
height: <?php echo esc_html( $icon_dimension ); ?>px;
.et_pb_social_media_follow li a.icon::before{
width: <?php echo esc_html( $icon_dimension ); ?>px;
height: <?php echo esc_html( $icon_dimension ); ?>px;
font-size: <?php echo esc_html( $value ); ?>px;
line-height: <?php echo esc_html( $icon_dimension ); ?>px;
* Outputting saved customizer style(s) settings
function et_pb_print_styles_css( $settings = array() ) {
// $settings should be in array
if ( is_array( $settings ) && ! empty( $settings ) ) {
foreach ( $settings as $setting ) {
et_pb_print_css( $setting );
* Outputting saved module styles settings. DRY
function et_pb_print_module_styles_css( $section = '', $settings = array() ) {
$css = 'et_builder_maybe_wrap_css_selector';
if ( is_array( $settings ) && ! empty( $settings ) ) {
foreach ( $settings as $setting ) {
// settings must have these elements: key, selector, default, and type
if ( ! isset( $setting['key'] ) ||
! isset( $setting['selector'] ) ||
! isset( $setting['type'] ) ) {
// Some attributes such as shop requires !important tag
if ( isset( $setting['important'] ) && true === $setting['important'] ) {
$important = ' !important';
// Prepare the setting key
$key = "{$section}-{$setting['key']}";
$value = ET_Global_Settings::get_value( $key );
$default_value = ET_Global_Settings::get_value( $key, 'default' );
$selector = $css( $setting['selector'], false );
// Output CSS based on its type
if ( false !== $value && $default_value !== $value ) {
switch ( $setting['type'] ) {
printf( "%s { font-size: %spx%s; }\n", esc_html( $selector ), esc_html( $value ), $important );
// Option with specific adjustment for smaller columns
$smaller_title_sections = array(
'et_pb_audio-title_font_size',
'et_pb_blog-header_font_size',
'et_pb_cta-header_font_size',
'et_pb_contact_form-title_font_size',
'et_pb_login-header_font_size',
'et_pb_signup-header_font_size',
'et_pb_slider-header_font_size',
'et_pb_slider-body_font_size',
'et_pb_countdown_timer-header_font_size',
if ( in_array( $key, $smaller_title_sections ) ) {
case 'et_pb_slider-header_font_size':
$font_size_coefficient = .565217391; // 26/46
case 'et_pb_slider-body_font_size':
$font_size_coefficient = .777777778; // 14/16
$font_size_coefficient = .846153846; // 22/26
printf( '%1$s { font-size: %2$spx%3$s; }',
esc_html( $css( '.et_pb_column_1_3 ' . $setting['selector'], false ) ),
esc_html( $value * $font_size_coefficient ),
printf( '%1$s { font-size: %2$spx%3$s; }',
esc_html( $css( '.et_pb_column_1_4 ' . $setting['selector'], false ) ),
esc_html( $value * $font_size_coefficient ),
$value = intval( $value );
printf( $css( '.et_pb_countdown_timer .title', false ) . ' { font-size: %spx; }', esc_html( $value ) );
printf( $css( '.et_pb_column_3_8 .et_pb_countdown_timer .title', false ) . ' { font-size: %spx; }', esc_html( $value * ( 18 / 22 ) ) );
printf( $css( '.et_pb_column_1_3 .et_pb_countdown_timer .title', false ) . ' { font-size: %spx; }', esc_html( $value * ( 18 / 22 ) ) );
printf( $css( '.et_pb_column_1_4 .et_pb_countdown_timer .title', false ) . ' { font-size: %spx; }', esc_html( $value * ( 18 / 22 ) ) );
printf( "%s { %s }\n", esc_html( $selector ), et_pb_print_font_style( $value, $important ) );
printf( "%s { color: %s%s; }\n", esc_html( $selector ), esc_html( $value ), $important );
printf( "%s { background-color: %s%s; }\n", esc_html( $selector ), esc_html( $value ), $important );
printf( "%s { -moz-border-radius: %spx; -webkit-border-radius: %spx; border-radius: %spx; }\n", esc_html( $selector ), esc_html( $value ), esc_html( $value ), esc_html( $value ) );
printf( "%s { width: %spx%s; }\n", esc_html( $selector ), esc_html( $value ), $important );
printf( "%s { height: %spx%s; }\n", esc_html( $selector ), esc_html( $value ), $important );
printf( "%s { padding: %spx; }\n", esc_html( $selector ), esc_html( $value ) );
case 'padding-top-bottom':
printf( "%s { padding: %spx 0; }\n", esc_html( $selector ), esc_html( $value ) );
$padding_tab_top_bottom = intval( $value ) * 0.133333333;
$padding_tab_active_top = $padding_tab_top_bottom + 1;
$padding_tab_active_bottom = $padding_tab_top_bottom - 1;
$padding_tab_content = intval( $value ) * 0.8;
// negative result will cause layout issue
if ( $padding_tab_active_bottom < 0 ) {
$padding_tab_active_bottom = 0;
"%s { padding: %spx %spx %spx; }\n",
esc_html( $css( '.et_pb_tabs_controls li', false ) ),
esc_html( $padding_tab_active_top ),
esc_html( $padding_tab_active_bottom )
"%s { padding: %spx %spx; }\n",
esc_html( $css( '.et_pb_tabs_controls li.et_pb_tab_active', false ) ),
esc_html( $padding_tab_top_bottom ),
"%s { padding: %spx %spx; }\n",
esc_html( $css( '.et_pb_all_tabs', false ) ),
esc_html( $padding_tab_content ),
printf( "%s { padding-top: %s; padding-bottom: %s }\n", esc_html( $selector ), esc_html( $value ) . '%', esc_html( $value ) . '%' );
if ( 'et_pagebuilder_slider_padding' === $key ) {
printf( '@media only screen and ( max-width: 767px ) { %1$s { padding-top: %2$s; padding-bottom: %2$s; } }', esc_html( $selector ), '16%' );
case 'padding-call-to-action':
$value = intval( $value );
"%s { padding: %spx %spx !important; }\n",
esc_html( $css( '.et_pb_promo', false ) ),
esc_html( $value * ( 60 / 40 ) )
"%s { padding: %spx; }\n",
esc_html( $css( '.et_pb_column_1_2 .et_pb_promo', false ) ),
"%s { padding: %spx; }\n",
esc_html( $css( '.et_pb_column_1_3 .et_pb_promo', false ) ),
"%s { padding: %spx; }\n",
esc_html( $css( '.et_pb_column_1_4 .et_pb_promo', false ) ),
$icon_margin = intval( $value ) * 0.57;
$icon_dimension = intval( $value ) * 2;
<?php echo $css( '.et_pb_social_media_follow li a.icon', false ); ?> {
margin-right: <?php echo esc_html( $icon_margin ); ?>px;
width: <?php echo esc_html( $icon_dimension ); ?>px;
height: <?php echo esc_html( $icon_dimension ); ?>px;
<?php echo $css( '.et_pb_social_media_follow li a.icon::before', false ); ?> {
width: <?php echo esc_html( $icon_dimension ); ?>px;
height: <?php echo esc_html( $icon_dimension ); ?>px;
font-size: <?php echo esc_html( $value ); ?>px;
line-height: <?php echo esc_html( $icon_dimension ); ?>px;
<?php echo $css( '.et_pb_social_media_follow li a.follow_button', false ); ?> {
font-size: <?php echo esc_html( $value ); ?>px;
printf( "%s { border-top-style: %s; }\n", esc_html( $selector ), esc_html( $value ) );
printf( "%s { border-top-width: %spx; }\n", esc_html( $selector ), esc_html( $value ) );
* Outputting font-style attributes & values saved by ET_Divi_Font_Style_Option on customizer
function et_pb_print_font_style( $styles = '', $important = '' ) {
if ( '' !== $styles && false !== $styles ) {
// Convert string into array
$styles_array = explode( '|', $styles );
// If $important is in use, give it a space
if ( $important && '' !== $important ) {
$important = " " . $important;
// Use in_array to find values in strings. Otherwise, display default text
if ( in_array( 'bold', $styles_array ) ) {
$font_styles .= "font-weight: bold{$important}; ";
$font_styles .= "font-weight: normal{$important}; ";
if ( in_array( 'italic', $styles_array ) ) {
$font_styles .= "font-style: italic{$important}; ";
$font_styles .= "font-style: normal{$important}; ";
if ( in_array( 'uppercase', $styles_array ) ) {
$font_styles .= "text-transform: uppercase{$important}; ";
$font_styles .= "text-transform: none{$important}; ";
if ( in_array( 'underline', $styles_array ) ) {
$font_styles .= "text-decoration: underline{$important}; ";
$font_styles .= "text-decoration: none{$important}; ";
return esc_html( $font_styles );
* Adds color scheme class to the body tag
function et_customizer_color_scheme_class( $body_class ) {
$color_scheme = et_get_option( 'color_schemes', 'none' );
$color_scheme_prefix = 'et_color_scheme_';
if ( 'none' !== $color_scheme ) $body_class[] = $color_scheme_prefix . $color_scheme;
add_filter( 'body_class', 'et_customizer_color_scheme_class' );
* Adds button class to the body tag
function et_customizer_button_class( $body_class ) {
$button_icon_placement = et_get_option( 'all_buttons_icon_placement', 'right' );
$button_icon_on_hover = et_get_option( 'all_buttons_icon_hover', 'yes' );
$button_use_icon = et_get_option( 'all_buttons_icon', 'yes' );
$button_icon = et_get_option( 'all_buttons_selected_icon', '5' );
if ( 'left' === $button_icon_placement ) {
$body_class[] = 'et_button_left';
if ( 'no' === $button_icon_on_hover ) {
$body_class[] = 'et_button_icon_visible';
if ( 'no' === $button_use_icon ) {
$body_class[] = 'et_button_no_icon';
if ( '5' !== $button_icon ) {
$body_class[] = 'et_button_custom_icon';
$body_class[] = 'et_pb_button_helper_class';
add_filter( 'body_class', 'et_customizer_button_class' );
function et_load_google_fonts_scripts() {
$theme_version = et_get_theme_version();
wp_enqueue_script( 'et_google_fonts', get_template_directory_uri() . '/epanel/google-fonts/et_google_fonts.js', array( 'jquery' ), $theme_version, true );
wp_localize_script( 'et_google_fonts', 'et_google_fonts_data', array(
'user_fonts' => et_builder_get_custom_fonts(),
add_action( 'customize_controls_print_footer_scripts', 'et_load_google_fonts_scripts' );
function et_load_google_fonts_styles() {
$theme_version = et_get_theme_version();
wp_enqueue_style( 'et_google_fonts_style', get_template_directory_uri() . '/epanel/google-fonts/et_google_fonts.css', array(), $theme_version );
add_action( 'customize_controls_print_styles', 'et_load_google_fonts_styles' );
if ( ! function_exists( 'et_divi_post_meta' ) ) :
function et_divi_post_meta() {
$postinfo = is_single() ? et_get_option( 'divi_postinfo2' ) : et_get_option( 'divi_postinfo1' );
echo '<p class="post-meta">';
echo et_pb_postinfo_meta( $postinfo, et_get_option( 'divi_date_format', 'M j, Y' ), esc_html__( '0 comments', 'Divi' ), esc_html__( '1 comment', 'Divi' ), '% ' . esc_html__( 'comments', 'Divi' ) );
function et_video_embed_html( $video ) {
if ( is_single() && 'video' === et_pb_post_format() ) {
static $post_video_num = 0;
// Hide first video in the post content on single video post page
if ( 1 === $post_video_num ) {
return "<div class='et_post_video'>{$video}</div>";
function et_do_video_embed_html(){
add_filter( 'embed_oembed_html', 'et_video_embed_html' );
add_action( 'et_before_content', 'et_do_video_embed_html' );
* Removes galleries on single gallery posts, since we display images from all
* galleries on top of the page
function et_delete_post_gallery( $content ) {
if ( ( is_single() || is_archive() ) && is_main_query() && has_post_format( 'gallery' ) ) :
if ( et_theme_builder_overrides_layout( ET_THEME_BUILDER_BODY_LAYOUT_POST_TYPE ) ) {
// Do not remove galleries when TB has taken over.
$regex = get_shortcode_regex();
preg_match_all( "/{$regex}/s", $content, $matches );
// $matches[2] holds an array of shortcodes names in the post
foreach ( $matches[2] as $key => $shortcode_match ) {
if ( 'gallery' === $shortcode_match ) {
$content = str_replace( $matches[0][$key], '', $content );
$content = apply_filters('et_delete_post_gallery', $content, $deleted);
add_filter( 'the_content', 'et_delete_post_gallery' );
// Include GB galleries in `get_post_gallery`
add_filter( 'et_gb_gallery_include_in_get_post_gallery', '__return_true' );
function et_divi_post_admin_scripts_styles( $hook ) {
$theme_version = et_get_theme_version();
$current_screen = get_current_screen();
if ( ! in_array( $hook, array( 'post-new.php', 'post.php' ) ) ) return;
if ( ! isset( $typenow ) ) return;
if ( in_array( $typenow, array( 'post' ) ) ) {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'wp-color-picker' );
wp_enqueue_script( 'et-admin-post-script', get_template_directory_uri() . '/js/admin_post_settings.js', array( 'jquery' ), $theme_version );
add_action( 'admin_enqueue_scripts', 'et_divi_post_admin_scripts_styles' );
function et_password_form() {
'<div class="et_password_protected_form">
<form action="%3$s" method="post">
<p><label for="%4$s">%5$s: </label><input name="post_password" id="%4$s" type="password" size="20" maxlength="20" /></p>
<p><button type="submit" name="et_divi_submit_button" class="et_submit_button et_pb_button">%6$s</button></p>
esc_html__( 'Password Protected', 'Divi' ),
esc_html__( 'To view this protected post, enter the password below', 'Divi' ),
esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ),
esc_attr( 'pwbox-' . $pwbox_id ),
esc_html__( 'Password', 'Divi' ),
esc_html__( 'Submit', 'Divi' )
'<div class="et_pb_section et_section_regular">
<div class="et_pb_column et_pb_column_4_4">