Developer Documentation

Back To Developer Documentation

Divi Builder Javascript Hooks

Learn about the Javascript hooks that are available in Divi Builder features.

Layout

{module_type}.css.selector

Filters module selector on the rendered layout. This filter is fired before selector processing. Third-party extensions may use this filter to modify module CSS selector such as removing builder selector prefix, append child element class, etc.

Type: Filter
Since: 4.0.0

Param Type Description
selector string Module selector.
type string Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});

 

{module_type}.processed.css.selector

Filters processed module selector on the rendered layout. This filter is fired after selector processing. Third-party extensions may use this filter to modify module CSS selector such as removing builder selector prefix, append child element class, etc.

Type: Filter
Since: 4.17.6

Param Type Description
selector string Processed module selector.
type string Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.processed.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});
👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today