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
This guide is a reference for using and extending Charitable’s Divi integration. The Divi integration was introduced in Charitable Pro 1.8.12 and rebuilt with native Divi 5 modules in the 1.8.16 series.
Charitable adds its own module category to the Divi Builder so you can drop campaigns, donation forms, donate buttons, and several fundraising widgets straight onto a Divi layout, with full Divi design controls and live preview in the Visual Builder.
Architecture
The integration ships two parallel sets of modules:
- Native Divi 5 modules (
includes/divi/d5-modules/) implement Divi 5’sDependencyInterfaceand register throughModuleRegistration. They render and live-preview natively inside the Divi 5 Visual Builder canvas, with no “Legacy” badge. - Legacy Divi 4 modules (
includes/divi/modules/) extendET_Builder_Module. They are used on Divi 4 sites and remain available on Divi 5 for backward compatibility.
On a Divi 5 site, Charitable registers the native Divi 5 modules and skips registering the legacy modules, so each module appears only once in the picker. On a Divi 4 site, the legacy modules are used. Layouts saved with Divi 4 modules auto-migrate to the matching native Divi 5 module with no visual drift.
Divi 4 vs Divi 5 Compatibility
Charitable supports both Divi 4.x and Divi 5.x.
| Divi 4 | Divi 5 | |
|---|---|---|
| Module API | ET_Builder_Module (legacy) | DependencyInterface / ModuleRegistration (native) |
| Modules available | The original 4 | All 9 |
| Visual Builder preview | Standard | Live, through Divi’s React Style API |
| Saved Divi 4 layouts | Render as-is | Auto-migrate to native Divi 5 modules |
Important: the four original modules (Donate Button, Donation Form, Campaign, Campaigns) are available on both Divi 4 and Divi 5. The five additional modules (Campaign Showcase, Donation Feed, Campaign Countdown, Mini Donation Widget, Donor Leaderboard) are Divi 5 only native modules. On a Divi 4 site, use the matching Gutenberg block or shortcode instead.
Available Modules
Open the Divi Builder and look for the Charitable module category. The following modules are available.
Core modules (Divi 4 and Divi 5)
Charitable Donate Button A donate button or text link for a specific campaign. Options include the campaign, button label, display type (button or link), alignment, and open in a new tab, plus the full set of Divi design controls.
Charitable Donation Form An embedded donation form for a campaign. Choose the campaign and the form type (Full or Minimal), then style the content, amount buttons, donate button, accents, and typography with Divi design controls.
Charitable Campaign A single campaign with its title, description, fundraising progress, and donate action. Select the campaign and style every element through Divi.
Charitable Campaigns A grid or list of multiple campaigns. Controls cover how many campaigns to show, ordering, category and creator filtering, columns, and per-card styling.
Additional modules (Divi 5 only)
Charitable Campaign Showcase A browsable showcase of campaigns with built-in browse controls (AJAX filtering and search), display options, and a configurable query loop. Useful when you want visitors to explore many campaigns on one page. Setting groups: Loop, Display, Browse Controls.
Charitable Donation Feed A live feed of recent donations in a list or card layout, with query loop controls, display options, behavior settings (such as pagination and live polling), and typography and color controls. Great for social proof. Setting groups: Loop, Display, Behavior, Typography & Colors.
Charitable Campaign Countdown A countdown timer to a campaign’s end date, rendered as days, hours, minutes, and seconds. Choose which time units to show, set the content and colors, and enable an end-date celebration effect. Setting groups: Content, Time Units, Countdown Colors, Behavior.
Charitable Mini Donation Widget A compact donation widget you can place anywhere. Set one-time and optional monthly amount presets with a default, customize the call-to-action button, and style the widget appearance and container, including background color and border. On submit it can redirect to the donation page or open a modal. Setting groups: Content, Amount Presets, Call To Action, Widget Appearance, Container, Typography.
Charitable Donor Leaderboard A leaderboard of top donors. Configure the header, the query loop and scope (per campaign or site-wide), who is included, the card or row layout, podium colors, and display options. Setting groups: Header, Loop / Scope, Inclusion, Cards / Rows, Podium Colors, Display.
The five Divi 5 modules reuse the same server-side renderers as their matching Gutenberg blocks, so output is identical whether you build with Divi or the block editor.
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
Native Divi 5 module names (registered through ModuleRegistration):
| Module | Divi 5 module name | Backed by |
|---|---|---|
| Charitable Donate Button | charitable/donate-button | [charitable_donate_button] |
| Charitable Donation Form | charitable/donation-form | [charitable_donation_form] |
| Charitable Campaign | charitable/campaign | [campaign] |
| Charitable Campaigns | charitable/campaigns | [campaigns] |
| Charitable Campaign Showcase | charitable/divi-campaign-showcase | charitable/campaign-showcaseblock render |
| Charitable Donation Feed | charitable/divi-donations-feed | [charitable_donations_feed] / block render |
| Charitable Campaign Countdown | charitable/divi-campaign-countdown | [charitable_campaign_countdown]/ block render |
| Charitable Mini Donation Widget | charitable/divi-mini-donation-widget | [charitable_mini_widget] / block render |
| Charitable Donor Leaderboard | charitable/divi-donor-leaderboard | [charitable_donor_leaderboard] / block render |
Legacy Divi 4 module slugs (extend ET_Builder_Module):
| Module | Divi 4 slug |
|---|---|
| Charitable Donate Button | charitable_donate_button |
| Charitable Donation Form | charitable_donation_form |
| Charitable Campaign | charitable_campaign |
| Charitable Campaigns | charitable_campaigns |
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
- 1.8.16 series: Rebuilt the integration with native Divi 5 modules. The Donate Button, Donation Form, Campaign, and Campaigns modules became native Divi 5 modules (no more “Legacy” badge), with full Divi 5 design controls, campaign selection, Full/Minimal form types, and auto-migration of saved Divi 4 shortcodes. Added five Divi 5 only modules: Campaign Showcase, Donation Feed, Campaign Countdown, Mini Donation Widget, and Donor Leaderboard. Visual Builder canvas now live-previews every Divi design control through Divi’s React Style API.
- 1.8.12: Divi Page Builder integration introduced with native Charitable modules for campaigns, donation forms, and buttons (Divi 4 legacy module API).
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
