Add Javascript to WordPress Post or Page

  30 Responses to “Add Javascript to WordPress Post or Page”

1. 

   Geej Mauriva says:

   December 20, 2011 at 4:31 am

   I tried the above adding the p tag and the   and it did not work. I will try the plugins and see what happens.

   Thanks,
   -Geej Mauriva

   Reply
   • 

     manu says:

     December 20, 2011 at 10:47 am

     Hello Geej, it is very challenging to get it work properly. Remember that if you have TinyMce Advance plugin installed try to disable it and see if it works. Also they have released an update for TinyMce Advance plugin. I have not tested the update yet. The plugins I mention will work, I have done some testing with the plugins and they work very well.

     Kind regards

     Reply
2. 

   Grace Walker says:

   February 26, 2012 at 1:17 am

   Please write more article as you are a great writer. I am so happy reading your work because it is so informative and full of ideas. Write and write because you have the potential.

   Reply
3. 

   gameletjapplet says:

   November 26, 2012 at 11:14 pm

   I want to insert some code like this, but it failed!
   

   var ARRcookies=document.cookie.split(";");
   if( ARRcookies.length == 0 )
   document.writeln("No cookie found.");
   else{
   document.writeln("");
   for (var i=0;i<ARRcookies.length;i++){
   var x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
   var y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
   x=x.replace(/^s+|s+$/g,"");
   document.writeln(""+x+""+y+"");
   }
   document.writeln("");
   }

   
   Wordpress changes it to:
   
// <![CDATA[
var ARRcookies=document.cookie.split(";");
if( ARRcookies.length == 0 )
document.writeln("No cookie found.");
else{
document.writeln("
");
for (var i=0;i<ARRcookies.length;i++){
var x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
var y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^s+|s+$/g,"");
document.writeln("
"+x+"
"+y+"
");
}
document.writeln("
");
}
// ]]>

   And this cannot run.

   Reply
   • 

     Webmaster says:

     November 26, 2012 at 11:36 pm

     Hi gameletjapplet, thank you for your question. If you are going to insert a javascript code into WordPress you need to enclose the code with a html tag as follow:

     < script>
     alert ("My First JavaScript") ;
     < /script>

     Remember to remove the spaces I have added so the code could be displayed and not run

     If you don’t use tags then the code will not work. The other method is to create a .js file and upload to the page via the following method.

     < script src="myScript.js">< /script>

     I hope this helps you.

     Kind regards

     Reply
     • 

       Xiu says:

       December 1, 2012 at 4:15 am

       Event I add to my page, it’s still not working.

       Reply
       • 

         Webmaster says:

         December 1, 2012 at 9:15 am

         Hello Xiu, thank you for your question. Can you provide more details so that I can work out what is happening and why you can’t add it to your page.

         Kind regards

         Reply
     • 

       gameletjapplet says:

       December 21, 2012 at 10:07 pm

       Well, I had already added tag. I just didn’t show it in my comment. Simply put, even I add it to my page, it’s still not working.

       Reply
       • 

         Webmaster says:

         December 21, 2012 at 11:42 pm

         Hi, are you inserting the code in a page or post? What version of WordPress are you running? Try an install TinyMCE Advanced plugin. Have you tried to install any of the two plugins mentioned in my tutorial?

         Reply
4. 

   Christina says:

   January 25, 2013 at 12:55 am

   Hey there!
   Thank you for your wonderful tutorial.
   I have the same issue – i can’t get the javascript to work.

   I have an external gallery.js-file with this code:
   

   function swap(image) {
   document.getElementById("main").src = image.href;
   }

   In my post, I call the script with these lines:
   

   Directly after, I insert my gallery with images from my swap gallery:

   I’m using WordPress Version 3.5 and have no text-plugins installed.
   Can you tell me where I make a mistake? I’m so frustrated >.<

   Thank you very much!
   Christina
   I'm looking arou

   Reply
   • 

     Webmaster says:

     January 25, 2013 at 4:23 pm

     Hello Christina, thank you for your question. I am sorry to hear you are having problems with your code. Can you please add the code using < pre>< /pre> html tangs please because unfortunately your code did not show up.

     Kind regards

     Reply
5. 

   Knott says:

   January 26, 2013 at 6:00 am

   Is it possible to just globally disable the code that strips out the JavaScript from pages or posts, altogether?

   Reply
   • 

     Webmaster says:

     January 26, 2013 at 8:03 am

     Hello Knott, that would mean removing some very important php code from the core files. So the answer is no, unfortunately. You can always try to insert the javascript code into the header or footer on your theme.

     Kind regards

     Reply
6. 

   Adam T says:

   February 16, 2013 at 9:35 am

   You’re a life saver, Manuel. Thanks for posting this.

   Reply
   • 

     Webmaster says:

     February 16, 2013 at 9:49 am

     You are most welcome Adam.

     Reply
7. 

   Laurent says:

   February 28, 2013 at 10:26 pm

   hello, thanks for your post, could you please tell me how to insert that code in a page of my wordpress site:

   function calculate_payment(theform) {
   var CV = parseFloat(theform.capital.value)
   var FV = 0
   var rate = parseFloat(theform.interest.value) / 100
   var nper = -parseInt(theform.period.value)
   var type = 0
   theform.payments.value = (CV * (rate / 12)) / (1 – Math.pow(1 + rate / 12, nper))
   }

   Kind regards !!!

   Reply
   • 

     Webmaster says:

     March 1, 2013 at 2:04 pm

     Hello Laurent, thank you for your question. This is actually a function correct? If you are using a function in WordPress then you have to call that function somewhere else in a page or post.

     Let me know if you understand what I mean.

     Kind regards

     Reply
8. 

   Ricky says:

   March 27, 2013 at 8:49 pm

   Most JavaScript should be placed in the header/footer, and this is a requirement for some scripts to function correctly. Adding JavaScript like this is not good, you should use the functionality already built into WordPress for example place this in the header:

   <code>

   </code>

   Or you can do a similar thing in the function.php file, the benefit of doing it this was is it’s cleaner, and it’s easier to add another page should it be used again in future like:

   <code>

   </code>

   Ricky

   Reply
   • 

     Webmaster says:

     March 28, 2013 at 8:26 am

     Hello Ricky thank you for your comment. Yes agree with you that the best method is to add the javascript to the header or footer but some are not technically minded and this method although not the best still works. Can you post your code again for others to view.

     Kind regards

     Reply
     • 

       Ricky says:

       March 28, 2013 at 10:23 am

       For some reason it stripts out the code even when using

       <code>

       , can you manually add it?

       Reply
       • 

         Webmaster says:

         March 28, 2013 at 10:48 am

         Hello Ricky can you send me an a message with the code.

         Thank you

         Reply
9. 

   Ricky says:

   March 28, 2013 at 10:22 am

   Hey, Yeah I do understand why you done it like this, but personally I think it’s easier the way it’s done below (with less chance of it going wrong and you getting lots of ‘support’ comments) though that could just be because I am technically minded ;-P

   <code>

   Put JavaScript Here

   </code>

   The above will only show whatever is between the PHP tags.

   Reply
10. 

    joan says:

    August 15, 2014 at 12:14 pm

    This doesn’t explain how a single html page can use (reference) an external javascript file using such plugins. HTML addition as a snippet is clear enough, but how do you use a plugin for the equivalent of inserting references in the head section?

    Reply
    • 

      Webmaster says:

      August 15, 2014 at 10:21 pm

      Hi Joan, thank you for your question. You are correct in regards to the post not explaining how to reference an external javascript to a single post or page. I have being wanting to edit this post some time back but things have being so busy :). In regards to adding a javascript reference in the header, the following URL wordpress.org has some great illustrations for this. Perhaps in the near future I will amend this post to better explain adding javascripts code.

      Once again thank you for your question and sharing your views.

      Reply
11. 

    joost says:

    June 12, 2015 at 9:09 am

    I am using the iFrame from the WP Edit (new name for Tiny MCE Editor) in a java script to post the result of a query.
    The iFrame shows plenty of space in the editor window, but once I pre-view the page, the iFrame is only about 5 lines high. The result of the query is cut off vertically.

    In the plug in, there is no other setting I can find to change the size of the display area. It is already set to 100% vertical and horizontal.

    Any thoughts?

    Reply
    • 

      Webmaster says:

      June 12, 2015 at 10:44 am

      Hi Joost, thank you for your question. I had a look at your website and my judgement tells me it could be related to your theme. Can you send me a private message through my contact form with the URL in question so that I have a look.

      Thank you

      Reply
      • 

        joost says:

        June 15, 2015 at 7:23 am

        Here is an update to my question about sizing the iFrame.

        I discovered that I can influence the size by using px, instead of %.
        I now have it to cover as much width as possible, because the result of my query that is displayed in the iFrame is large (it is an interactive visualization).
        So although I am not sure if the % will work in some way, I am past my hurdle with that.

        I will submit a separate Q for a new issue with the iFrame.

        Joost

        Reply
        • 

          Webmaster says:

          June 16, 2015 at 2:16 pm

          Hi Joost, it is good to hear that you have found a solution to your previous question. iFrames don’t work with percentage values, you have to use pixels.

          Regards

          Reply
12. 

    Abeon says:

    January 22, 2016 at 12:08 pm

    WP edit seems to work well for most things. It fills out the basic WordPress post box nicely… I was having some issues posting embed code, but this helped :)

    Reply
    • 

      Webmaster says:

      January 22, 2016 at 12:23 pm

      Hi Abeon thank you for your comment. I am glad my post helped you.

      Kind regards

      Reply