The GiveWP Donor Wall Block allows you to display a donor wall with donation information publicly on posts and pages as donors opt-in. All the settings can be configured in the block editor.

Displaying the success of your campaign is a great way to encourage potential donors to turn into real donors. One way to do that is with the GiveWP Donor Wall.

Donor Wall Front-end View

Donors appear on the Donor Wall only when they do not opt in to “Anonymous Donations”. Additionally, enable the donor comment functionality for the comment to appear in the donor wall.

Donor Wall Block Settings

Block Settings

These settings are found in the block settings panel when you have focused on the GiveWP Donor Wall block within the editor. Find out more about our GiveWP Blocks here.

Donors per page

Settings Type: Text field
Default: 12

This setting controls the number of donors you wish to show at one time. If the number of available donors exceeds that amount a “Load More” button will display giving donors the option to view more donors on the wall.

Form ID

Settings Type: Text field
Default: “All Forms”

Specify which donors to display based on the form ID they donated through. Form IDs can be found on the “All Forms” page by hovering over the “Copy Shortcode” link. Multiple forms can be included by separating them with a comma.

Order

Settings Type: Select field
Options
: “Oldest to Newest” | “Newest to Oldest”
Default: “Oldest to Newest”

This setting controls whether the listed donors should be ordered from “Newest to Oldest” or “Oldest to Newest”.

Columns

Settings Type: Select field
Options
: Best Fit | 1 | 2 | 3 | 4
Default: Best Fit

Controls how many columns wide the donor wall will be. Utilizing “Best Fit” will assign the number of columns best suited for the available space and the configuration of the donor wall based on current settings.

Show Avatar

Settings Type: Toggle
Options
: Enabled | Disabled
Default: Enabled

Sets whether or not to display the avatar of the donor. By default the donors Gravatar is loaded if configured and made available by the donor. If no Gravatar is available an avatar with the letters of their first and last names is displayed.

Show Name

Settings Type: Toggle
Options
: Enabled | Disabled
Default: Enabled

Decides whether to display the name of the donors that have given through the included form. Donors that have marked themselves as anonymous will not display on the form at all. To learn more about giving anonymously visit this link.

Show Total

Settings Type: Toggle
Options: Enabled | Disabled
Default: Enabled

Shows the total amount of the donation.

Show Time

Settings Type: Toggle
Options
: Enabled | Disabled
Default: Enabled

Displays the date of when the donation was submitted.

Show Comments

Settings Type: Toggle
Options
: Enabled | Disabled
Default: Enabled

Sets whether to display the comment the donor submitted along with their donation. If comments are enabled in your forms a text box will appear on the forms front-end. To learn more about donor comments click here.

Donor with Comments

Settings Type: Toggle
Options
: Enabled | Disabled
Default: Disabled

This setting controls whether to only display donors that have submitted a donation with a comment. If the donor gave through the form, yet didn’t submit a comment, they will not be shown on the donor wall.

Comment Length

Settings Type: Text field
Default: 140

Controls the cutoff point in characters where the donor comment will provide an option to “Read more” rather than displaying the entire comment.

Read More Text

Settings Type: Text field
Default: “Read More”

This controls what text is displayed instead of the “Read more” option that displays when the character count of the comment is exceeded by the above setting.

Load More Text

Settings Type: Text field
Default: “Load More”

This controls what text is displayed inside the “Load More” button. This button displays when there are more available donors than what exceeds the “Donors Per Page” setting at the top of the block settings.

Advanced

Settings Type: Text field
Default: Empty

This is a default option for WordPress blocks that allow a user to pass a custom class so that it can be customized with CSS.

Examples using the Donor Wall Block

Here are some examples of how you can customize the Donor Wall in a variety of ways for different types of campaigns and use-cases.

Sample Layout – Anonymous Giving

This example is great for an anonymous fundraiser. The Donor Wall only shows the amount given, the date, and is sorted to show the largest donations first. It hides images, names, and comments.

The first thing you need to do is switch the Order By field to Donation Amount and then use the following settings:

An example of donor wall with anonymous donors

 

These settings will generate the following donor wall:

An example Donor Wall with anonymous donations

Sample Layout – Global Supporters

This example is good for when you have a lot of donors who have given and you want to highlight them, but not the amount they’ve given. This Donor Wall will show only their name, photo, and date. It has more columns and shows more donors per page. It hides the amount, any comments, and is organized by date.

The settings for this donor wall would look like the following:

The settings for the Sample Layout – Global Supporters using the Donor Wall Block

The above settings will generate the following donor wall:

An example Donor Wall showing only names, images, and dates.

Sample Layout – Creating a Donation Leaderboard

This example is great for when you want to create a public leader board to display the largest donations you received on your site and their respective donors. The following donor wall will show the default fields, such as Name, Donation Amount and the Donation’s Date. The display will be in two columns and will show the top ten donors.

The settings for this donor wall would look like the following:

The settings for the GiveWP Leaderboard using the Donor Wall Block

The above settings will generate the following donor wall:

donor leader board example display

All donor walls have a load more button that, in this case, you can hide with some custom CSS. The code to hide it would be something similar to this:

Hide the the load more button:

button.give-donor__load_more.give-button-with-loader {
    display: none;
    visibility: hidden;
}

If you need assistance in adding CSS to your site, GiveWP has documentation to explain how to do this – click here.