Divi CSS code snippets

The Divi theme is a popular WordPress theme that allows users to create custom designs using a visual builder. However, there may be times when you want to add custom CSS code snippets to further customize your Divi website. In this case, you can use the wp_add_inline_style() function to add CSS code snippets to your Divi theme.

Here’s an example of how you can add a CSS code snippet to your Divi theme using the wp_add_inline_style() function:

function wpsnippets_add_custom_css() {
    $custom_css = "
        /* Add your custom CSS code here */
        body {
            background-color: #f1f1f1;
        }
    ";

    wp_add_inline_style( 'divi-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_custom_css' );

In this example, we define a custom CSS code snippet within the $custom_css variable. You can add your own CSS code within the double quotes. Then, we use the wp_add_inline_style() function to add the custom CSS code to the ‘divi-style’ stylesheet. The wp_enqueue_scripts action hook ensures that the custom CSS is added to the page.

This code snippet can be useful when you want to add specific CSS styles to your Divi theme without modifying the theme files directly. It allows you to maintain the flexibility of the Divi theme while still adding your own customizations.

Examples

Example 1: Adding Custom CSS to a Divi Theme

This use case demonstrates how to add custom CSS code snippets to a Divi theme using the wp_enqueue_style function.

function wpsnippets_add_custom_css() {
    wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_custom_css' );

The code snippet above adds a custom CSS file called “custom.css” to the Divi theme. The wp_enqueue_style function is used to enqueue the CSS file, and the get_stylesheet_directory_uri function is used to retrieve the URL of the current theme’s directory.

Example 2: Adding Inline CSS to a Divi Module

This use case demonstrates how to add inline CSS code snippets to a specific Divi module using the et_pb_module_shortcode_atts filter.

function wpsnippets_add_inline_css( $atts, $shortcode ) {
    if ( 'et_pb_blurb' === $shortcode ) {
        $atts['module_class'] .= ' custom-class';
        $atts['module_id'] .= ' custom-id';
    }
    return $atts;
}
add_filter( 'et_pb_module_shortcode_atts', 'wpsnippets_add_inline_css', 10, 2 );

The code snippet above adds a custom CSS class and ID to the Divi Blurb module. The et_pb_module_shortcode_atts filter is used to modify the module’s attributes, and the $atts parameter contains the current attributes of the module.

Example 3: Modifying Divi Theme CSS

This use case demonstrates how to modify the CSS of the Divi theme using the wp_add_inline_style function.

function wpsnippets_modify_divi_css() {
    $custom_css = "
        .et_pb_section {
            background-color: #f0f0f0;
        }
    ";
    wp_add_inline_style( 'divi-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_modify_divi_css' );

The code snippet above modifies the background color of all Divi sections to #f0f0f0. The wp_add_inline_style function is used to add the custom CSS code to the Divi theme’s main stylesheet. The ‘divi-style’ parameter is the handle of the main stylesheet.