Nov 182013
 

Last Updated: November 18, 2013

Add Javascript to WordPress Post or Page tutorial teaches you how to add javascripts and other codes to WordPress post and pages.

Revision Update: Tested with the latest WordPress 3.7.1. Removed PureHtml from my recommendation because it has not being updated for too long. I have added another plugin Insert Html Snippet, which I have tested on WordPress 3.7.1.  

Important: I have removed all support and information for WordPress 3.4.2 and 3.5.2. You should be running a minimum of 3.6.1. 

If you install Ultimate TinyMCE which is maintained on a regular basis and supported very well, provides some nifty tools for you to add many different videos and other codes.

I have tested adding JavaScript and other codes using the following versions of WordPress 3.6.1, 3.7.1 and 8 alpha. With the following operating system Windows 7 and Ultimate TinyMCE 5.1.

The browsers tested:

  1. IE 10, IE 9
  2. FireFox 25.0.1
  3. Chrome 33.0.1707.0 Dev
  4. Seamonkey 2.22

Remember: Always have the latest version of the browser installed. Make sure you clear your cache regularly. Make sure Java is updated.

Copy and paste the iframe code on your post or page through the Text editor by clicking on HTML tab. The editor will place the iframe in between < p > < /p > tag. See image below.

 add javascript to wordpress

Using Ultimate TinyMCE.

The following instructions are for those who want to use the plugin to add an iframe. Select the following icon and add your code, url and other settings you prefer. See images below.

Remember: You need to set up Utlimate TinyMCE and add all the tools you want to include in your wysiwyg editor especially the one used in this tutorial.

ultimate-tinymce-insert-icon

ultimate-tinymce-add-scripts-part2

ultimate-tinymce-add-scripts

ultimate-tinymce-add-scripts-advanced

ultimate-tinymce-add-scripts-view-source

 

Alternative you can use one of these two plugins Insert Html Snippet and RawHtml, which works very well.

I have tested Raw HTML recently, it was updated up to version 1.4.10 compatible with WordPress 3.6 Beta 2. There are some reporting issues with WordPress 3.6.1. Remember if it does not work for you, always report it to the developers. The culprit could be another plugin or the theme. Also remember that this version of the plugin is not compatible with WYSIWYG editor. It is only compatible with the HTML editor. To use with the WYSIWYG editor you need to purchase the Pro version.

Important: As always one of my golden rules create a backup before you try any new plugin just in case it causes other issues.

I hope this helps you and puts you on the right track. If you need any help just leave a comment or send me a message.

Come back for more information as I keep updating this post.

Good luck ;)

LinkedIn
Manuel Ballesta Ruiz has written 201 posts. He can be followed on Twitter.

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

  1. 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

    • 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

  2. 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.

  3. 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.

    • 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

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

        • 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

      • 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.

        • 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?

  4. 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

    • 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

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

    • 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

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

  7. 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 !!!

    • Webmaster

      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

  8. 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

    • 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

  9. 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.

 Leave a Reply

(required)

(required)

19 − 4 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>