10 Snippets from the Snippet Library to Level Up Your Give Development Skills

Show off your development skills to create memorable donation forms that will impress your clients and their donors starting with the Snippet Library.
Snippet Library Featured Image

Give is developed to be flexible and extensible. With just a little code knowledge, you can enhance and show off your donation forms to impress your clients and their donors. This article will help you get creative and show off your development skills starting with a few snippets from our GitHub Snippet Library.

If you’re familiar with WordPress hooks (actions and filters), you’ll have a leg up on understanding what’s going on in these snippets from our official Snippet Library. If you’re not a developer, start by reviewing our resource doc on adding custom snippets to your website.

Give was made for any user to easily customize. But under the hood, it’s also coded for experienced PHP and JavaScript developers to extend even further. Like any other codebase, the easiest “on-ramp” to a full understanding of the Give codebase is an overview of how others have extended it.

This article showcases the snippets our Support and Development teams created, based on user needs to extend Give in new and amazing ways. Some of the snippets we feature here were even written by members of Give Community Facebook group.

Here are 10 Give Code Snippets to help you show off your donation form development skills.

1. Give Total Progress Bar Custom Color:

Customize give_totals Progress Bar Color

<?php
/**
 * GIVEWP Snippet
 * Source: https://github.com/impress-org/give-snippet-library/blob/master/form-customizations/change-total-bar-color.php
 *
 * This snippet changes the color of the Progress bar on a [[give_totals]] shortcode.
 * The example here changes the color to Black. 
 */
 
function my_give_switch_total_bar_color() {
    $color = "#000";
    
    return $color;
}

add_filter( 'give_totals_progress_color', 'my_give_switch_total_bar_color' );

The ability to track donation progress toward a goal using a progress bar is a core feature of Give. A lesser-known aspect of Give for tracking progress is the [[give_totals]] shortcode that allows you to track progress toward multiple forms on a single progress bar, along with a customizable message.

What’s not customizable about the [[give_totals]] shortcode from the shortcode itself is the color of the progress bar. Using this simple snippet you can customize the color of the total progress bar.

Note: this is different from the [[give_goal]] shortcode which also displays a progress bar but only for one form. That setting will take the color from the individual form settings or the site-wide settings.

2. Custom Country List:

Customize the list of countries available

<?php
/**
 *  GIVEWP SNIPPET
 *  Source: https://github.com/impress-org/give-snippet-library/blob/master/form-customizations/custom-countries.php
 * 
 *  Customize the list of countries available
 *  NOTE: This list is used in Admin settings as well as front-end forms.
 *
 */
 
add_filter('give_countries', 'my_custom_give_countries');

function my_custom_give_countries() {

    $countries = array(
        ''   => '',
        'DE' => esc_html__( 'Germany', 'give' ),
        'AT' => esc_html__( 'Austria', 'give' ),
        'CH' => esc_html__( 'Switzerland', 'give' ),
    );
    
	return $countries;
}

Let’s say your organization only accepts donations from a specific list of countries. Instead of having a massive list of all the world’s countries in the dropdown, this snippet allows you to pass in just the countries you want.

3. Custom Country Order:

Rearrange the order of the countries dropdown list

<?php
/**
 * GIVEWP Snippet
 * Source: https://github.com/impress-org/give-snippet-library/blob/master/form-customizations/rearrange-country-list.php
 * 
 * Rearrange Country Dropdown Snippet.
 *
 * Changes the order of the countries in the billing address dropdown.
 * 
 * In the example, France has been plucked out of the list, and placed at the top of the list.
 * To simply rearrange the list alphabetically, comment out or remove lines 21-24
 *
 * @param $countries
 *
 * @return array
 */
 
function my_give_custom_country_list( $countries ) {
	//sorts the entire array alphabetically
	natcasesort( $countries );
	
	//pulls out France and places it at the beginning of the list
	$name = $countries['FR'];
	unset( $countries['FR'] );
	array_shift( $countries );
	$countries = array( '' => '', 'FR' => $name ) + $countries;

	return $countries;
}

add_filter( 'give_countries', 'my_give_custom_country_list');

You can also the previous snippet to the next level. Let’s say you still want to list all possible countries in the dropdown list, but you want a country other than the United States to appear atop the list. Use this snippet to change which country appears first.

This community-contributed snippet does some fancy footwork by removing the array of countries, shuffling it alphabetically, then pulling out a country to put at the top of the list. In the example it uses France, but you can replace that piece with your country of choice.

4. Adding Style to the terms checkbox:

CSS Styles for the Terms Checkbox

/**
 * GIVEWP Snippet
 * Source: https://github.com/impress-org/give-snippet-library/blob/master/form-customizations/css-customizations/styled-terms-checkbox.css
 * 
 * Use Emoji to indicate styled Terms checkbox 
 * See here for emoji Unicode reference:
 * https://apps.timwhitlock.info/emoji/tables/unicode
 * /

input[name = "give_agree_to_terms"] {
  display: none;
}

input[name = "give_agree_to_terms"] + label {color: red; cursor:pointer;}

input[name = "give_agree_to_terms"]:checked + label {color: green; font-weight: 700;}

input[name = "give_agree_to_terms"] + label:before {
  content: "\2b1c";
}

input[name = "give_agree_to_terms"]:checked + label:before {
  content: "\2705"}

input[name = "give_agree_to_terms"] + label:before {
	font-size: 0.75rem;
  display: inline-block;
  transition: .1s all;
  cursor: pointer;
  z-index: 999 !important;
	margin: 0 10px 0 0;
}

input[name = "give_agree_to_terms"]:checked + label:before {
  transform: scale(1.1);
}

This little gem allows you to style the terms and conditions checkbox to draw attention to it. This snippet allows you to add some custom CSS to style the checkbox.

5. Email tag for multi-level label chosen during donation

Email tag for multi-level label chosen during donation

/**
 *  GIVEWP Snippet
 *  Source: https://github.com/impress-org/give-snippet-library/blob/master/email-customization/multi-level-name-only-email-tag.php
 *  
 *  Give Donation Level Email Tag
 *  Outputs the name of the donation level chosen on a multi-level form
 *  Email tag = {give_donation_level}
 */
 
function add_give_mailchimp_optin_email_tag() {
    give_add_email_tag(
        array(
            'tag'      => 'give_donation_level', // The tag name.
            'desc'     => __( 'This outputs the level name of the donation amount for multi-level donations', 'give' ), // For admins.
            'func'     => 'give_level_name_email_tag_function', // Callback to function below.
            'context'  => 'donation', // This tag can be for both admin and donor notifications.
            'is_admin' => false, // default is false. This is here to simply display it as an option.
        )
    );
}

add_action( 'give_add_email_tags', 'add_give_mailchimp_optin_email_tag' );

/**
 * Callback function for the email tag output
 *
 * @return string
 */
function give_level_name_email_tag_function( $tag_args ) {

    $args = array(
        'only_level' => true,
        'separator'  => '',
    );

    $form_title = give_get_donation_form_title($tag_args['payment_id'], $args);

    $output = '';

    if ( ! empty( $form_title ) ) {
        $output = $form_title;
    }

    return $output;
}

By default, there is no email tag for the name of a multilevel donation. With this snippet, you get a new email tag of {give_donation_level} to use in any email, that only outputs the donation level name. This way, you can customize your donor communication with their specific donation amounts.

This one is your go-to snippet for any time a client says, “Can I add ____ to the Give emails?” If you can create custom email tags, the answer is “yes!”

6. Prevent Auto-login on Donor Creation

Prevent Auto-login on Donor Creation

/**
 *  GIVEWP Snippet
 *  Source: https://github.com/impress-org/give-snippet-library/blob/master/admin-functions/prevent-auto-login.php
 *  
 *  Prevents donors from being auto-logged-in if they register during donation
 *
 */
 
add_filter('give_log_user_in_on_register', 'give_dont_auto_login');

function give_dont_auto_login() {
	return false;
}

This snippet prevents your donors from being auto-logged-in when they create a WordPress user during the donation process.

This is useful for sites where the majority of donors give from a public computer or if you just prefer they don’t see that WP Admin bar after donating.

7. Add Additional Donor Meta

Sometimes you want additional information, like a donor’s phone number, stored in your Donor profile in addition to the standard Donation details. This is a long snippet because that involves a lot of functions, from saving the information during the donation, to mapping that information to the write table in the database, to displaying it correctly in the donor profile, and even exporting it in the donor export.

In summary, this snippet highlights both how flexible Give is, and how many things have to be considered even when doing something that seems simple like saving data to your donor profile page. This snippet is like a gateway drug to all things development in Give.

8. Make a Custom Give Shortcode Like This One

Give forms are created as custom post types in your WordPress database. This means you can query them just like any other post in WordPress.

This snippet is a great example of how you can build your own custom queries to display Give forms in a variety of ways. It grabs the post meta of the forms to determine whether the form has achieved it’s goal or not. If not, then it’s output in a list. You can use this code as a base to further customize the display of your Give forms.

9. Even Add-ons Can Have Snippets

Default Tributes Opt-in to Yes

/**
 *  GIVEWP Snippet
 *  Source: https://github.com/impress-org/give-snippet-library/blob/master/add-on-snippets/mailchimp/custom-merge-tags.php
 * 
 *  Default Tributes Opt-in to Yes
 */
function my_give_tribute_by_default() {
    <script>
        jQuery("input[name=give_tributes_show_dedication][value='yes']").prop("checked", true);
    </script>
}

add_action( 'give_donation_form_after_submit', 'my_give_tribute_by_default' );

Give Core isn’t the only thing that can have snippets. Our Give add-ons are just as flexible as Give Core.

This snippet is an example of how you can default the Tributes opt-in to YES. Donors can still opt back out, but this makes the Tribute fields display by default.

10. When a Snippet is More than a Snippet

Our snippet library occasionally includes whole customized Give templates as well.

This “snippet” is really a file you can download and place in your child theme to customize the appearance of your Give Form Grid. This is a great way to learn how to theme Give.

Do You Have Snippets to Add?

These 10 snippets are a great way to get started with extending Give, but there is so much more you can do. Have you created your own Give customization? Share it with us in the comments or add it to our GitHub Snippet Library.

About the Author

Share this post

Join Our Newsletter

Get fundraising insights directly in your inbox. Plus a 15% discount off all plans.

  • This field is for validation purposes and should be left unchanged.

Copyright © 2024 Liquid Web, L.L.C.

GiveWP™ is a trademark of Liquid Web, L.L.C.

A Liquid Web Brand

© 2024 All Rights Reserved.