Is there a trick to conditionally wp_enqueue_scripts?

Been racking my head, I have a script in main.js that only is used on the contact page. I have conditionally enqueued the JS file that will also be used for the JS in main.js. I can see the scripts in the source, yet the functionality isnโ€™t working if I keep the conditional enqueue.

I can remove the conditional wp_enqueue in lib/scripts.js for the particular script needed on the contact page. Things all work fine now but the script loads on every page of the site which I donโ€™t want.

Going back to just loading the script on the contact page and nothing works.

The script is loading in the footer under scripts.js but nothing works. If I remove the conditional the script loads in the footer (exactly as before) yet everything works.

if (is_page('contact')) {
      wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?sensor=false', array('jquery','roots_scripts'), null, true);
      wp_enqueue_script('googlemaps');
  }

The main.js function that I am conditionally calling for only Contact page, this works fine but only if I wp_enqueue the above script WITHOUT the condition.

contact: {
    init: function() {
      // JavaScript to be fired on the contact page
      // Google Maps
      var markergeo = new google.maps.LatLng(49.27430, -123.12484);
      var customicon = 'http://dev.wdtravel.com/raw-html/img/icon-googlemap.png';
      var zoommap = 14;
      function initialize() {
          var mapOptions = {
              zoom: zoommap,
              center: markergeo
            };
          var map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
          var marker = new google.maps.Marker({
            position: markergeo,
            icon: customicon,
            draggable:  false,
            animation:  google.maps.Animation.DROP,
            map: map
          });
        }
      google.maps.event.addDomListener(window, 'load', initialize);
      // //end -----------------
    }
  },
1 Like

i think you are missing a hook (WP Codex). like so:

function my_scripts() {
	if (is_page('contact')) {
		wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?sensor=false', array('jquery','roots_scripts'), null, true);
		wp_enqueue_script('googlemaps');
	}
}
add_action('wp_enqueue_scripts', 'my_scripts', 110);

You could also put your enqueue functions INSIDE the roots_scripts function if you wanted.

@JulienMelissas I do have this inside the roots_scripts which is where the hook already is. For some reason I canโ€™t get it to just load on a single page. Loading on ALL works just fine.

You need to comment out the original roots_scripts registration and move it into your conditional, then set googlemaps as a dependency because I suspect googlemaps gets loaded after roots_scripts but you need it loaded before. In that same vein you need to remove the roots_scripts dependency from googlemaps: your dependencies should be the other way around.

Something like this works:

if (is_page('contact')) {

  //make sure jquery is the only $dependency here!
  wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?sensor=false', array('jquery'), null, true);

  //this is the new bit with the Roots JS dependent on (i.e. after) Google Maps
  wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', array('googlemaps'), 'ed21e6ee0eccdda773ac70eab1eb81f6', true);

} else {
   wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', array(), 'e3fd68a6394fc4bd1983a92cdd98329f', true);
}

Then just do these as usual:

  wp_enqueue_script('modernizr');
  wp_enqueue_script('jquery');
  wp_enqueue_script('maps');  //this is new!
  wp_enqueue_script('roots_scripts');