Divi text color customization

The code snippet provided below demonstrates how to customize the text color in the Divi theme using the WordPress Customizer. This functionality can be useful when you want to give users the ability to customize the appearance of their website without directly modifying the theme files.

To achieve this functionality, you can add the following code to your theme’s functions.php file or in a custom plugin:

function wpsnippets_customize_divi_text_color( $wp_customize ) {
    // Add a new section for Divi text color customization
    $wp_customize->add_section( 'divi_text_color', array(
        'title'    => __( 'Divi Text Color', 'text-domain' ),
        'priority' => 30,
    ) );

    // Add a setting for Divi text color
    $wp_customize->add_setting( 'divi_text_color_setting', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    // Add a control for Divi text color
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'divi_text_color_control', array(
        'label'    => __( 'Text Color', 'text-domain' ),
        'section'  => 'divi_text_color',
        'settings' => 'divi_text_color_setting',
    ) ) );
}
add_action( 'customize_register', 'wpsnippets_customize_divi_text_color' );

This code adds a new section in the WordPress Customizer called “Divi Text Color” and a setting for the text color. It also adds a control for the text color, which is displayed as a color picker in the Customizer interface.

To retrieve the value of the text color setting in your theme files, you can use the get_theme_mod() function like this:

$text_color = get_theme_mod( 'divi_text_color_setting', '#000000' );

You can then apply the retrieved text color value to the desired elements on your website using CSS.

Note: Replace 'text-domain' with your theme’s text domain. The default text color is set to #000000 (black), but you can change it to any valid color value.

By providing this customization option, you allow users to easily personalize the appearance of their Divi-powered website by choosing their preferred text color.

Examples

Example 1: Change Text Color of a Divi Module

This example demonstrates how to customize the text color of a specific Divi module using CSS.

/* Add custom CSS to change text color of a specific Divi module */
.wpsnippets_custom_text_color {
    color: #ff0000;
}

Explanation: This code adds a custom CSS class .wpsnippets_custom_text_color that can be applied to any Divi module. The color property is set to #ff0000, which represents the color red. By applying this class to a Divi module, the text color will be changed to red.

Example 2: Change Text Color of All Divi Modules

This example demonstrates how to change the text color of all Divi modules on a WordPress website using CSS.

/* Add custom CSS to change text color of all Divi modules */
.et_pb_module {
    color: #0000ff;
}

Explanation: This code targets all Divi modules on a WordPress website by selecting the .et_pb_module class. The color property is set to #0000ff, which represents the color blue. By applying this CSS, the text color of all Divi modules will be changed to blue.

Example 3: Change Text Color of Divi Theme Builder Template

This example demonstrates how to change the text color of a Divi Theme Builder template using CSS.

/* Add custom CSS to change text color of a Divi Theme Builder template */
.wpsnippets_custom_template .et_pb_module {
    color: #00ff00;
}

Explanation: This code targets a specific Divi Theme Builder template by using a custom CSS class .wpsnippets_custom_template. The .et_pb_module class is used to select all Divi modules within the template. The color property is set to #00ff00, which represents the color green. By applying this CSS to the template, the text color of all Divi modules within the template will be changed to green.