0

Before asking here, I've searched a while and found a tutorial about creating a wordpress plugin with shortcode and javascript calling.

But I'm not able to make it work on my side. The tutorial is here

Basically it is supposed to add a teletype terminal displaying predefined strings. I'm able to follow it to the part where the terminal is drawn. But I do not see where in the code, we are calling the javascript function tomake the "animation". There's a zip to download with all the sources, and teletype javasources (not minimized) can be found here

So, my problem is that I do not catch how to call a javascript/jquery function from a php file.

Has anyone the possibility to try the tutorial out and give me an advice on how to complete the missing parts?

I think that the part where I'm lost is the last one : Make data available to JavaScript

I've of course contacted the author but I still have no answer and it is very frustrating no to be able to finish the work.

I guess there must be something in the php part:

<input <?php echo implode( ' ', $atts ); ?> />
<?php if ( array_key_exists( 'description', $options ) ) : ?>
<?php esc_html_e( $options['description'] ); ?>
<?php endif; ?>

But I'm not finding what...

Thanks.

Sylvain

0

Use wp_enqueue_script() with $in_footer parameter set to true, when loading scripts with your shortcode. To pass data from the PHP part of your code to the JS part use wp_localize_script().

wp_enqueue_script( 'script_name', '/script-location/script.js', array(), '1.0.0', true );  
$data_array = array(
  'key_1' => 'val_1',
  'key_2' => 'val_2'
);
wp_localize_script( 'script_name', 'data_object_name', $data_array );

You now can access the data in your script by addressing the data object - for example:

console.log( data_object_name.key_1 );

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.