Conditionally Load GiveWP Styles and Scripts
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 GiveWP styles and scripts and explains a little why we’ve chosen not to do this by default.
Pros and Cons of Conditionally Loading Styles and Scripts
While in theory it sounds very beneficial to only load GiveWP 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 GiveWP 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 GiveWP regardless.
Conditionally Load GiveWP Scripts and Styles
/**
* First, go to "Donations > Settings" and go to the
* "Display Options" tab and check "Disable CSS".
* That will remove the GiveWP Styles throughout your site
*/
/**
* Deregister and Dequeue GiveWP 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
* GiveWP Scripts and Styles
* ONLY on the Single GiveWP 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 GiveWP 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 GiveWP 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.
