This guide is a technical reference for developers working with Charitable’s Divi integration. Divi integration was introduced in Charitable Pro 1.8.12.

Visión general

The Charitable Divi integration provides four custom modules for the Divi Builder. The integration uses Divi’s legacy ET_Builder_Module API for maximum compatibility with both Divi 4 and Divi 5.

Architecture

The integration follows a similar pattern to Charitable’s Elementor and WPBakery integrations:

• Main Integration Class: Singleton pattern, handles detection and module registration
• Module Classes: Each module extends ET_Builder_Module
• Shortcode-Based Rendering: Modules leverage existing Charitable shortcodes for output
• Computed Fields: Used for Visual Builder live previews via AJAX

Divi 4 vs Divi 5 Compatibility

The integration is built on Divi’s legacy module API (ET_Builder_Module) rather than the newer Divi 5 ModuleRegistration system. This approach was chosen for:

• Backward Compatibility: Works with both Divi 4 and Divi 5
• Stability: Uses a well-documented, proven API
• Simplicity: Leverages existing shortcode infrastructure

The integration has been tested with:

• Divi Theme 4.x
• Divi Theme 5.x
• Divi Builder Plugin (standalone)
• Extra Theme

Disabling the Integration

To completely disable the Divi integration, add this constant to wp-config.php:

define( ‘CHARITABLE_DISABLE_DIVI_INTEGRATION’, true );

This prevents the integration from loading entirely, which can be useful for:

• Troubleshooting conflicts
• Sites not using Divi
• Custom implementations

Module Slugs

Module	Slug	Shortcode Used
Campaña	charitable_campaign	[campaign id=”X”]
Campañas	charitable_campaigns	[campaigns …]
Formulario de Donación	charitable_donation_form	[charitable_donation_form …]
Botón de Donar	charitable_donate_button	[charitable_donate_button …]

Hooks and Filters

Acciones

Module Registration

// Modules are registered on this Divi hook

add_action( ‘et_builder_ready’, [ $this, ‘register_modules’ ] );

Cache Clearing

// Campaign options cache is cleared when campaigns change

add_action( ‘save_post_campaign’, [ $this, ‘clear_campaign_options_cache’ ] );

add_action( ‘delete_post’, [ $this, ‘clear_campaign_options_cache’ ] );

add_action( ‘wp_trash_post’, [ $this, ‘clear_campaign_options_cache’ ] );

Filtros

Module Categories

// Custom category registration

add_filter( ‘et_builder_categories’, [ $this, ‘register_module_category’ ] );

Caching

The integration caches campaign dropdown options to improve performance:

• Transient Key: charitable_divi_campaign_options
• Duration: 1 hour (HOUR_IN_SECONDS)
• Auto-cleared: When campaigns are saved, deleted, or trashed

To manually clear the cache:

delete_transient( ‘charitable_divi_campaign_options’ );

Visual Builder Considerations

Preview Mode

The Donation Form module displays a placeholder in the Visual Builder instead of the actual form. This is intentional because:

1. Forms require JavaScript that may conflict with the builder
2. Form submissions in preview mode could cause issues
3. Performance is improved with static placeholders

The actual form renders correctly on the frontend.

AJAX Data Attributes

The Campaigns shortcode normally outputs data-shortcode-atts for AJAX pagination. In the Visual Builder context, this is stripped to prevent display issues. The integration detects the VB context and adds a preview=”1″ attribute to the shortcode.

Computed Fields

Each module uses Divi’s computed fields system for live previews:

‘__campaign_preview’ => [

    ‘type’                => ‘computed’,

    ‘computed_callback’   => [ ‘Charitable_Divi_Campaign_Module’, ‘get_campaign_preview’ ],

    ‘computed_depends_on’ => [

        ‘campaign_id’,

    ],

],

When a user changes a setting in the Visual Builder, Divi calls the computed callback via AJAX to refresh the preview.

CSS Selectors

Module Container Classes

Module	Container Class
Campaña	.et_pb_charitable_campaign
Campañas	.et_pb_charitable_campaigns
Formulario de Donación	.et_pb_charitable_donation_form
Botón de Donar	.et_pb_charitable_donate_button

Common Element Selectors

/* Campaign titles */

.et_pb_charitable_campaign .campaign-title,

.et_pb_charitable_campaigns .campaign-title { }

/* Progress bars */

.campaign-progress,

.progress-bar { }

/* Donate buttons */

.donate-button,

.charitable-button { }

/* Form fields */

.charitable-donation-form input[type=”text”],

.charitable-donation-form select { }

Debugging

Enable WordPress Debug Mode

// wp-config.php

define( ‘WP_DEBUG’, true );

define( ‘WP_DEBUG_LOG’, true );

Common Issues

Modules not appearing in builder:

• Verify Divi theme/plugin is active: function_exists( ‘et_setup_theme’ )
• Check that Charitable is fully loaded before Divi initializes
• Look for PHP errors in wp-content/debug.log

Styling not applying:

• Clear Divi’s static CSS cache: Divi → Theme Options → Builder → Advanced → Static CSS File Generation
• Check CSS specificity; Divi uses high specificity selectors
• The integration uses !important on advanced field CSS for this reason

Campaign dropdown empty:

• Ensure campaigns exist with “Published” status
• Check if the transient cache needs clearing
• Verify post_type_exists( ‘campaign’ ) returns true

Preview not updating:

• Check browser console for JavaScript errors
• Verify AJAX requests are completing (Network tab)
• Ensure computed_depends_on includes the field being changed

Detection Methods

The integration uses multiple methods to detect Divi:

// Check for Divi Builder plugin

class_exists( ‘ET_Builder_Plugin’ )

// Check for Divi functions

function_exists( ‘et_setup_theme’ )

function_exists( ‘et_builder_should_load_all_module_data’ )

// Check for Divi/Extra theme

in_array( get_template(), [ ‘Divi’, ‘Extra’ ] )

Visual Builder Detection

// Frontend Visual Builder

isset( $_GET[‘et_fb’] )

// Backend builder

isset( $_GET[‘et_pb_preview’] )

// AJAX context (for preview rendering)

defined( ‘DOING_AJAX’ ) && DOING_AJAX

Extending the Integration

Adding Custom Fields to a Module

To add fields to an existing module via a child theme or plugin, you would need to extend the module class:

class My_Custom_Campaign_Module extends Charitable_Divi_Campaign_Module {

    public function get_fields() {

        $fields = parent::get_fields();

        // Add custom field

        $fields[‘custom_field’] = [

            ‘label’           => ‘My Custom Field’,

            ‘type’            => ‘text’,

            ‘option_category’ => ‘basic_option’,

            ‘toggle_slug’     => ‘main_content’,

        ];

        return $fields;

    }

}

Note: This requires re-registering the module, which is an advanced customization.

Custom Module Category Icon

The Charitable category icon is set via CSS injection rather than Divi’s icon property (which doesn’t support custom SVGs for categories):

li.charitable.et_pb_folder::before {

    content: ” !important;

    background-image: url(‘path/to/icon.svg’) !important;

    background-size: contain !important;

}

Version History

Version	Changes
1.8.12	Initial Divi integration release

Soporte

For issues specific to the Divi integration:

1. Check this documentation for known solutions
2. Enable WP_DEBUG and check for errors
3. Test with a default Divi layout to rule out theme conflicts
4. Contact Charitable support with debug information