Some developers put a lot of attention into which styles and scripts are loaded on each page of their site. This article explains how to conditionally load the Give styles and scripts and explains a little why we’ve chosen not to do this by default.

Pro’s and Con’s of Conditionally Loading Styles and Scripts

While in theory it sounds very beneficial to only load Give styles and scripts when they are actually used on a page or post, in practice this often ends up creating more trouble than benefit. We have chosen to load all our Give styles and scripts minified and concatenated into one file each and have that load throughout the site.

The main reason we’ve chosen to do that is because very many WordPress sites use some sort of minification and/or caching plugin to concatenate and minify all the scripts and styles of the entire site into one large file or perhaps up to 4 smaller files each. When different scripts and styles are loaded conditionally on different pages/posts the results are often very mixed whether the conditionally loaded scripts will be minified correctly and applied correctly when needed.

Nevertheless, we wanted to provide a method for developers to conditionally load scripts with Give regardless.

THIS METHOD IS NOT SUPPORTED This is an example only. Use at your own risk. We cannot provide support for implementing this method, but we have verified it locally to work as expected.

Conditionally Load Give Scripts and Styles

/* First, go to "Donations > Settings" and go to the 
 * "Display Options" tab and check "Disable CSS". 
 * That will remove the Give Styles throughout your site
 */

/*
 * Deregister and Dequeue Give Scripts
 *
 */

function wpdocs_dequeue_script() {
   wp_deregister_script('give');
    wp_dequeue_script('give');
}

add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

/*
 * Condional Logic to enqueue 
 * Give Scripts and Styles
 * ONLY on the Single Give pages or 
 * when a 'give_form' shortcode is present on the page
 *
 */

function conditional_give_scripts() {
    
        // Since the Give scripts are Localized, you'll need to load the localizations
        // in full for the scripts to function correctly

	$localize_give_checkout = apply_filters( 'give_global_script_vars', array(
		'ajaxurl'             => give_get_ajax_url(),
		'checkout_nonce'      => wp_create_nonce( 'give_checkout_nonce' ),
		'currency_sign'       => give_currency_filter( '' ),
		'currency_pos'        => isset( $give_options['currency_position'] ) ? $give_options['currency_position'] : 'before',
		'thousands_separator' => isset( $give_options['thousands_separator'] ) ? $give_options['thousands_separator'] : ',',
		'decimal_separator'   => isset( $give_options['decimal_separator'] ) ? $give_options['decimal_separator'] : '.',
		'no_gateway'          => __( 'Please select a payment method', 'give' ),
		'general_loading'     => __( 'Loading...', 'give' ),
		'purchase_loading'    => __( 'Please Wait...', 'give' ),
		'give_version'        => GIVE_VERSION
	) );

	$localize_give_ajax     = apply_filters( 'give_global_ajax_vars', array(
		'ajaxurl'          => give_get_ajax_url(),
		'position_in_cart' => isset( $position ) ? $position : - 1,
		'loading'          => __( 'Loading', 'give' ),
		// General loading message
		'select_option'    => __( 'Please select an option', 'give' ),
		// Variable pricing error with multi-purchase option enabled
		'default_gateway'  => give_get_default_gateway( null ),
		'permalinks'       => get_option( 'permalink_structure' ) ? '1' : '0',
		'number_decimals'  => apply_filters( 'give_format_amount_decimals', 2 )
	) );
    
    // Register and Enqueue Styles and Scripts on Single Give Form pages
    if ( is_singular('give_forms') ) {
        wp_register_style( 'give-styles', GIVE_PLUGIN_URL . '/templates/give.min.css', array(), GIVE_VERSION, 'all' );
        wp_enqueue_style( 'give-styles' );
        
        wp_register_script( 'give', GIVE_PLUGIN_URL . '/assets/js/frontend/give.all.min.js', array( 'jquery' ), GIVE_VERSION, true );
	wp_enqueue_script( 'give' );
        
        // Do the actual localization of the scripts here / Pass AJAX vars from PHP
	wp_localize_script( 'give', 'give_global_vars', $localize_give_checkout );
	wp_localize_script( 'give', 'give_scripts', $localize_give_ajax );
    }
    
    // Load the global
    global $post;
    
    // Now check for whether the shortcode 'give_form' exists
    // In any Post Type at all. You can add additional shortcodes as necessary
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'give_form') ) {
	wp_register_style( 'give-styles', GIVE_PLUGIN_URL . '/templates/give.min.css', array(), GIVE_VERSION, 'all' );
        wp_enqueue_style( 'give-styles' );
        
        wp_register_script( 'give', GIVE_PLUGIN_URL . '/assets/js/frontend/give.all.min.js', array( 'jquery' ), GIVE_VERSION, true );
	wp_enqueue_script( 'give' );
        
        // Do the actual localization of the scripts here / Pass AJAX vars from PHP
	wp_localize_script( 'give', 'give_global_vars', $localize_give_checkout );
	wp_localize_script( 'give', 'give_scripts', $localize_give_ajax );
    }
}

// This has to be wp_print_styles in order to override the dequeuing/deregistering we did at the top
add_action( 'wp_print_scripts', 'conditional_give_scripts', 999 );

A Note on Debugging

If you have WP_DEBUG set to true, then Give will load all of its scripts individually throughout your site and the above function will not work at all. This only applies to the minified and concatenated style and script: give.min.css and give.all.min.js which are only loaded when WP_DEBUG set to false.