0

I'm writing a slideshow shortcode and need to grab the shortcode attributes in an external function so I can add the javascript to the footer.

For example:

add_shortcode('test','test_function');
function test_function($atts) {

    extract(shortcode_atts(array(
        'arrows' => true,
    ), $atts));

    return '..............';
}

Now I want to pass the "arrows" attribute into the javascript which I want to include in the footer..

function add_slideshow_js() { ?>
    <script>
        jQuery("ID").slideshow({
            directionNav : <?php echo $arrows; ?>
        });
    </script>
<?php }
add_action('wp_footer','add_slideshow_js');

Of course, this is just a very simplistic version..

Can anybody point me in the right direction?

Thanks!

2

You can pass an array to your script with wp_localize_script($handle, $object_name, $l10n).

function test_function( $atts )
{
    $data = shortcode_atts(
        array (
            'arrows' => TRUE
        ),
        $atts
    );
    wp_enqueue_script( 'your_script_name' );
    wp_localize_script(
        'your_script_name',
        'yourScriptObject',
        $data
    );

    return 'a string';
}

In your (external) script you can access the shortcode data now with …

var arrows = yourScriptObject.arrows;

… because WordPress will create a global accessible JavaScript with the name yourScriptObject now before it loads your external script.

Further shortcode attributes are available with yourScriptObject.othername or whatever the names are that you are using. For a more detailed example see my script in this answer.

  • Thanks for the code! Couple questions.. My shortcode has about 20 attributes (not just "arrows") - does that mean I have to set up the 20 different vars in the external script? And what exactly is the "yourScriptObject" referring to? Thanks! – Tom Apr 26 '13 at 0:30
  • @Tom See my update, I tried to explain it better. – fuxia Apr 26 '13 at 0:41
  • Thanks for the update! Please forgive me as I'm not well versed in javascript (at all), but then in my script, would I do something like this: pastebin.com/ui99T202 - or am I WAY off? – Tom Apr 26 '13 at 1:07
  • @Tom Looks already very good. :) Now try it. – fuxia Apr 26 '13 at 1:09
  • No luck, I'm receiving an error: Warning: Cannot use a scalar value as an array. Here's my PHP: pastebin.com/EsH6PDwu and the pro-slideshow.js file: pastebin.com/73ja1ShN. Thanks for any guidance you can give me! :) – Tom Apr 26 '13 at 2:58
0

What I ended up doing was create a global array with the attributes I needed in the external function. Then I simply called that global in my external function, and called all of the values like so: $slideshow_data['arrows'] etc.. Worked like a charm :)

So for example:

global $slideshow_data;
$slideshow_data = array(
    'id'     => $id,
    'arrows' => $arrows,
);

This above code goes inside the actual shortcode function.

Then inside my add_slideshow_js function, I did this:

global $slideshow_data;
?>
<script>
jQuery("<?php echo $slideshow_data['id'];?>").slideshow({
    directionNav : <?php echo $slideshow_data['arrows']; ?>
});
</script>
<?php.....

The only problem with this is I can't have more than one slideshow per page.. If anyone has any ideas on that I would be very grateful!

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.