Charitable Documentation

Learn how to make the most of Charitable with clear, step-by-step instructions.

Campaign Featured Image For Visual Campaigns

The Featured Image setting for visual campaigns lets you assign a dedicated thumbnail image to each campaign from the campaign builder. This image is used as the campaign thumbnail in campaign lists, shortcodes, and social sharing, and overrides the first photo in your campaign layout when one is set. It is available starting in the Charitable Pro 1.8.13+ plugin.

Table of Contents

Getting Started

The Featured Image is a campaign-level setting in the Charitable Pro campaign builder. When you set a featured image for a campaign, it becomes the primary image shown whenever that campaign appears in grids, lists, shortcodes (e.g. [campaigns]), and when the campaign is shared on social platforms. If you do not set a featured image, Charitable falls back to the first photo in your campaign layout (if any) or the WordPress post thumbnail for legacy campaigns.

Key Benefits

  • Single place to set the campaign thumbnail — No need to rely on layout order; set one image that represents the campaign everywhere.
  • Better control for social sharing — Use an image optimized for social (e.g. 1200 × 630px) so shares look consistent.
  • Accessibility and SEO — Dedicated alt text field for screen readers and search engines.
  • Consistent branding — Same image across campaign loops, shortcodes, and integrations (e.g. Divi, Elementor).

Requirements

  • WordPress: 6.2 or higher
  • PHP: 7.4 or higher
  • Charitable Pro: 1.8.13 or higher

The Featured Image setting is available only for campaigns edited in the campaign builder (non-legacy campaigns).

Where to Find It

  1. In WordPress Admin, go to Charitable → Campaigns (or Campaign Builder).
  2. Open or create a campaign in the campaign builder.
  3. In the left sidebar, click Settings.
  4. In the Settings submenu, click Featured Image (below Donation Options).

The Featured Image panel appears in the main content area.

Configuration Options

Image Upload

  • Click to upload or select an image — Use the dropzone to open the Media Library or upload a new image. You can also use Replace on an existing preview to choose a different image, or Remove / Remove Image to clear it.
  • Image URL — The selected image URL is stored; the uploader field may be hidden by design but is used for saving.
  • Upload Image — Alternative button to open the media picker.

Recommended Dimensions

  • 1200 × 630px — Recommended for optimal display in campaign grids and social sharing (e.g. Open Graph). Other sizes work but may be cropped or scaled depending on your theme and social platforms.

Alt Text

  • Purpose: Alternative text for screen readers and SEO.
  • Placeholder: “Describe this image for accessibility.”
  • Behavior: If you leave alt text empty and the image is from the Media Library, Charitable can auto-populate from the attachment’s alt text when available.

Where the Featured Image Is Used

When set, the featured image is used as the campaign’s thumbnail in:

  • Campaign lists and grids — e.g. campaign archive and shortcodes like [campaigns].
  • Campaign loop template — The campaign-loop/thumbnail.php template shows the WordPress post thumbnail when set. When the campaign builder Featured Image is synced to the post thumbnail on save, it appears here.
  • Shortcodes — Any shortcode that displays campaign thumbnails (e.g. campaigns grid, campaign block).
  • Social sharing — When your theme or plugins use the campaign’s featured/thumbnail image for Open Graph or similar meta tags.
  • Page builders — Divi and other integrations that display campaign images use the same thumbnail source (e.g. .campaign-thumbnail.campaign-featured-image img).

If no featured image is set, Charitable falls back to the first photo in the campaign layout, or the legacy WordPress featured image for older campaigns.

Troubleshooting

Featured Image not showing on the frontend

  • Save the campaign — Click Save in the campaign builder after setting or changing the featured image.
  • Check campaign type — The setting applies to campaigns edited in the campaign builder. Legacy campaigns use the standard WordPress “Featured Image” in the editor.
  • Cache — Clear any site or page cache so the updated thumbnail is visible.
  • Theme overrides — If your theme overrides charitable/campaign-loop/thumbnail.php, ensure it uses the campaign’s thumbnail (e.g. get_post_thumbnail_id() or equivalent).

Image looks cropped or low quality

  • Use an image that is at least 1200 × 630px for grids and social sharing.
  • Upload a high-enough resolution for the sizes your theme and shortcodes use (e.g. “medium”, “large”).

Alt text not saving

  • Ensure you click Save after editing the campaign. Alt text is stored with the campaign settings and (when applicable) can be synced from the media attachment if left empty.

Developer Resources

Stored data

  • Featured image data is stored in the campaign’s campaign_settings_v2 post meta under settings['featured-image']:
    • featured_image_id — WordPress attachment ID.
    • featured_image_url — Image URL.
    • featured_image_alt — Alt text.
  • To display in the campaign loop, the featured image attachment ID can be synced to the post’s _thumbnail_id when the campaign is saved (e.g. via the charitable_campaign_builder_save_campaign_settings filter or charitable_builder_save_campaign action). Then get_post_thumbnail_id( $campaign_id ) and has_post_thumbnail( $campaign_id ) will reflect the campaign featured image.

Template override

  • To customize the campaign thumbnail output, override the template in your theme:
    • Copy wp-content/plugins/charitable-pro/templates/campaign-loop/thumbnail.php
    • to your theme: your-theme/charitable/campaign-loop/thumbnail.php.

Hooks and filters

  • Settings panel registration — The Featured Image panel is added to the campaign builder Settings sidebar via:
    • Filter: charitable_builder_panels_settings_ (panel slug: featured-image).
  • Panel file path — Filter: charitable_builder_panels_settings_file (used to load the Pro panel class).
  • Thumbnail display — Filter: charitable_campaign_loop_thumbnail_size to change the image size used in the campaign loop.
  • Force featured thumbnail — Filter: charitable_campaign_loop_featured_thumbnail to force use of the featured/thumbnail image in specific contexts.

CSS classes (campaign builder admin)

  • Panel section: .charitable-panel-content-section-featured-image
  • Preview card: .charitable-featured-image-card
  • Dropzone: .charitable-featured-image-dropzone
  • Overlay actions: .charitable-featured-image-overlay.charitable-featured-image-overlay-replace.charitable-featured-image-overlay-remove

For additional support with the Featured Image setting, please visit our support documentation or contact our team.

Still have questions? We’re here to help!

Last Modified:

What's New In Charitable

🔔 Subscribe to get our latest updates
📧 Subscribe to Emails

Email Subscription

Join our Newsletter

We won’t spam you. We only send an email when we think it will genuinely help you. Unsubscribe at any time!

donation form Donations New

💵 Mini Donation Widget: Show The Impact Of Every Dollar!

Not every donor who wants to give will navigate to your campaign page. Meet them exactly where they are by placing a fully functional giving experience directly on any page or post.

💬 Show the impact of every dollar: Attach custom messages to each preset amount so donors understand exactly what their gift provides.
🔄 Monthly and one-time giving: Supports a tabbed interface with independent amounts and impact statements for recurring giving programs.
🎨 Match your brand: Easily set accent colors and control size or alignment to fit the widget naturally into your layout without CSS.
⚡ Reduce donor friction: Open the donation form in a modal overlay to keep donors on the page and reduce drop-off.

Donations Live New

👉🏻 Showcase Real Momentum with the Donations Feed

Give your donors a reason to trust. Our new feed lets you display a living, breathing record of people showing up for your cause.

🤝 Build instant trust: Overcome donor hesitation by showing a proven track record of community support.
💬 Highlight donor stories: Display real donor comments and locations to show the human side of your fundraising.
🛠️ Drop it anywhere: Easily add the block to your homepage, campaign pages, or confirmation screens in seconds.
📈 Curate your feed: Group multiple donations from the same person or sort by highest amounts to encourage larger gifts.

Campaigns New

🎨 Campaign Showcase: Pro Level Display, No Coding Needed.

Display your causes with style and make it easier than ever for donors to find the right campaign. We are excited to announce the brand-new Campaign Showcase, a powerful, no-code tool designed to help you create beautiful, high-converting campaign grids and carousels.

The Ultimate Discovery Experience

Your mission deserves to be seen. With the Campaign Showcase, you can move beyond simple lists and create dynamic displays that highlight your most urgent needs, helping donors connect with the causes they care about most.

⚡ No-Code Customization: Effortlessly change layouts, columns, and styles with a single click. Whether you want a clean grid or an interactive carousel, you can match your organization’s look without any CSS or JavaScript.

🎯 Advanced Search & Filter: Empower your supporters with real-time filtering. Donors can quickly sort through campaigns by tags, popularity, or “ending soon,” making it easy to find exactly where their help is needed.

💰 Quick Donate Integration: Boost your conversions with instant giving. The Showcase allows donors to contribute via a modal popup directly from the display, featuring pre-selected amounts for a faster, friction-free experience.

Addon New

🤯 New Addon: Campaign Updates

Keep your supporters informed and engaged with every step of your progress! Share the ongoing impact of your mission and build lasting trust with your donor community!

The Ultimate Engagement Tool

Fundraising is a journey, not a one-time event. Now, you can easily provide real-time updates directly on your campaign pages, ensuring your donors stay connected to the causes they care about most.

📣 Easy Storytelling: Quickly post text updates, milestones, or field reports to show exactly how donations are being put to work, keeping the momentum alive throughout your fundraiser.

🏗️ Visual Builder Integration: Seamlessly add the Updates block anywhere on your page using our drag-and-drop builder, or use a simple shortcode to display news in widgets and sidebars.

📩 Build Donor Trust: By consistently sharing progress and success stories, you create a transparent giving experience that encourages recurring support and deeper community involvement.

Integration New

Build Beautiful Fundraising Pages Visually with WPBakery Integration

We are excited to announce our brand-new integration with WPBakery, one of the most popular WordPress page builders, designed to help you create stunning layouts for your campaigns without touching a single line of code.

The Ultimate Design Experience

Designing your nonprofit’s website should be as simple as your mission is powerful. Now, you can bring Charitable functionality directly into your WPBakery workflow, using native elements to build high-converting donation pages and campaign grids in seconds.

🖱️ Drag-and-Drop Building: Easily add donation forms, campaign progress bars, and “Donate Now” buttons to your layouts using the WPBakery elements you already know and love.

🎨 Total Creative Control: Customize the look and feel of your fundraising elements using WPBakery’s native design options. Adjust margins, padding, and borders to ensure your campaigns fit perfectly with your site’s branding.

📱 Seamlessly Responsive: Every element is built to be fully responsive and mobile-friendly, ensuring your donors have a smooth, professional experience whether they are giving from a phone, tablet, or desktop.