0

I am making a plugin. I already use wp_enqueue_script with my javascript files. When shortcode is executed I need to write some javascript code which will contain this piece of code:

jQuery(document).ready(function() {
...
//inside my plugin will initiate

(I cannot pre enqueue this piece of code because of some dynamic variables inside!)

My question in this: where do I place this code in wordpress? I can create a javascript file, place it in wp_content in appropriate folder and call wp_enqueue_script with the path to that file. Is there a better way and how?

I dont want this piece of code running more than once (and thus initiating my plugin twice!)

Thank you for the advices!

  • Why not do an ajax call and run the logic to create the variables there so you don't have to mix js and php? – Andrew Bartel Jan 23 '14 at 3:01
  • I need to initiate my plugin in jQuery(document).ready with dynamic variable name like so: $('#". $elem_id . "').plugin(".$settings_id."); – Toniq Jan 23 '14 at 3:21
  • More code and more detail about your project would help. – s_ha_dum Jan 23 '14 at 4:16
0

You can take advantage of html5 data-* attributes.

In your shortcode function, output a class name and the data attributes you'll need:

function my_plugin_shortcode( $shortcode_settings ) {

    $elem_id = 'elem-id';
    $settings_id = 'my-plugin-settings-id';
    $output = '<div class="my-plugin-class" id="#'.$elem_id.'" data-settings-id="'.$settings_id.'"></div>';

    return $output;
}

Then create a script named init.js and use wp_enqueue_script. Inside it put:

jQuery(document).ready(function($){
    $('.my-plugin-class').each(function(){ // Loop thru each shortcode instance
        var settings_id = $(this).data('settings-id'); // get data from attribute data-settings-id

        $(this).plugin(settings_id); // initialize plugin and pass its settings 
    });
});

It will work even if you have multiple shortcodes in the same post or page.

Edit - Expanded answer to address the asker's requirements and questions:

(I cannot pre enqueue this piece of code because of some dynamic variables inside!)

You dont have to print the dynamic variables inside javascript file as it is printed out on the element itself using data-* attribute. init.js will then pull the settings from the data-* attributes and pass it to your jquery plugin.

where do I place this code in wordpress? I can create a javascript file, place it in wp_content in appropriate folder and call wp_enqueue_script with the path to that file. Is there a better way and how?

Ideally the init.js should be inside your plugin folder under the "js" directory. Eg. your-plugin/js/init.js

I dont want this piece of code running more than once (and thus initiating my plugin twice!)

It wont.

  • Is it a bad practice to use wp_enqueue_style and wp_enqueue_script in shortcode? I am asking this because in some situations, lets say I have 10 different css versions of my plugin, so if I wanted to use wp_enqueue_style before shortcode runs, I would need to enqueue them all even if I would use just one. Another situation would be if I need to apply same css styles but with different id for each plugin, so I need to write css file on runtime. (like #some_id .some_class_name) – Toniq Jan 23 '14 at 6:24

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.