How to enqueue javascript in header if executed within shortcode? WordPress

John Cotton comments:

<blockquote>if I add my inline-js to wp_footer directly for example (not via wp_enqueue_scripts) - how can I assure that it is loaded after my scripts leaflet.js&jquery which are loaded via wp_enqueue_scripts?</blockquote>

You shouldn't looad via wp_footer directly, you should use wp_localize_script....that way, WordPress makes sure you page scripts come after the scripts they rely on.

John Cotton comments:

There is another, slightly cheaty way, and you can can see an example of it working here:

http://www.golfhotelwhiskey.com/airport-guides/

The map is included on the page with a shortcode and the data (and other script) us added via the WP global:



// In add_shortcode function..

// parts removed for brevity
wp_enqueue_script( 'google-maps-cluster' );
wp_enqueue_script( 'google-maps' );

$pins = json_encode($pins);

$js = <<< EOT
var dapgc = {};

dapgc.pins = $pins;

dapgc.bounds = undefined;
dapgc.markers = [];
<!-- Code removed for brevity -->
EOT;

global $wp_scripts;
$wp_scripts->add_data( 'google-maps', 'data', $js );



If you have a lot of script (rather than just data) to add, this is a convenient, though not necessarily future-proof, way of doing it.

John Cotton comments:

<blockquote>but it is my understanding that when the "add_shortcode" part is activated, the "wp_head" has already been processed, but "wp_footer" is still available.</blockquote>

That's correct - and logical. Remember that shortcodes are (generally) being trigger by the_content filter - so clearly come after all header action is complete.

But that doesn't matter, because we call know that script should be in the footer for best performance ;)

Robert Seyfriedsberger comments:

Hi John,
wp_localize_script() would be a good approach, if I only had to add variables to the script, but in my case, I have to add scripts like the following (simplified):

<script type="text/javascript">
var layers = {};
var markers = {};
var lmm_map_13562082 = {};
(function($) {
lmm_map_13562082 = new L.Map("lmm_map_13562082", { dragging: true, touchZoom: true, scrollWheelZoom: true, doubleClickZoom: true, boxzoom: true, trackResize: true, worldCopyJump: true, closePopupOnClick: true, keyboard: true, keyboardPanOffset: 80, keyboardZoomOffset: 1, inertia: true, inertiaDeceleration: 3000, inertiaMaxSpeed: 1500, zoomControl: true, crs: L.CRS.EPSG3857 });
var osm_mapnik = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {maxZoom: 18, minZoom: 1, detectRetina: true});
var layersControl = new L.Control.Layers(
{'OSM Mapnik': osm_mapnik},
{},
{ collapsed: true } );
var marker = new L.Marker(new L.LatLng(55.689972, 160.927734),{ title: 'name', opacity: 1});
marker.bindPopup("Popuptext", {maxWidth: 300).openPopup();
})(jQuery);
</script>

as far as I understand wp_localize_script, this is not possible is it?
I created a test variable and then tried to add this by wp_localize_script:

$test = "<script type='text/javascript'>alert('test');</script>";
wp_localize_script('leafletmapsmarker', 'test', $test );

Output was

<script type='text/javascript'>
/* <![CDATA[ */
var test = "alert('test');";
/* ]]> */
</script>

and not

<script type='text/javascript'>
/* <![CDATA[ */
alert('test');
/* ]]> */
</script>

So I have to modify the code with $wp_scripts->add_data... right?

John Cotton comments:

<blockquote>So I have to modify the code with $wp_scripts->add_data... right?</blockquote>

Well that would certainly be the most straightforward route.

However, bear in mind that just because you output a fuller script now, that doesn't mean you have to continue to do so.

Looking at your existing script, it could easily be rewritten to pull from a variable written by wp_localize_script.

Instead of the following code being in the page, imagine it in one of your include js file....


var layers = {};
var markers = {};

var lmm_map_13562082 = {};

(function($) {

lmm_map_13562082 = new L.Map("lmm_map_13562082", { dragging: lmm_global.dragging, touchZoom: lmm_global.touchZoom, scrollWheelZoom: inertiaDeceleration: lmm_global.inertiaDeceleration, inertiaMaxSpeed: lmm_global.inertiaMaxSpeed, zoomControl: true, crs: L.CRS.EPSG3857 });

var osm_mapnik = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {maxZoom: lmm_global.maxZoom, minZoom: lmm_global.minZoom, detectRetina: true});

var layersControl = new L.Control.Layers(

{'OSM Mapnik': osm_mapnik},

{},

{ collapsed: true } );

var marker = new L.Marker(new L.LatLng(lmm_global.markerLat, lmm_global.markerLng),{ title: 'name', opacity: 1});

})(jQuery);


I've not changed everything above, but hopefully you get the idea. With that in your external js file, you could then localise as follows:


$lmm_global = array();
$lmm_global['dragging'] = true;
$lmm_global['touchZoom'] = true;
$lmm_global['inertiaDeceleration'] = 3000;
$lmm_global['inertiaMaxSpeed'] = 1500;
$lmm_global['markerLat'] = 55.689972;
$lmm_global['markerLng'] = 160.927734;
wp_localize_script( ' roberts-maps', 'lmm_global', $lmm_global);


By separating the code from the data values, you can easily achieve what you want - AND stick to the API structure so future proofing your code.

Robert Seyfriedsberger comments:

unfortunately this is not really an option - but thanks to your input, I nearly got it - just one step left - perhaps you could help with this too:

I assigned all javascript to the variable $lmmjs_out - then I added those variable with priority 25 to wp_footer (wp_enqueue_scripts have 20) by

function map_javascript() {
global $lmmjs_out;
echo $lmmjs_out;
}
add_action('wp_footer', 'map_javascript', 25);

For maps on single page this already works - problem is with e.g. archive pages or on posts where multiple maps are shown. Here I get the error <strong>Cannot redeclare your_function()</strong>

I tried to create a dynamic function name based on the map ID but failed - here´s what I tried:


$func_name = 'map_javascript_' . $id;
function $func_name {
global $lmmjs_out;
echo $lmmjs_out;
}
add_action('wp_footer', $func_name, 25);

Do you know how to solve this? I already searched Google for "dynamic function names" but didnt get along with the answers. It would be really great if you could help me overcoming this last hurdle...

John Cotton comments:

<blockquote>function map_javascript() {

global $lmmjs_out;

echo $lmmjs_out;

}

add_action('wp_footer', 'map_javascript', 25);</blockquote>

No, no, no!!

Don't try to beat the system - work with it!!

If you really must output functioning code rather than just data - and trust me Robert, whatever your code is, you can output just data - done hundreds of complex js websites and never failed to be able to do it - but if you do, then use the wp_script global as described above.

DON'T JUST STICK IT IN THE FOOTER - IT CAN'T BE RELIED UPON!!!!

John Cotton comments:

In your shortcode function do


global $lmmjs_out, $wp_scripts;

$wp_scripts->add_data( 'your-script-name-goes-here', 'lmmjs_out', $lmmjs_out );


Robert Seyfriedsberger comments:

:-( I was so happy I just found a nearly working solution...
Unfortunately I dont understand your code - could I ask you once more for help? I copied my code here: https://gist.github.com/4190766

On line 385 I added

global $lmmjs_out, $wp_scripts;

on line 756 I added

$wp_scripts->add_data( 'leafletmapsmarker', 'lmmjs_out', $lmmjs_out );

As I havent worked with add_data() before, I am not sure if thats the right usage...
thx

John Cotton comments:

OK - for starters, you don't need to open/close the script/CDATA elements on lines 386/387 and 713/714.

I see you're trying to use both wp_localize_script and add_data on lines 747/756. I suspect (but am not sure without trying it) that that won't work. Go with one or the other for now and see what happens.

Other than that, the code on that page doesn't give any context as to where it is called so I can't be certain why it might not work. If you can link to the output put of it, I might be able to comment further.