0

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.

  • $(".myid") is not applicable for id=myid use $("#myid") instead – Shanavas M Nov 24 '15 at 14:06
  • Enqueue your script when the shortcode is present like suggest e.g. in this answer. Use wp_localize_script to pass the information you need. – Nicolai Nov 24 '15 at 14:07
  • @shanavasm thanks for your reply, but "id" in this case is the name of the variable, it's not meant to be a html class or id, please dont get confused. – ThomasB Nov 24 '15 at 15:07
  • @ialocin also thank you for your reply, i already checked if the shortcode was used to display some data, so this is checked. I just dont know how to use the localize_script option. – ThomasB Nov 24 '15 at 15:08
  • Sorry, but you have to read-up on it yourself. – Nicolai Nov 24 '15 at 15:31
2

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.

  • thank you very much for your fast reply, but to be honest, i still dont know what to do... where to place the snippets..... especialy which script are you talking about "name of script"? Up to now i am using an echo function to display the needed code, i only need to to insert the ID automatically.... – ThomasB Nov 24 '15 at 14:47
  • Just edited my answer to make it clear how to use the proper functions to call scripts on WordPress – Bruno Cantuaria Nov 25 '15 at 12:52
  • Thank you @bruno-cantuaria I've tried to use it, it works like a charm for a console log function fe. But if I try to use it for the slider (like your last example) "$("#" + globalVar.id ).bxSlider({" i get the error: Uncaught TypeError: Cannot read property 'id' of undefined. Do you have any further idea? – ThomasB Jul 26 '16 at 13:46
  • I have managed it (was a typo). But now, if I have multiple sliders on a page only the first will be rendered. is there a chance of a foreach-method? – ThomasB Jul 26 '16 at 14:25
1

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
        } );
    }

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.