Pass Shortcode Attribute to footer Script

Question

I am trying to generate a WordPress shortcode which will display a bxSlider. The shortcode function itself works like a charm; I can pass my data and the shortcode is rendered properly.

The problem:

In the shortcode I also added an attribute id, which will be used to pass an ID used to call the slider, so for example:

$(".myid").bxSlider({

So the "myid" part would be passed like [myshortcode id="myid"]. But as the script needs to be placed in the footer (using: add_action( 'wp_footer', 'myshortcode_function');). So, I have to call the id attribute outside the shortcode function.

Could anybody please explain, how to pass that attribute so I can use it in another function? Please do not link me to the documentation. I read it, and I don't understand it.

Answer 1

It's simple. WordPress have a handy function to send variables to a registered script. It's wp_localize_script. It work this way:

//First Register Your Script
wp_register_script( 'name-of-script', 'http://example.com/script.js', '', '', true );

//Then send dynamic variables
wp_localize_script( 'name-of-script', 'globalVar', array( 'id' => 'slideTarget' ) );

//Finally invoke it on Front-End
wp_enqueue_script ( 'name-of-script' );

This should outputted before the script is called, and since it's called on footer, you can just call it inside your shortcode function. Then, on your script, you will need to use it like this:

$("#" + globalVar.id ).bxSlider({

Simple as that. There are other options as well, like outputting a global var or outputting a hidden input with the target ID, so you script would just need to looking for that hidden input value.

Answer 2

If you're just outputting the javascript directly, then you could use an anonymous function with a use scope:

    function my_shortcode( $atts ) {
        add_action( 'wp_footer', function () use ( $atts ) {
            ?>
            <script type="text/javscript">
                jQuery(function ($) {
                    $(".<?php echo $atts['id']; ?>").bxSlider({
                    });
                });
            </script>
            <?php
        } );
    }