Title: Adding Javascript to a WP page
Last modified: August 30, 2016

---

# Adding Javascript to a WP page

 *  Resolved [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/)
 * I’m trying to create a wordpress page that runs javascript.
 * I think I have followed the directions from the WordPress codes Using_Javascript
   page
 * This is what I have done:
    1) I created a file called instant_icon_widget.js 
   and uploaded it to my themes js folder (theme is ipinpro). This is the javascript
   code:
 * [Large code excerpt removed by moderator per [forum rules](https://codex.wordpress.org/Forum_Welcome#Posting_Code).
   Please use [the pastebin](http://wordpress.pastebin.com/) for all large code 
   excerpts. It works better anyway.]
 * I had this code running on an HTML page previously, so I’m pretty sure the code
   itself is fine.
 * 2) I added the code to the functions.php file of my theme which looks like this:
 *     ```
       function instant_icon_widget() {
       wp_enqueue_script('instant_icon_widget', get_template_directory_uri() . '/js/instant_icon_widget.js', array(), null, true);
       }
       add_action('wp_enqueue_scripts', 'instant_icon_widget');
       ```
   
 * 3) I created a page template called page_instant_icon_widget.php which looks 
   like this:
 * [Large code excerpt removed by moderator per [forum rules](https://codex.wordpress.org/Forum_Welcome#Posting_Code).
   Please use [the pastebin](http://wordpress.pastebin.com/) for all large code 
   excerpts. It works better anyway.]
 * 4) I set up a page in WordPress which references the template. Only thing on 
   the page is the page title and then in the page attributes section _instant_icons
   is selected as the template.
 * What I see when I view this page is just the page header and title of the page(
   from the page template). Nothing else – not even the html that is in the javascript.
 * I’ve obviously done something wrong (and I’m hoping it’s just something silly
   I’ve missed).
 * Thanks,
    Coleen

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Ashley](https://wordpress.org/support/users/nosegraze/)
 * (@nosegraze)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637575)
 * So do you see the `<div class="container-fluid">` div or script tags at all?
 * One thing you have done incorrectly is the JavaScript. You used the `wp_enqueue_script`
   function (step #2), which is perfect. That automatically adds the JavaScript 
   to your footer.
 * But this part in #3 is unnecessary:
 *     ```
       <script type="text/javascript"><!--//--><![CDATA[//><!--
        instant_icon_widget();
        //--><!]]></script>
       ```
   
 * That won’t do anything useful.
 * Basically, the `wp_enqueue_script` function you used in step #2 automatically
   adds the JavaScript file to the `wp_footer()` function. This MUST be in your 
   footer.php file, otherwise the JavaScript file won’t be included correctly.
 *  Thread Starter [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637626)
 * I’m confused as why you say that the wp_enqueue script function I used in step#
   2 adds the javascript file to the footer? I have placed this code in the theme’s
   functions.php file.
 * I do not see anything after the “Instant Icons, Your Blog Helper” title until
   it reaches the footer I have (which I do see).
 * If the part in #3 is unnecessary:
 *     ```
       <script type="text/javascript"><!--//--><![CDATA[//><!--
        instant_icon_widget();
        //--><!]]></script>
       ```
   
 * then how do I tell the template page to actually execute the javascript function
   on that page? That’s what I thought I was doing there. Perhaps that’s the problem?
 * Coleen
    Coleen
 *  Thread Starter [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637816)
 * Sorry for not doing this properly. I’ve made changes and I seem to be closer,
   but it’s still not working. So let me try again to get help.
 * This is what I’ve done…
    1) I’ve created instant_icon_script.js file that contains
   just the javascript code functions. One of those functions is “checkProduct”.
   2) I’ve created a instant_icon_style.css file that contains the styling for the
   page. 3) I’ve added these lines to the function.php file of my theme:
 *     ```
       //Instant Icons
       function add_instant_icon_script() {
       	wp_register_script('instant_icon_script', get_template_directory_uri() . '/js/instant_icon_script.js', false);
       	wp_enqueue_script('instant_icon_script');
       }
       add_action( 'wp_enqueue_scripts', 'add_instant_icon_script' );
   
       function add_instant_icon_style() {
       	wp_enqueue_style('instant_icon_style', get_template_directory_uri() . '/css/instant_icon_style.css');
       }
       add_action( 'wp_enqueue_scripts', 'add_instant_icon_style' );
       ```
   
 * Then on the page that I want this javascript to execute on, I’ve loaded the html
   coding which looks like this:
 *     ```
       <div class="stampinup">
          <form method="post">
             <div class="formarea">
                <div class="fieldbox">
       	    <label for="productnumbers">Enter Stampin' Up product numbers</label>
       	    <textarea name="productnumbers" id="productnumbers"></textarea>
       	 </div>
       	 <div class="fieldbox c">
       	   <button id="addproducts" onclick="return checkProductID();">Add Products</button>
                  <button id="clearproducts" onclick="return clearProducts();">Clear</button>
                </div>
             </div>
          </form>
   
          <div id="stampinup_errors_box"></div>
   
          <div id="stampinup_results">
       	<h3>Preview</h3>
       	   <div id="stampinuppreview"></div>
       	<h3>Copy this code</h3>
       	   <textarea id="widgetcode"></textarea>
          </div>
        </div>
       ```
   
 * You can see the call to the javascript checkProductID(); when the “Add Products”
   button is clicked. However nothing happens when the button is clicked, the javascript
   isn’t being executed at all.
 * I also tried creating a page template with the same HTML code and use it for 
   the page and I get the same results – nothing.
 * Where have I gone wrong?
    Thanks, Coleen
 *  Thread Starter [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637819)
 * I’ve determined that I have set up the javascript properly in WordPress and that
   my javascript is actually being executed. But it’s got something that WordPress
   doesn’t like in it (this script works fine outside of WordPress). Can anyone 
   shed insight into what WordPress doesn’t like?
 *     ```
       function grabData(id,rv) {
        var xmlhttp = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
           res = JSON.parse(xmlhttp.responseText);
           for (i = 0;i < res[0].length;++i) {
            items.push(res[0][i]);
           }
           errors = [];
           for (i = 0;i < res[1].length;++i) {
            errors.push(res[1][i]);
           }
           drawItems();
           drawPreview();
           drawErrors(errors);
          } else {
           console.log('Error: '+xmlhttp.status);
          }
         }
        }
        xmlhttp.open("GET", "stampinup.php?a="+encodeURIComponent(rv), true);
        xmlhttp.send();
        document.getElementById("productnumbers").value = "";
       }
       ```
   
 * I’m getting into the else statement which writes a 404 error to the console.log
 * Here is the call to grabData:
 *     ```
       function checkProductID(){
       	alert('entering checkProductID');
        grabData("stampinuppreview",document.getElementById("productnumbers").value);
        return false;
       ```
   
 * Thanks,
    Coleen
 *  Thread Starter [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637830)
 * It turned out that the problem was that this code is going out to another website
   to get data. I needed to add to my .htaccess
    `header set Access-Control-Allow-
   Origin "*"` To allow it to get data from an external site. Coleen
 *  Thread Starter [castalos](https://wordpress.org/support/users/castalos/)
 * (@castalos)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637831)
 * Issue resolved

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Adding Javascript to a WP page’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [page](https://wordpress.org/support/topic-tag/page/)
 * [Setup](https://wordpress.org/support/topic-tag/setup/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [castalos](https://wordpress.org/support/users/castalos/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/adding-javascript-to-a-wp-page/#post-6637831)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics