1

I want to convert this code into a shortcode from the Code Snippets plugin, I have seen an example come up but when I put it it does not work, the example is the following:

add_shortcode( 'shortcode_name', function () { $out = '<p>write your HTML shortcode content here</p>'; return $out; } ); 

I want to convert the following code to rotate banners:

<script> rnd.today=new Date(); rnd.seed=rnd.today.getTime(); function rnd() { rnd.seed = (rnd.seed*9301+49297) % 233280; return rnd.seed/(233280.0); } function rand(number) { var result = Math.floor(rnd() * number); if (!result) result = 0; return result } var bannerimgs = new Array("a.jpg", "b.jpg"); var bannerlnks = new Array("a.com", "b.com"); var banneralt = new Array("a", "b"); var rotatorHtml = ""; var endJs = ""; for(var img in bannerimgs){ var thisImg = new Image(); thisImg.src = bannerimgs[img]; } var bannerimgCt = 2; var bannercurrentAd = rand(bannerimgCt); var openlink = ""; var bannerbanner = document.getElementById('banner'); var bannerlink = document.getElementById('banneradLink'); if(bannerlnks[bannercurrentAd] != ""){ rotatorHtml += '<a href="' + bannerlnks[bannercurrentAd] + '" id="banneradLink" target="_blank">'; endJs = "</a>"; } rotatorHtml += '<img src="' + bannerimgs[bannercurrentAd] + '" alt = "' + banneralt[bannercurrentAd] + '" id="bannerbanner">' + endJs; document.getElementById("banner_div").innerHTML = rotatorHtml; </script> 

How can this script be converted to a shortcode? I have replaced what it says but errors appear, then I do something wrong. How can this script be converted to a shortcode? Do you know any other way?

1
  • "but errors appear" - what errors? Commented Mar 23, 2021 at 10:28

1 Answer 1

1

Your JavaScript targets a HTML element with the id 'banner_div'. So the first step is to output such an element in the shortcode.

add_shortcode( 'shortcode_name', function () { $out = '<div id='banner_div'></div>'; return $out; } ); 

Now you need to save the JavaScript (everything between the <script> tags) as a file. This you can now enqueue which is a whole other question. Here's a question about doing this with a widget.

I would go with:

wp_enqueue_script( 'unique-name', '/path/to/script.js, array(), false, true); 

What is going on here? Let me summarise for you.

  • Param 1 is a name for your script.
  • Param 2 is the URL for where-ever you put the script file.
  • Params 3 and 4 are not used in this example
  • Param 5 sets the script output to the footer so it runs after the widget div is on screen.

For more reference on the function wp_enqueue_script see the codex page

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.