How to Control CSS of a Divi Element Using a Custom Field

I had a situation where I wanted to be able to set the background color of a custom post type when displayed as a feed or archive page in Divi. Each post could be a different color as chosen by a custom field of that post.

I was using the Divi Machine plugin from Divi Engine to accomplish the custom feed elements. With that plugin, you can define your own archive feed post templates using the Divi Library.

The Solution

After searching around, I found a code snippet from Divi Booster that enables dynamic data in any Divi Section, Row, or Module’s CSS Class and ID fields! With that, I could create a select custom field in each post with a choice of colors, then assign that custom field to the CSS Class field of the Section (or Row/Module). As long as the class was defined properly, it would set the background color of that post!

Here’s the code:

add_filter('et_builder_module_general_fields', 'db_enable_dynamic_content_on_css_fields', 10);
function db_enable_dynamic_content_on_css_fields($fields) {
    // Enable dynamic content on CSS ID field
    if (isset($fields['module_id']) && is_array($fields['module_id'])) {
        $fields['module_id']['dynamic_content'] = 'text';
    }
    // Enable dynamic content on CSS Class field
    if (isset($fields['module_class']) && is_array($fields['module_class'])) {
        $fields['module_class']['dynamic_content'] = 'text';
    }
    return $fields;
}

Just add this to your site using a code snippet plugin or functions.php in your child theme and you’re ready to go!

You can now control a Divi element’s CSS class using a custom field!

Conclusion

The only thing I’m wondering is why Divi didn’t enable this by default, especially since it’s only a few lines of code to unlock such a powerful feature.

Anyway, this is working great for me. I hope it’s helpful to you. Leave your comments or questions below. – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com