How do I embed a simple HTML Element with a bit of JavaScript?

Here's my problem. I am working with WordPress at the moment and apparently for Security reasons it doesn't allow the script tag. So I uploaded it on a seperate server. Now my question is, whether it is possible to just show the content of that link as a small widget on the Wordpress page, or if I got a big mistake in one or another basic question?

Or to put it in other words, what do I have to do, so that this script is embeddable. A Google Search always resulted in an explanation on how to embed content, but not how to deliver content.

Here is the code:

<html>
<center>
<h3>
<p id="demo"></p>
</h3>
</center>
<script>
var countDownDate = new Date("Dec 13, 2018 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance >= 0){
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s " ;}

  // If the count down is finished, write some text 
  if (distance < 0) {
distance = Math.abs(distance);
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s " ;

  }
}, 1000);
</script>
</html>

2 answers

  • answered 2018-12-05 20:17 Weft

    Wordpress definitely allows the script tag. You'll add a line like this to your functions.php file to properly add the script to your Wordpress site:

    wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
    

  • answered 2018-12-05 20:18 UpQuark

    WordPress blocks JS in most in user-supplied content but you can still use JS as part of the theme in template files, as well as load your own custom files in the WordPress config, as below:

    https://developer.wordpress.org/themes/basics/including-css-javascript/

    Any additional JavaScript files required by a theme should be loaded using wp_enqueue_script. This ensures proper loading and caching, and allows the use conditional tags to target specific pages. These are optional.