Apr 042012
 
add-javascript-to-wordpress-post-or-page

Donate for a cup of coffee :)

Add javascript to WordPress post or page

Revised on WordPress 3.3.1 and latest TinyMce Advance Plugin version 3.4.5.1.

I have installed TinyMce Advance plugin. The issue below is related to the old plugin. You might be experiencing the same issue as I have or maybe because of the browser you are using? If you have updated the plugin to the latest version and you are running the latest WordPress version then your problem might be resolved.

I have tested the latest version of WordPress and TinyMce Advance Plugin and it works well.

The browsers I tested are:

  1. IE 9
  2. FireFox 12.0
  3. Chrome 19.0.1084.1
  4. Seamonkey 2.9

I have set the Advanced options settings under TinyMCE Advanced settings to: Stop removing…… and now what you see when entering or copying the script code under HTML editor and saving it, 2 added paragraphs <p> see image below:

 Add javascript to wordpress revised

The following instructions are for those who are still using the old version of the plugin and or are still having problems with the latest version.

To add a JavaScript file i.e from youtube to your page or post click on HTML on the top editors bar on your WordPress editor and paste your code into the page. See image below.

Add javascript to wordpress page or post image 1

Once you are in the HTML editor paste or type your code. See image below.

Add javascript to wordpress page or post image 2

The image above should work but what happens when you click on Visual tab and then click on HTML tab again the code disappears. This is very strange and I have tested the above on FireFox, IE, Chrome and Seamonkey browsers and get the same result. So in order to eliminate this issue after extensive research on the internet I came up with the conclusion of adding some code in between script tag and paragraph tag. By adding some html tag code it stops WordPress wysiwyg editor from striping the code. I added a line space html code see image below.

Add javascript to wordpress page or post image 3

When you click on the Visual tab and then click on HTML tab, WordPress wysiwyg editor creates a space and 3 lines. See image below.

Add javascript to wordpress page or post image 4

While you are in HTML editor click on update then click on Visual tab and again HTML tab and it adds a break html tag or in some case it might add 2 break html tags and also a space in between the break tag and the closing paragraph tag. See image below.

Add javascript to wordpress page or post image 5

Now you can just leave the page and navigate else where in WordPress. This can become very messy and sometimes it does not work well depending on the browser you use.  If you deactivate the plugin TinyMce Advance you will not experience the same issue above.

Alternative you can use one of these two plugins Pure Html and RawHtml, which works very well. I have tested both plugins in WordPress 3.2.1 and WordPress 3.3 and both work well.

I hope this helps you better understand how to add JavaScript to your page or post. If you need any help just leave a comment.