Charitable Blog

Everything you need to know about Charitable and our team.

Charitable 1.4 Features Responsive Styling and More

Last updated on

  • By

TL;DR: We just released a huge update for Charitable. Highlights include better support for small screens, a new shortcode and complete user-facing login and registration workflow.

Charitable 1.4 is coming out today, nearly six months since we released version 1.3. That’s a long time between major releases – too long for my liking – but the result is that 1.4 is a big step forward for the project.  Here’s a taste of what’s new in 1.4:

  • Campaign grids (like the ones you add with the [campaigns] shortcode), automatically scale gracefully on smaller screens.
  • So does the list of suggested donations in the donation form.
  • You can use a new shortcode that lists a logged-in user’s history of donations.
  • Your registered users can update & reset their password using a completely user-facing system (i.e. no wp-login access).
  • The donation form runs some client-side validation tests now to help donors who have missed a field or entered an invalid credit card number.
  • Picture fields in forms now feature a nice drag and drop interface (a nice update for people using Ambassadors or User Avatar).

Let’s take a closer look at some of these.

Responsive campaign grids

One of the most common issues that people mentioned with the campaign grids is that they were not responsive. On a mobile phone, that made them practically impossible to use. We’ve been helping customers out with a simple CSS-based solution, but building the solution straight into Charitable is obviously a big win for everyone.

responsive-campaign-grid

All the magic comes from the responsive parameter for the [campaigns] shortcode. If you just run with the default settings, the grid will automatically scale to a single-column layout on screens that are smaller than 768px (the size of an iPad).

Of course, every theme is different, so 768px might not be the perfect point at which to switch. You have full control over the point at which the grid will scale down. Here’s an example where I scale to a single column at 600px:

[campaigns responsive=600px]

Drag and drop picture fields

If you’re using Charitable Ambassadors to power a peer to peer fundraising or crowdfunding platform, your campaign creators will find it much easier to add their campaign image now.

We’ve gone from this:

old-picture-field

To this:

drag-drop-picture-field

New [charitable_my_donations] shortcode

At long last, Charitable now includes a clean, simple way for logged in users to see a history of their donations.

Donations history shortcode

Setting it up is easy enough: Just create a new page and include the [charitable_my_donations] shortcode. Your users will need to login to access their donations.

Complete user-facing login & registration workflow

Charitable has always included login and registration shortcodes, but there were a few missing elements:

  • To reset their password, users had to go through the default WordPress password reset process.
  • Logged in donors or campaign creators were seeing the admin bar, which many found confusing or undesirable.

Thanks to a great push by @rafecolton from the Himalayan Institute, Charitable 1.4 now features a greatly improved user management system. It’s perfect if you are using Ambassadors to power a platform and you want the entire login and registration workflow to be integrated into the frontend.

People who contributed to Charitable 1.4

One of the most exciting aspects about this release of Charitable is that it included some significant contributions from people outside our 2-man team. I mentioned Rafe above; his colleagues @cyhtan and @NeptuneIllume also contributed; and @Kathy_Darling, who is working on our Recurring Donations extension, also made some significant changes.

Besides them, we’ve also had some great contributions to the Charitable translation project from hugo_mv (Spanish), mauroandres (Spanish – Argentina) and elstupid (Dutch), as well as others who contributed to the translations.

To everyone who has helped shape this version of Charitable – including you, our users – thank you! We hope you enjoy this latest iteration.

Changelog

  • Scale the campaign grid gracefully when viewing on smaller screens. The [campaigns] shortcode now supports a responsive paramater, which is enabled by default. You can set it to a specific px/em amount to change the breakpoint, or set it to 0 to disable responsive styling. #88
  • Also provided appropriately responsive styling for suggested donation amounts on small screens. #159
  • Added the [charitable_my_donations] shortcode. Use this shortcode to allow logged in users to view a history of their donations, including links to the donation receipts. #14
  • Added client-side validation for the donation form. This checks whether donors have filled out all the required fields, whether they’re donating more than $0 (because seriously, a $0 donation won’t go far :)) and whether they have used a valid credit card (if you’re using our Stripe or Authorize.Net extensions). #176 and #63
  • Added a password reset process to provide a complete user-facing login and registration workflow. #89
  • Include an order paramater for the [campaigns] shortcode, to reverse the direction in which campaigns are displayed. #64
  • Allow campaigns in the [campaigns] shortcode to be ordered by any of the orderby options for WP_Query.
  • Added drag and drop support for the Picture form field, which is used in the User Avatar and Ambassadors extensions. #111
  • Improved how the plugin checks for updates to Charitable extensions, to keep the WordPress dashboard running smoothly. #133
  • Added a charitable_create_donation() function for developers who want to create donations programatically. #109
  • Added a new Charitable_Donations_Query class, which can be used by developers to retrieve donations from the database. #155
  • Added a new Charitable_Deprecated class, which is used to record any incorrect usage of Charitable functions or methods.
  • Switched to using the built-in edit.php admin page for listing Charitable donations, instead of relying on a custom admin page with a custom posts table. While there, we also simplified the interface and added colour-coding to the donation statuses. #110
  • Include the donor’s phone number, address and the payment method in the donations export CSV. #154
  • When multiple gateways are enabled, the default one is listed first in the donation form. #139
  • Automatically cancel a donation when the donor returns from the gateway before completing it. This works with PayPal, PayUMoney and PayFast. #90 and #117
  • Added a Charitable_Donor::__toString() method, so that echoing the object simply prints out the donor name.
  • Added charitable_sanitize_amount() function to convert any amount of type string into a float.
  • Trim the currency symbol from monetary amounts to prevent the symbol being treated as part of the amount. #145
  • Trim the currency symbol from the suggested donation amounts when saving a campaign. #147
  • When a donation fails and the user is redirected back to the donation form, they can re-attempt the same donation. Previously, a new donation would have been created, leaving a phantom pending donation behind. #106
  • Prevent duplicate donations caused by clicking the donate button repeatedly. #164
  • Fixed a bug related to empty content in the Layers theme. #9
author avatar
Eric Daams

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

2 responses to “Charitable 1.4 Features Responsive Styling and More”

  1. How We Improved Logins and Registrations in Charitable

    […] of Charitable development lately has been the front-end user login and registration process. Version 1.4.0 introduced a password reset process. Today we’re releasing version 1.4.2, which includes […]

  2. Dana Jewel Harris Avatar
    Dana Jewel Harris

    I would like to try the charitable geolocation plugin to help my students and their Partners In Education identify service-learning projects within their College Town communities.
    About College Town Communities http://www.nextstepsyep.org/college-town/
    About NEXT Steps Partners In Education University Service-Learning Projects http://www.nextstepsyep.org/college-town/nspie-university/

Leave a Reply

Your email address will not be published. Required fields are marked *

Get free tips and resources right in your inbox, along with 60,000+ others

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!

Featured Video:

Watch more videos on our YouTube channel.

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!

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.

author avatar
Eric Daams
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.

author avatar
Eric Daams
Integration New

🖼️ Add Image Galleries to Fundraising Campaigns With Envira Gallery

Showcase the impact of your mission like never before. We are excited to announce our brand-new integration with Envira Gallery, the best WordPress gallery plugin, designed to help you tell your story through powerful, high-performance visuals.

The Ultimate Storytelling Experience

A picture is worth a thousand words – and now, it’s worth even more for your fundraising. Connect your visual impact directly to your cause by creating stunning, responsive galleries that engage donors and drive contributions.

🖼️ Visual Impact: Easily create beautiful, fast-loading galleries to show your nonprofit’s work in action, from field reports to event highlights.

🔗 Seamless Connection: Link gallery images directly to your fundraising campaigns, making it effortless for inspired visitors to go from viewing a photo to making a donation.

📱 Perfectly Responsive: Whether your donors are on a phone, tablet, or desktop, your galleries will look professional and load lightning-fast, ensuring a smooth experience on every device.

author avatar
Eric Daams
Integration New

👉🏻 New Divi Integration In Charitable Pro

Bring the power of Charitable directly into your favorite page builder and maintain total creative control with our brand-new Divi integration.

The Ultimate Design Experience

No more switching back and forth or relying on complex shortcodes. Use dedicated Divi modules to build, style, and launch high-converting donation pages without ever leaving the Divi Builder.

⚡ Native Divi Modules: Effortlessly drag and drop your donation forms, progress bars, and campaign details exactly where you want them.

⚙️ Visual Customization: Tweak colors, fonts, and spacing using Divi’s familiar design settings to ensure your fundraiser matches your brand perfectly.

🚀 Live Visual Editing: See your changes in real-time. What you see in the builder is exactly what your donors will see, ensuring a seamless giving experience every time.

author avatar
Eric Daams
donation form New

👉🏻 New Campaign Selector For Donation Forms

Take your campaign management to the next level. Find the perfect fundraiser for any page and stay in your creative flow with our new Campaign Selector integration.

The Ultimate Selection Tool

No more hunting for IDs or creating one page for every donation form. Use the new Campaign Selector to allow users to switch to a campaign with no code.

⚡ Instant Search: Quickly find any campaign leaving your page or post.

⚙️ Editor Agnostic: Whether you’re using the Block Editor, Elementor, or WPBakery, selecting your campaigns is now a unified experience.

🚀 Real-Time Previews: See exactly which campaign you’ve selected instantly, ensuring your donors always see the right cause.

author avatar
Eric Daams