1

I have a script that needs to be enqueued by a shortcode with parameters injected via wp_localize_script. The script is registers in a bootstrapping files then localized and enqueued within the shortcode itself (because it would be too late to register it in the shortcode)..

However, wp_enqueue_script only allows each script to be enqueued once, so if two instances of the shortcode a present then only the version with the last set of parameters actually gets enqueued.

I'd rather not use string replacement and the wp_footer hook to output the script multiple times because it's a bit messy but the real constraint is that the script needs to be enqueued by the shortcode — does anyone know how this can be accomplished?

5
  • You don't actually want to enqueue a script multiple times, you want a unique set of parameters for each instance of the shortcode. – Milo Oct 6 '15 at 14:12
  • Each shortcode has it's own parameters and needs its own instance of the script with those parameters, so I do need to enqueue it multiple times. – Rich Jenks Oct 6 '15 at 14:17
  • 2
    your script is not set up correctly if you need the same code repeated for each instance. enqueue the script in the shortcode handler but don't localize it. Put the parameters in an array that you persist through the request, like a class var or a global var. then in the footer, localize the script with your array of data that contains parameters for every instance. your script should then loop over all elements of the data array to create each instance. – Milo Oct 6 '15 at 14:34
  • Thanks, I see what you mean, I'll give it a go and get back to you! – Rich Jenks Oct 6 '15 at 14:37
  • Works a treat! If you submit this as an answer I'll tick it. – Rich Jenks Oct 7 '15 at 13:51
2

I'm going to submit an answer for this based on Milo's response above to help anyone finding this in the future. I'm just going to put together some simple examples that hopefully illustrate the point, but this isn't tested code.

In my example I have a shortcode for galleries that accepts a Flickr photoset ID, such as [flickr_gallery photoset_id="12345"]. There can be multiple instances of this gallery on the same page and each one needs to be initialized with a unique ID.

In the PHP where I'm setting up the shortcode I have a global array of gallery IDs - each time the shortcode gets rendered it adds the unique gallery ID to the array. The script then only gets enqueued once and has available an array of gallery IDs we can loop through in the JavaScript.

$gallery_ids = array();

function render_flickr_gallery_shortcode($atts = [], $content = null) {
    // typical shortcode stuff...

    global $gallery_ids;

    $gallery_ids[] = $atts['gallery_id'];

    // localize previously registered script with array of gallery IDs
    wp_localize_script('some-javascript', 'gallery_settings', array(
        'gallery_ids' => $gallery_ids
    ));
    wp_enqueue_script('some-javascript');
}

add_shortcode('flickr_gallery', 'render_flickr_gallery_shortcode');

And then in the JavaScript file being enqueued from the shortcode:

jQuery(document).ready(function($) {
    var options = (typeof gallery_settings !== 'undefined') ? gallery_settings : null;

    if (options && options.gallery_ids.length > 0) {
        for (var i = 0; i < options.gallery_ids.length; i++) {
            var galleryID = options.gallery_ids[i];

            $("#ff-" + galleryID).flexslider({
                animation           : "slide",
                animationLoop       : true,
                controlNav          : false,
                slideshow           : true,
                pauseOnHover        : true,
                smoothHeight        : true
            });
        }
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.