If you have the Classy WordPress plugin installed on your website, or haven’t because it didn’t show your fundraisers’ pictures, you’ll want to update now. In December I contributed two updates to the open-source community plugin, including enabling fundraiser and team pictures, and properly formatting numbers. Read on to learn more about the plugin and how to update!
Need more advanced integrations? I specialize in building custom tools for nonprofits, including analytics, event check-in apps, and websites. Get in touch at www.favand.net
Why use the Classy WordPress plugin?
If you use Classy (the online fundraising platform) and use WordPress for your campaign or organization website, you can benefit from including campaign totals, thermometers, and leaderboards on your site.
And, the open-source plugin is free! The previous versions did not show participant or team images. It also didn’t format currency properly. Those issues have now been fixed.
How to install the updated plugin
Unfortunately the plugin is not in the official WordPress plugin directory, so the installation process is manual. However, it’s not difficult and I’ve included instructions for each step.
Before starting, log in to your WordPress administration panel.
Step 0 of 5: Remove the old version, if installed
From the dashboard, click the “Plugins” menu item. Find the “Classy.org” plugin in the list. First deactivate it if necessary, then click the “delete” link. Your web browser will ask you if you’re sure. Click “ok” or “yes”.
Step 1 of 5: Download the new version
The plugin code lives at https://github.com/classy-org/classy-org-wp and you can download it from there. Click the green “Clone or download” button, and then click “Download ZIP”. For your convenience, however, this is the direct download link: https://github.com/classy-org/classy-org-wp/archive/master.zip
Download that Zip file and save it somewhere you can find it on your computer — your Downloads folder is fine. Do not unzip the file.
Step 2 of 5: Install the new version
First, go to the Plugins page in WordPress. Click the “Add New” button at the top of the screen, and then “Upload Plugin” in the same spot. Use the file picker that appears to find the Zip file you saved in step 1. Click “Install Now” and wait for the install process to complete. Click the “Activate Plugin” button to finish this step. The plugin will now show up in the plugin list. You know it is active when the only option is to “deactivate”.
Step 3 of 5: Find your Classy API keys
If you had the old version installed previously and it was working, you can skip steps 3 and 4.
Log in to your Classy admin screen and click the API link in the header. At the bottom of the API page, under “Create a new App”, enter a name and web address for the app. I suggest naming it “WordPress Plugin” and using your website’s home page for the Oauth2 Redirect URI. The name is simply to help you remember what the API key is used for, the Oauth2 Redirect URI isn’t used in this situation but is required anyway. Click “Create App”.
Once you have done that, the page will reload and the newly created “app” will be at the bottom of the list. Click “Edit” to see the Client ID and Client Secret.
Copy the Client ID and Client Secret somewhere temporarily. (They are circled in red in the GIF below). I suggest opening Notepad or a similar program. It is important to keep the letters capitalized exactly how they are. Treat the Client ID and Client Secret as passwords because they give the user access to all of your Classy data.
Step 4 of 5: Save the API keys in the WordPress plugin
If you had the old version installed previously and it was working, you can skip steps 3 and 4.
Go back to your WordPress admin screen. Click the “Classy.org” button in the left-side menu. Paste in the Client ID and the Client Secret you copied in step 3. Remember to keep all the capitalization and make sure there are no spaces before or after the ID or the Secret. Click “Save”. There is no notification that the save action worked, but if you go to the dashboard and click back to “Classy.org” they should show up.
Step 5 of 5: Add a leaderboard or campaign indicator
You may not need to do this if you are just updating the plugin.
In this final step you can add your campaigns status or leaderboards to your website via WordPress shortcodes (or widgets).
Tip: if you want to display the team and individual fundraiser leaderboards next to each to each other, use a page builder plugin like SiteOrigin Page Builder or Elementor to create columns.
Before you can add a widget or shortcode to your site, you need to find the event ID from Classy. The easiest way to find this is by going to your event’s landing page and copying the number at the end of the url. In the following link, the event ID is 145235:
https:/www.classy.org/event/2018-burlington-penguin-plunge/e145235
You can add widgets to a sidebar or any other location using the Classy.org widgets. It should be fairly self-explanatory; just paste in your event’s ID.
You can also add the widgets to any page or blog post on your site using the shortcodes. Just copy and paste the codes below and replace the event ID as needed:
- Embed a campaign progress bar for campaign #145235 with a title of “Campaign Progress Bar”
[classy-campaign-progress id="145235" title="Campaign Progress Bar"] - Embed a campaign overview for campaign #145235 with a title of “Campaign Overview”
[classy-campaign-overview id="145235" title="Campaign Overview"] - Embed a campaign top fundraisers leaderboard for campaign #145235 with a title of “Top Fundraisers”
[classy-campaign-fundraiser-leaders id="145235" title="Top Fundraisers"] - Embed a campaign top fundraising team leaderboard for campaign #145235 with a title of “Top Fundraising Teams”
[classy-campaign-fundraising-teams-leaders id="145235" title="Top Fundraising Teams"]
The end result should look similar to the example from Special Olympics Vermont’s Penguin Plunge, above, which you can also see at https://penguinplunge.org/burlington/
What’s next?
You can set up as many leaderboards and campaign thermometers as you need. If you need to set up another website, just follow the steps from the beginning. I recommend creating a separate API client ID and secret for each website or integration you set up.
If you need more advanced integrations — websites, text messaging, event check-in tools and more — please get in touch in the comments or through my website at www.favand.net. One of the advantages of using a platform like Classy is that a lot of the manual back-office work can be automated and customised to your needs.
Questions? Comments? You can raise plugin issues on the open source repository (https://github.com/classy-org/classy-org-wp) or in the comments here.
