This guide is a technical reference for developers working with Charitable’s Divi integration. Divi integration was introduced in Charitable Pro 1.8.12.
Overview
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 |
|---|---|---|
| Campaign | charitable_campaign | [campaign id=”X”] |
| Campaigns | charitable_campaigns | [campaigns …] |
| Donation Form | charitable_donation_form | [charitable_donation_form …] |
| Donate Button | charitable_donate_button | [charitable_donate_button …] |
Hooks and Filters
Actions
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’ ] );
Filters
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:
- Forms require JavaScript that may conflict with the builder
- Form submissions in preview mode could cause issues
- 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 |
|---|---|
| Campaign | .et_pb_charitable_campaign |
| Campaigns | .et_pb_charitable_campaigns |
| Donation Form | .et_pb_charitable_donation_form |
| Donate Button | .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 |
Support
For issues specific to the Divi integration:
- Check this documentation for known solutions
- Enable WP_DEBUG and check for errors
- Test with a default Divi layout to rule out theme conflicts
- Contact Charitable support with debug information
