Create shortcode to echo javascript

Question

I have this typed.js code snippet, which I want to call from a shortcode:

<script src="https://www.example.com/wp-content/themes/mediso-v1-03/javascript/jquery-2.2.4.min.js"></script>
<script src="https://www.example.com/wp-content/themes/mediso-v1-03/javascript/typed.js"></script>

<script>// <![CDATA[
$(function(){ $(".element-typing").typed({ strings: ["This is my typing text"], typeSpeed: 20 }); });
// ]]></script>
<p class="element-typing"></p>

Here is what I came up with:

// Add Shortcode
function custom_shortcode23() {
    wp_enqueue_script('script-typed-jquery', 'https://www.example.com/wp-content/themes/mediso-v1-03/jquery-2.2.4.min.js', array('jquery'));
    wp_enqueue_script('script-typed', 'https://www.example.comwp-content/themes/mediso-v1-03/typed.js', array('jquery'));
    echo    '<script>// <![CDATA[$(function(){ $(".element-typing").typed({ strings: ["This is my typing text"], typeSpeed: 20 }); });',
    '// ]]></script>',
    '<p class="element-typing"></p>';
}
add_shortcode( 'typed23', 'custom_shortcode23' );

But it is not working. Where am I wrong?

A shortcode callback must return a string, not echo anything. — fuxia
– fuxia ♦, Commented Sep 5, 2016 at 8:17

Community · Accepted Answer · 2017-04-13 12:37:49Z

6

First of all, it looks like you are trying to enqueue version 2.2.4 of jquery, under the condition that jquery has already been loaded. That doesn't look good.

Secondly, you can't just echo a script in a shortcode. You must add it to another script using wp_add_inline_script. Like this:

function wpse238227_custom_shortcode23() {
    wp_enqueue_script('script-typed', 'https://www.example.comwp-content/themes/mediso-v1-03/typed.js', array('jquery'));
    // script needs to be added
    $script_to_add = 'jQuery(function ($) { $(".element-typing").typed({ strings: ["This is my typing text"], typeSpeed: 20 }); });';
    wp_add_inline_script ('script-typed', $script_to_add);
    // the html needs to be returned
    return "<p class='element-typing'></p>";
}
add_shortcode( 'typed23', 'wpse238227_custom_shortcode23' );

Note that this script will be added to the footer, because by the time WordPress is evaluating the shortcode in the content, the head of the site has already been assembled. You may also want to read more about enqueueing scripts from shortcodes in general.

edited Apr 13, 2017 at 12:37

CommunityBot

1

answered Sep 5, 2016 at 8:55

cjbj

15k16 gold badges43 silver badges90 bronze badges

We actually don't need the <script> tag with wp_add_inline_script().

birgire
– birgire

2016-09-05 09:09:05 +00:00
Commented Sep 5, 2016 at 9:09
1

True, and the paragraph tag can't be just there either because it isn't a script. I just copied the whole string too quikcly.

cjbj
– cjbj

2016-09-05 09:14:41 +00:00
Commented Sep 5, 2016 at 9:14
We should probably use jQuery(function ($) {...}); too.

birgire
– birgire

2016-09-05 09:34:52 +00:00
Commented Sep 5, 2016 at 9:34
@birgire Why are you always right? ;-)

cjbj
– cjbj

2016-09-05 09:36:45 +00:00
Commented Sep 5, 2016 at 9:36

Add a comment |

Stack Exchange Network

Create shortcode to echo javascript

1 Answer 1

Your Answer

Linked

Hot Network Questions

Create shortcode to echo javascript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions