All Your Donation Forms on One Page

Have you always wanted to display your donation forms on one Page? Give’s Archive Page can be leveraged to display your donation forms on one page — beautifully and effectively.

Most likely, your organization has more than just one fund or project your donors can give to. When you create four or five or more forms you want to give your donors the ability to see all of them in one place. Give has a built-in way to do that — the Archive page.

This tutorial will show you how to make a beautiful and effective landing page for all your Donation forms using the Give Archive.

Watch or Read?

If you’re the visual/audio type, then here’s a quick screencast walk-through for you. Otherwise, scroll down for the detailed text-based article.

Creating the Landing Page

So you have your Give plugin configured just right, and several donation forms happily accepting donations. Now, you want to display all of your donation forms on one page, to provide your donors with a central place for them to see all the ways they can support you financially. To do that, you use what WordPress calls an “Archive.”

By default, Give creates an archive at example.com/donations/. Unfortunately, many themes give little attention to their Archive page, so if you go to that URL you might be very disappointed.

This article provides you with the knowledge and tools to vastly improve the look and feel of your Give Archive page. By the end of this article, you’ll be able to go from this:

To this:

(cue the Triumphant music)

Here are the tools you need:

• (S)FTP Access to your site’s active theme folder (a child theme is preferable).
• A code editor—I use TextWrangler (Mac) for simple stuff, and PHPStorm for a full-blown IDE. Just really anything other than a word processor.
• A tab of your browser open to the WordPress Template Hierarchy.
• A healthy measure of patience.

Before we get into the meat of making changes within your theme’s folder, you should be aware that the best practice is to use a child theme. This article from the official Theme Developer Handbook walks you through why this is a best practice, as well as how to set up your child theme.

To understand why we are doing things so specifically, here’s a bit of a primer on the WordPress Template Hierarchy. When you load a page, WordPress looks through the files in your child theme’s folder to pick a template for loading the page. For archives (any page where more than one post is being displayed), it first will look for specific templates, and fall back to less specific ones.

If you have a custom post type of “pizza_shops” with a slug of “pizza-shops,” when you visit example.com/pizza-shops WordPress will look for an archive page of archive-pizza_shops.php to display that page. If that doesn’t exist, it will fall back to archive.php and then eventually all the way back to index.php if it can find anything more specific.

If you have a custom post type of ‘give_forms’ with a slug of “donations” (spoiler alert: if you are using the Give plugin, you do have that custom post type) when you visit example.com/donations, WordPress will first look for a template file named archive-give_forms.php and if it doesn’t find one, will fall back to archive.php, and then if neither of those exist, back to index.php. So all you have to have is a file named (exactly) archive-give_forms.php in your child theme’s folder, and your Give Archives will display using that template!

For more on the template hierarchy, check out this helpful article in the WordPress Theme Developer Handbook.

Let’s do it.

Here’s our reference file, creating our Twenty Sixteen child theme’s Give Archive Page.

The first thing we want to do after creating the precisely named file in the root of our child theme’s folder is to remove that out-of-place sidebar. To do this, we add a simple snippet to our child theme’s functions.php file:

add_filter('body_class', 'give_archive_no_sidebar');

function give_archive_no_sidebar($classes) {
 if ( is_post_type_archive('give_forms') ) {
     $classes[] = 'no-sidebar';
 }
 return $classes;
}

This adds a class of “no-sidebar” to the post type archive, which is how Twenty Sixteen changes the width of the content section to make it full-width.

Now, the next thing we want to do (back in our archive template file) is to call for the header, using the get_header() function.

This pulls in not only the visible header on the page, but also all of the meta information. It’s very important to call it first.

Next up, we need to create a div to hold all of our content, so that the theme can handle all of the standard styling (fonts, spacing, margins, etc). Since Twenty Sixteen does this using a div with the id of “primary” and a class of “content-area” we called for that. Also, inside of that div, there’s a html tag which tells the browser (and search engines) that this is the main content of the site. Again, this is a convention of the Twenty Sixteen theme which we are following so that everything is styled correctly. We added a class of “give-archive” so that later we can add styles which only affect our give archive pages.

Once we’ve got everything set up to display correctly, we need to call for the Loop.

The Loop is what what WordPress uses to display posts on a given page. The Developer Handbook page on the Loop is helpful here. In the case of an archive page like this one, we have to tell the loop exactly what to display.

If we call the loop with no args, WordPress will pull all posts, not just our Custom Post Type of “give_forms,” which would not work. So this code snippet from our archive template file sets up the loop to display only “give_forms”

$args = array(
 'post_type' => 'give_forms',
 'posts_per_page' => 10
 );

$wp_query = new WP_Query( $args );

Next up, we need to set up for failure: what if there are no posts matching that query? That’s what the handy if() statement below does:

if ( $wp_query->have_posts() ) : ?>

The bulk of the file lives inside of that if() statement. You can skip to the bottom of the file to see the else : line where we display a helpful message saying that no donation forms were found.

Inside of the if() statement, we get to decide which parts of Give donation forms we want to show on our archive.

For our sample, we chose to display the title, featured image, goal, content, and a link to go to the individual form, and commented each section appropriately.

A few things to note within that chunk of code:

1. We used give_get_template_part('single-give-form/featured-image'); which calls for the featured image of the form, and obeys the size settings we’ve set at Donations > Settings > Display Options (tab)
2. Forms without an image will display the give placeholder image.
3. We wrapped the image and goal in a div with a class of “image-wrap” so that we can pull off some CSS sorcery concerning the goal when you mouseover the image on desktop.

If you’ve followed along so far, your site still doesn’t look exactly like our demo image above. But it is already a big improvement, and now you should have a good grasp of how it all gets put together so you can customize it further.

You can also refer to our child theme’s styles to see how we styled our Archive page here.

Some Live Examples

Here’s some great live examples of powerful Archive pages:

• Brauser Maimonides Academy shows 4 different ways to support their Academy on this one clean and descriptive page.
• Matt Cromwell (our own Head of Support) supports his Open Source plugins and displays them on this single page with a custom Archive slug (details on that here).
• See how the Bethlehem Theme does the Archive page.
• The popular Non-profit theme by Organic Themes has an excellent Archive as well.

Leveraging WordPress & Give

Leveraging the features of both the WordPress template hierarchy and Give’s built-in functions, the sky is the limit when it comes to customizations you can make.

Using this tutorial, your customizations not only look great, but you are following WordPress best practices to avoid your changes being overwritten by theme or plugin updates.