The Modal Donate Button (also referred to as Campaign Modal Button) lets you place a button that opens a donation form in a modal popup-or links directly to the campaign donation page-anywhere on your site. It is available as both a WordPress block and a shortcode, and is part of Charitable’s Universal Modal Donation System.

Inhaltsverzeichnis

• Voraussetzungen
• Erste Schritte
• Block (Editor)
• Shortcode
• How the Modal Works
• Campaign Selector in the Modal
• Troubleshooting
• Developer Resources

Voraussetzungen

• Charitable Pro: Version 1.8.13 oder höher
• WordPress: Version 6.2 or higher
• PHP: Version 7.4 or higher

Erste Schritte

Block: Edit a page or post in the Block Editor → add block → search for Modal Donate Button or Charitable → insert the block → choose a campaign and configure the button in the sidebar.

Shortcode: Use [charitable_modal_button campaign_id="123"] in any post, page, or widget. Replace 123 with your campaign ID. You can add optional attributes for button text and CSS classes (see Shortcode).

Key Benefits

• Place anywhere: Buttons in sidebars, footers, campaign grids (e.g. Campaign Showcase), or inline content.
• Modal or link: Block lets you choose “Modal Popup” (donation form in a popup) or “Link to Donation Page” (normal link). Shortcode is modal-only.
• No page reload: In modal mode, the form loads via AJAX and opens in an overlay; donors stay on the same page until they submit or close.
• Campaign Selector control: When Campaign Selector is enabled globally, you can hide it for a specific button so the modal shows only the chosen campaign.

Block (Editor)

The block is registered as Modal Donate Button (charitable/modal-donate-button) under the Widgets category.

Block settings (sidebar)

Einstellungen

• Campaign – Required. Select the campaign this button will use for donations.
• Button Text – Label on the button (default: “Donate Now”).
• Button Action
  • Modal Popup – Click opens the donation form in a modal (default).
  • Link to Donation Page – Click goes to the campaign’s donation page.
• Open in New Tab – Only when Button Action is “Link to Donation Page.” Opens the donation page in a new tab.
• Hide Campaign Selector – Only when Button Action is “Modal Popup.” When enabled, the campaign selector dropdown is hidden in this modal even if it’s enabled in Charitable settings.

Colors

• Background – Button background color.
• Text – Button text color.
• Border – Button border color.

Hover

• Background – Button background on hover.
• Text – Button text color on hover.

Size & Spacing

• Button Width – e.g. auto, 100%, 200px.
• Font Size – e.g. 16px, 1.2em.
• Border Radius – e.g. 4px, 25px.
• Horizontal Padding – e.g. 24px, 2em.
• Vertical Padding – e.g. 12px, 1em.

Advanced

• Custom CSS Class – Extra class(es) on the button element.
• Modal CSS Class – Only when Button Action is “Modal Popup.” Extra class(es) on the modal container (default modal class is charitable-universal-modal).

The editor shows a preview of the button and the selected campaign name. On the frontend, the block outputs the same behavior as the shortcode (in modal mode) or a styled link (in link mode).

Shortcode

Shortcode name: charitable_modal_button

Required attribute

• campaign_id – The campaign ID. The button will open the donation form for this campaign in a modal.

Optional attributes

Attribute	Beschreibung	Standard
text	Button label.	“Donate Now”
class	Additional CSS class(es) for the button.	–
modal_class	Additional CSS class(es) for the modal container.	–

Examples

[charitable_modal_button campaign_id="42"]

[charitable_modal_button campaign_id="42" text="Give to this campaign"]

[charitable_modal_button campaign_id="42" class="my-donate-btn" modal_class="my-modal"]

Note: The shortcode always opens the donation form in a modal. To link to the donation page instead, use the block with Button Action set to “Link to Donation Page,” or use the standard donate link/shortcode (e.g. [charitable_donate_button] with the appropriate campaign and link behavior).

How the Modal Works

1. Trigger: The button has the class charitable-modal-trigger and a data-campaign-id attribute. The Universal Modal script listens for clicks on this class.
2. Load: On click, the script loads the donation form via AJAX for the given campaign and injects it into the modal overlay.
3. Display: The modal opens (using the same overlay and structure as Charitable’s existing modals). Donors can complete the form or close the modal.
4. Campaign Selector: If the Campaign Selector feature is enabled in Charitable settings and not overridden by the button (see below), the form can show a dropdown to switch campaigns. Individual buttons can force-hide it with the block’s “Hide Campaign Selector” option or by passing data-hide-campaign-selector when building the button in code.

The modal uses the Universal Modal Donation System (Charitable Pro 1.8.13+), so it works consistently whether the button is from the block, the shortcode, or from other features (e.g. quick-donate buttons in the Campaign Showcase block).

Campaign Selector in the Modal

• Global setting: Charitable Settings → General → Donation Form → Campaign Selector. When enabled, donation forms can show a “Choose a Campaign” dropdown.
• Per-button override (block only): In the Modal Donate Button block, when Button Action is “Modal Popup,” enable Hide Campaign Selector to hide that dropdown for this button’s modal. Useful when the button is for a single campaign and you don’t want the selector in the popup.
• Shortcode: The shortcode does not expose a “hide campaign selector” attribute. To hide it for a shortcode button, you would need to add a custom CSS class and use JavaScript to set data-hide-campaign-selector on the trigger, or use the filter charitable_modal_donate_button_html to add the data attribute.

Troubleshooting

Button does nothing when clicked

• Confirm the campaign ID is valid and the campaign is published.
• Ensure the Universal Modal script is loaded (no script errors or aggressive removal of Charitable scripts on that page).
• Check the browser console for JavaScript errors when clicking the button.

Modal doesn’t open or form doesn’t load

• Verify you’re on Charitable Pro 1.8.13+ and that no plugin/theme is blocking charitable-universal-modal or the AJAX request that loads the form.
• Test with a default theme and other plugins disabled to rule out conflicts.
• Ensure the campaign can receive donations (e.g. not ended, not fully funded if that blocks donations).

Button looks wrong or styling is missing

• Use the block’s Colors, Size & Spacing, and Advanced (custom class) options to adjust appearance.
• For the shortcode, add a class and style that class in your theme or custom CSS. The trigger uses the class charitable-modal-trigger plus any classes you pass.

“Link to Donation Page” not available

• That option exists only on the block. The shortcode [charitable_modal_button] is modal-only. For a simple link to the donation page, use the block with Button Action = “Link to Donation Page” or your theme’s/plugin’s donate link for that campaign.

Developer Resources

PHP

• Template function: charitable_get_modal_donate_button( $campaign_id, $args ) – Returns the button HTML. Used by the shortcode and block.
• Echo helper: charitable_modal_donate_button( $campaign_id, $args ) – Echoes the same HTML.

Arguments for charitable_get_modal_donate_button:

Schlüssel	Typ	Standard	Beschreibung
text	Zeichenkette	“Donate Now”	Button label.
class	Zeichenkette	charitable-modal-trigger	CSS class(es) for the button.
modal_class	Zeichenkette	charitable-universal-modal	CSS class for the modal container.
button_tag	Zeichenkette	Schaltfläche	button or a.
style	Zeichenkette	''	Inline style string for the button.
hide_campaign_selector	bool	false	When true, adds data-hide-campaign-selector="1"so the modal hides the campaign selector.

Filter

• charitablemodaldonatebuttonshortcode_output – Filter the shortcode output. Parameters: $output, $args.
• charitablemodaldonatebuttonhtml – Filter the button HTML from charitable_get_modal_donate_button. Parameters: $button_html, $campaign_id, $args.

CSS / HTML

• Button: The trigger has class charitable-modal-trigger and attributes data-campaign-id, optionally data-modal-class, data-hide-campaign-selector.
• Block wrapper: .wp-block-charitable-modal-donate-button.
• Modal: The overlay and modal container are created by the Universal Modal script; the modal uses the class you pass (e.g. charitable-universal-modal).

Version history

Version	Changes
1.8.13	Modal Donate Button block and shortcode; Universal Modal Donation System; block supports Modal Popup vs Link, styling, Hide Campaign Selector; charitable_get_modal_donate_button gains style and hide_campaign_selector.

---

For global donation form and Campaign Selector settings, see Campaign Selector. For embedding full donation forms (not in a modal), see the donation form and campaign shortcode documentation.