Apr 192014
 

Last Updated: August 18, 2014

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

Revision Update: I have modified the tutorial as pointed out by Joan below in one of the comments. Thank you for that.

If you install Ultimate TinyMCE (It has now chaged to WP Edit. It only works with WordPress 3.9 and above) which is maintained on a regular basis and supported very well, it 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.9.2. With the following operating system Windows 7 and WP Edit 2.2.

The browsers tested:

  1. IE 11, IE 10 and IE 9
  2. FireFox 28
  3. Google Chrome 34.0.1847.116 m
  4. Seamonkey 2.25

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

Important: When adding javascript to your post or page, if you change between the HTML and Visual editor you might loose the code. Or you might have a conflict with another javascript added via your theme in the header or footer. It is important to remember this point. Also as a golden rule as well for better performance you should be adding the code to your header or footer and then calling the function from your page or post. 

Add Javascript to WordPress Post or Page Steps

1 ) The following image shows you a very simple javascript code added to a post.

  • document.write = which will write the text to your post. The text that it will write is Hello World!.

add-javascript-to-wordpress-html-editor

2 ) The following image Visual  editor shows you what you have typed in the Text editor. This time you have switched to the Visual editor to see what it looks like. You can see that the javascript code is not displayed.

add-javascript-to-wordpress-visual-editor

3 ) The following image you have switched back to the Text  editor. This time you will notice some code added by WordPress, // <![CDATA[ at the beginning of the script and // ]]> at the end of the script.

add-javascript-to-wordpress-code-changed

4 ) The following image shows you the end result viewed from the front of your website. You can see Hello World!. That is how simple it is to add some javascript code.

add-javascript-to-wordpress-final-result

Add iframe To WordPress Post or Page

1 ) Copy and paste the iframe code you selected to 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.

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

 

Javascript Plugins I Recommend

  • Insert Html Snippet Add HTML, CSS and javascript code to your pages and posts easily using shortcodes.
  • RawHtml Lets you use raw HTML or any other code in your posts. You can also disable smart quotes and other automatic formatting on a per-post basis.

In regards to Raw HTML has two versions, the free and Pro. The free version only works with the HTML editor, it is not not compatible with WYSIWYG 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 an e-mail.

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

Enjoy

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

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

  10. 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?

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

 Leave a Reply

(required)

(required)

sixteen + ten =

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>