How to only load scripts if WordPress Widget is Active

26
Apr

Have you ever wanted to load certain scripts depending on whether a widget is being displayed? Using the WordPress is_widget_active we can run a check to check if the widget is being displayed and load the relevant scripts.

Recently whilst developing a new Google Maps WordPress widget I came across a scenario where I only wanted to load the scripts associated with this widget if the actual widget was being displayed.

Why not load the JavaScript files in the header I hear you ask? Well, to try and optimize the site and minimize on server requests I thought it best to only load the associated JavaScript’s if the widget was being used.

After investigation I found that there was a built-in WordPress function called is_widget_active. As the function name states it lets us check whether the widget is active and therefore being used.

The WordPress built-in is_active_widget Widget function

This Conditional Tag checks whether the widget is displayed on the front-end of your site. It is a Boolean function, meaning it returns either TRUE or FALSE.

The usage for this function is as follow:

1
<?php is_active_widget( $callback, $widget_id, $id_base, $skip_inactive ); ?>
<?php is_active_widget( $callback, $widget_id, $id_base, $skip_inactive ); ?>
  • $callback – Widget callback to check. (optional)
  • $widget_id – Widget ID. Needed for checking.
  • $id_base – Base ID of a widget created by extending WP_Widget. (optional)
  • $skip_inactive – Whether to check in ‘wp_inactive_widgets’. (optional)

Now with this knowledge in hand we can now design a conditional function to only load the required files if the actual widget is being used.

To implement this function we first need to navigate to our theme directory.
Navigate to wp-content -> themes -> your-curent-theme and open the functions.php file.

Copy the below function and add it to your current active themes functions.php file.

1
2
3
4
5
6
7
8
9
10
/**
 * Only load the Google Maps API if the gMaps widget is active
 */
function check_widget() {
    if(is_active_widget( '', '', 'wpinsite_google_maps')){
        wp_enqueue_script('jquery-gmap-apis', 'http://maps.google.com/maps/api/js?sensor=false');
        wp_enqueue_script('jquery-gmap', get_template_directory_uri(); .'/js/jquery.gmap.min.js');
    }
}
add_action('wp_footer', 'check_widget');
/**
 * Only load the Google Maps API if the gMaps widget is active
 */
function check_widget() {
    if(is_active_widget( '', '', 'wpinsite_google_maps')){
		wp_enqueue_script('jquery-gmap-apis', 'http://maps.google.com/maps/api/js?sensor=false');
		wp_enqueue_script('jquery-gmap', get_template_directory_uri(); .'/js/jquery.gmap.min.js');
    }
}
add_action('wp_footer', 'check_widget');

Code Explanation

As mentioned previously I only wanted to load the Google Maps API if the widget is being displayed. The widget I developed requires two JavaScript files. The first one the actual Google Maps API JavaScript and the second is a jQuery Google Maps plugin.

The only parameter I pass the “is_active_widget” function is the actual widget ID. When I created the widget I gave it the ID of “wpinsite_google_maps“. Therefore the function checks whether the widget with the ID of “wpinsite_google_maps” is actually loaded and is being displayed. If it is then load the two JavaScript files. I have also decided to use the “wp_footer” hook to load the JavaScript files in the theme footer but you can load then wherever you like.

Fairly straight forward. To customize the widget function for your usage simple retrieve the widget ID in question and change the name of the files you wish to be loaded.

Be sure to check out our other great WordPress Articles and Plugins
Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

2 Responses to How to only load scripts if WordPress Widget is Active

  1. Just a heads up – in the second heading in this post, the function is referenced as is_widget_active, as opposed to is_active_widget. Threw me off for a bit.

    Thanks!

    Reply

Leave a Reply