Load script for single page

Im trying to add a specific calculator to a page that I have copied from another site. It uses a script that needs to be preloaded. I have a plugin called Snippets which is great for adding functions without editing functions.php. How do I preload the script for the specific page only?

Here is the whole thing I am trying to reproduce on my site:

<html>
<head>
<title>| Land Transfer Tax Calculator |</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link media="handheld, only screen and (max-width: 740px), only screen and (max-device-width: 740px)" href="../../mobile/css/mobile.css" type="text/css" rel="stylesheet" />

</head>

<body bgcolor="#ECECEC">
<table width="500" border="0" cellspacing="2" cellpadding="4" bgcolor="#FFFFFF" align="center">
<tr bgcolor="#fff">
<td colspan="2" valign="top">
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="-2"><b><font size="-1"><br>
  Land
Transfer Tax Calculator</font></b></font>
  <script type="text/Javascript">
<!--
function Calculate(form,Price)
{
if (Price < 55000.01)
{
form.Tax.value = Price * 0.005;
form.NTax.value = Price * 0.005;
}
else if (Price > 55000)
{
if (Price < 250000.01) {
form.Tax.value = (55000 * .005) + ((Price - 55000) * 0.01);
form.NTax.value = (55000 * .005) + ((Price - 55000) * 0.01);
} else if (Price < 400000.01) {
form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
} else if (Price < 2000000.01) {
form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02) ;
form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02);
} else {
form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
}
}
var Sum = parseFloat(form.Tax.value) + parseFloat(form.NTax.value);
form.GTax.value = Sum;
}
randomNumber = (Math.round(Math.random() * 10000));

// -->
  </script>

  <!-- End Preload Script --></p>
<form name=CalcLandTax>
  <table border="0" width="432" bgcolor="#165f69" align="center">
<tr>
<td width="100%" height="10">
<div align="center">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#FFFFFF"><b><br>
Calculate Land Transfer Tax (Residential)</b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#FFFFFF"><b><br>
</b></font></p>
</div>
<table border="0" width="430" bgcolor="#FFE3B5" align="center">
<center>
<tr>
<td align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="-2">Enter
the purchase price: $ </font></b><font face="Verdana, Arial, Helvetica, sans-serif" size=-1>
<input type="text" name="Price" size="18">
<font size="-2"><br>
(no commas or decimals)</font></font></td>
</tr>
</center>
<tr>
<td width="72%" align="center">
<p align="center">
<input name=Calc onClick=Calculate(this.form,this.form.Price.value) type=button value=Calculate>
</td>
</tr>
<tr>
<td width="72%" align="center">
<table border="0" width="100%">
<tr>
<td width="33%"><b><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>Provincial
Land Transfer Tax (PLTT) Amount $</b></font></b></td>
<td width="33%">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size=-2></font><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>Toronto
Land Transfer Tax (TLTT) Amount $ </b></font></p>
</td>
<td width="33%">
<p><b><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>Total
Land Transfer Tax <font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>(PLTT
+ TLTT)</b></font> Amount $</b></font></b></p>
</td>
</tr>
<tr>
<td valign="top">
<input name=Tax size=16>
<br>
<b><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>
(Applies to all Ontario properties including Toronto)<br>
</b></font></b><br>
</td>
<td valign="top">
<input name=NTax size=16>
<br>
<font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>(Applies
to Toronto properties only)</b></font> </td>
<td valign="top">
<input name=GTax size=16>
<br>
<b><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>
(Applies to Toronto properties only) </b></font></b> </td>
</tr>
</table>
<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size=-2 color="#000000"><b>
</b> </font> </div>

</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2">
<div align="center"><font size="-2" face="Arial, Helvetica, sans-serif">PLEASE NOTE THAT THE CITY OF TORONTO HAS APPROVED CHANGES TO THE TORONTO LAND TRANSFER TAX, WHICH TOOK EFFECT FOR TRANSACTIONS CLOSING ON OR AFTER MARCH 1, 2017, TO HARMONIZE TORONTO LTT RATES WITH THE PROVINCIAL LAND TRANSFER TAX. AS SUCH, THE TORONTO LAND TRANSFER TAX IS EQUAL TO THE PROVINCIAL LAND TRANSFER TAX INDICATED IN THE CALCULATOR ABOVE. </font><font size="-2" face="Arial, Helvetica, sans-serif"></font> </div>
</td>
</tr>
</table>
</body>
</html>
  • Patrick Freitas

    Hi Mike D

    How are you today?

    You can create some PHP conditional, getting the page ID using the is_page() function and run the script just if the page ID equals the needed page.

    You can try to use the Snippet plugin or creating an MU-Plugin which would be the best option.

    For this workaround, you can find the is_page() function on this link https://developer.wordpress.org/reference/functions/is_page/
    https://stackoverflow.com/questions/46019661/run-specific-js-on-specific-page-wordpress
    https://codex.wordpress.org/Must_Use_Plugins

    Also, you can use the jQuery to make a similar situation.

    if ($this.is('#yourPageID')) {
    //Run the function
     }

    For this, you can use the below link as reference.
    https://stackoverflow.com/questions/9751042/check-if-id-equals/9751090

    Best Regards,
    Patrick Freitas

    • Mike D

      Hi Patrick, thanks for all the links but it's still not really clear for me. Maybe I was not clear. How can I preload the following script for a specific page?

      <script type="text/Javascript">
      <!--
      function Calculate(form,Price)
      {
      if (Price < 55000.01)
      {
      form.Tax.value = Price * 0.005;
      form.NTax.value = Price * 0.005;
      }
      else if (Price > 55000)
      {
      if (Price < 250000.01) {
      form.Tax.value = (55000 * .005) + ((Price - 55000) * 0.01);
      form.NTax.value = (55000 * .005) + ((Price - 55000) * 0.01);
      } else if (Price < 400000.01) {
      form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
      form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
      } else if (Price < 2000000.01) {
      form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02) ;
      form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02);
      } else {
      form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
      form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
      }
      }
      var Sum = parseFloat(form.Tax.value) + parseFloat(form.NTax.value);
      form.GTax.value = Sum;
      }
      randomNumber = (Math.round(Math.random() * 10000));
      
      // -->
        </script>

      Where do I put the script? In its own file? Or like this:

      if ($this.is('#yourPageID')) {
      <script>........</script>
       }

      and then add the whole thing to functions.php?

  • Patrick Freitas

    Hi Mike D

    How are you today?

    I will help you with this using a mu-plugin.

    Firstly, using a FTP/SFTP or Hosting panel access, create a mu-plugins folder inside the wp-content. You can read more about Mu Plugins on this link https://codex.wordpress.org/Must_Use_Plugins

    Navigate into the recently created folder and create a new PHP file, you can name it as my_calc.php or whatever you like.

    Inside the new PHP file paste the below code:

    <?php
    
        /**
         * Enqueue script
        */
        function calculate_js() {
            if(is_page('your-page-id')){
                wp_enqueue_script( 'calculate', get_template_directory_uri() . '/assets/js/calculate.js', array(), '1.0', false );
            }
        }
        add_action( 'wp_enqueue_scripts', 'calculate_js' );

    Now, if you don't have your page created yet, please, build it then find the page id using the browser or editing the page.

    Replace the page ID in the PHP function if(is_page('your-page-id':wink:), in my case the specific page ID that I would like to load is the 4141.

    function calculate_js() {
            if(is_page('4141')){

    Go to your Theme's folder, create a assets folder and a js folder if it doesn't exist yet, the struct must be theme/assets/js.

    inside the new folder create a calculate.js and paste your JavaScript:

    <!--
    function Calculate(form,Price)
    {
    if (Price < 55000.01)
    {
    form.Tax.value = Price * 0.005;
    form.NTax.value = Price * 0.005;
    }
    else if (Price > 55000)
    {
    if (Price < 250000.01) {
    form.Tax.value = (55000 * .005) + ((Price - 55000) * 0.01);
    form.NTax.value = (55000 * .005) + ((Price - 55000) * 0.01);
    } else if (Price < 400000.01) {
    form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
    form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((Price - 250000)*.015);
    } else if (Price < 2000000.01) {
    form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02) ;
    form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000)*.015) + ((Price - 400000) * .02);
    } else {
    form.Tax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
    form.NTax.value = (55000 * .005) + ((250000 - 55000) * 0.01) + ((400000 - 250000) * .015) + ((2000000 - 400000) * .02) +((Price - 2000000) * .025);
    }
    }
    var Sum = parseFloat(form.Tax.value) + parseFloat(form.NTax.value);
    form.GTax.value = Sum;
    }
    randomNumber = (Math.round(Math.random() * 10000));
    
    // -->

    Just don't forget to uncomment the code removing <!-- and // --> :wink:

    Now your JavaScript will only load on that specifc page.

    Best Regards,
    Patrick Freitas

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.