Javascript In WordPress Posts
July 18th, 2007
IMPORTANT UPDATE ON 02 December 2009: JS seems to be enabled in recent WP releases. Can you take a look at this post and let me know what you discover?
OK. Enough. I’ve had it. How can WordPress not allow built-in Javascript in your post content. And more importantly, how come no-one has released a simple plugin to allow it?
Well, someone has.
Me.
Today.
It took about 5 minutes to write, after 2 hours of messing around with various alternative plugins, trying to hack them to work.
Download The Plugin
Click here to download the plugin.
Installation Instructions
1. Download the plugin
2. Unzip it
3. Copy the one file contained therein to your wp-content/plugins directory
4. Log into WordPress. Go to Plugins. Enable the plugin
5. Insert the javascript in your post.
Upgrade Instructions
1. Download the plugin
2. Unzip it
3. Copy the one file contained therein to your wp-content/plugins directory
That’s it.
WordPress Version Compatability
WP 2.7 – Version 1.0, 1.1 of the plugin works OK
WP 2.3.3 – Version 1.0, 1.1 of the plugin works OK
WP 2.3.2 – Version 1.0, 1.1 of the plugin works OK
WP 2.0.3 – Wordpress.com don’t keep a copy of this archive, so I can’t test this version.
Comments
I’m using the simple text editor in my posts, by disabling the WYSIWYG editor in my Wordpress profile. (See Users->Your Profile – uncheck the box marked ‘Use the visual editor when writing’)
I’ve not tried it with the visual editor, as I never use it anyway.
Update (18th July 2007): The WYSYWIG editor definitely breaks it when you edit the post (It puts a backslash in front of any single-quotes). You can go into the “code” view and fix it manually, but you have to do that each time you edit the post.
Update (20th July 2007) : I’ve just tested the plugin with two inline javascript calls, and one call to an external script and it worked fine. Just one note: any JS called in the post will ALSO take effect when you edit the post, since it will run in the preview section.
Update (3rd January 2008): I’ve started the “WP version compatability” list above. Feel free to let me know if you have another version, and the plugin works or doesn’t. I’ll do my best to keep this list up to date.
Update (03 February 2009): Just release version 1.1, which fixed some issues with Javascript code formatted in multi-line statements. No idea how I missed this one, but thanks to the people who do actually add their sample JavaScript code to the comments on this post!
Example
Just a note to thank you for the Javascript in post plugin. It is working great. I recently ran an online tool that checks to see if sites you are linking to are linking to so called “bad neighborhoods.” I link to a lot sites at Alphatracks and wanted to be sure everything was clean.
I discovered two sites (out of two hundred or so) were in fact, linking to other sites that were a little on the “spammy” side. I didn’t want to remove the links, because I believe the content I was linking to was of real interest to my readers. OTOH, no one really knows how Google and the other engines calculate their rankings, and I didn’t want take a chance of even these innocent links polluting my PR.
I considered the nofollow tag, but I’m not confident that it works 100 percent of the time. As an AJAX developer, I use javascript links all the time in web applications I work in. But Wordpress strips out javascript. So Javascript links were out. Until i discovered your plug-in.
It took a couple of minutes to install and to add Javascript links to the stories I had concerns about. Everything works great. The spiders will not follow the links to the sites linking to unsavory content. Yet my readers can still get to those external sites.
It may not make any difference in the long run. I only link to good, solid content that I think my readers will be interested in. If those sites are linking to bad neighborhoods, however, I feel better knowing that with your plugin I can protect my site;s reputation.
Thanks, Tom
http://alphatracks.com
Hey Tom,
Glad you found it useful. It’s always nice to know my efforts (all 5 minutes of it!) are appreciated
Regards,
Andy
Hi Tom,
a very useful plug-in! I’m looking all over the web to find this kind of tool. Kudos! I’ve used in on my last post to add that “get firefox with google toolbar” thing. Works flawlessly.
Thank you very much!
Harry
Gadgets and Gizmos World
You saved my life (the whole day actually)
i was going crazy trying to make javascript work on one of my posts, this thing you written just did the trick, i been trying to do it myself since 9am and it is now 7.40pm.
Put in a donate box and i’ll be the first to donate.
Thanks A million
Art, Harry,
Glad you both found it useful.
Art, all donations gratefully received! There’s a “buy me a beer” link down the right-hand side of each page
Regards,
Andy
Hi, I really wish I could get this plugin to work for me. I tried to add some javascript code from Text-Link Ads into a “page” post on my wordpress (2.2.2) blog, and it still seems to strip otu the content. I can add the script to a text box in the sidebar without trouble.
I even turned off the visual editor like you suggested. Any other thoughts?
Thanks!
Hi, thanks for the plugin, it works for me
Hi,
I’ve installed this plugin, but the javascript doesn’t work…
Great plugin! I’ve been using the Adsense Deluxe plugin in the past to get js into my posts, but your plugin is much more convenient.
I’m using WordPress version 2.0.3 and it doesn’t seem to work. Does this plug-in only work in recent versions of WordPress?
In the WYSIWYG editor, I click the HTML button, paste my javascript into the HTML view and click the Update button. All of my tags are then stripped out before I even save the post.
I also deselected the option in my profile labeled ‘Use the visual rich editor when writing’.
Thanx!
Hi Kyle,
Apologies for the length of time taken to get back to you. I’ve gone to http://wordpress.org/download/release-archive/ to download and install 2.0.3, and it’s not available, so I can’t test it.
I would recommend however, that if you have not yet upgraded to the latest wordpress, to do so, simply to resolve the various security issues that are left open in older versions of WordPress.
I hope that helps,
Andy
Hi Suzanne,
Again, apologies for the delay. I’ve just installed a test version of WP 2.2.2, and inserted a “hello world” alert into the “code view” of a post, and it works fine.
Are you still getting a problem?
Regards,
Andy
Daniele,
If you’re still having problems, which version of WP are you using?
Regards,
Andy
I install it on wp2.3.2. it doesn’t work
Hi Aric,
Can you give me a URL to look at?
Andy
Hmm…doesn’t work for 2.02…guess I need to upgrade
I have followed the Wordpress advice for inlcuding Javascript at: http://codex.wordpress.org/Using_Javascript and have Javascript working – but not as I would like. I wonder if your plugin may solve my problem…?
Everytime you visit my site – a popup window opens (relating to the javascript). I wonder if there is a way to stop this happening – I would only like the window to open if the visitor clicks the link to open the new window.
Any advice gratefully received! Thanks
Thanks for the link. I’m trying this plugin
Nice one thanks mate
hello,
today i try to put the java script into new ‘page’ but the javascripts doesn’t work. anyone can help me? below is the code i put there…
img1= new Image();
img1.src=”PRADAR1.gif”;
img2= new Image();
img2.src=”PRADAR2.gif”;
img3= new Image();
img3.src=”PRADAR3.gif”;
img4= new Image();
img4.src=”PRADAR4.gif”;
img5= new Image();
img5.src=”PRADAR5.gif”;
img6= new Image();
img6.src=”PRADAR6.gif”;
img7= new Image();
img7.src=”PRADAR7.gif”;
img8= new Image();
img8.src=”PRADAR8.gif”;
img9= new Image();
img9.src=”PRADAR9.gif”;
img10= new Image();
img10.src=”PRADAR10.gif”;
imgarray = new Array(10);
imgarray[1] = new Image();
imgarray[1].src = “PRADAR1.gif”;
imgarray[2] = new Image();
imgarray[2].src = “PRADAR2.gif”;
imgarray[3] = new Image();
imgarray[3].src = “PRADAR3.gif”;
imgarray[4] = new Image();
imgarray[4].src = “PRADAR4.gif”;
imgarray[5] = new Image();
imgarray[5].src = “PRADAR5.gif”;
imgarray[6] = new Image();
imgarray[6].src = “PRADAR6.gif”;
imgarray[7] = new Image();
imgarray[7].src = “PRADAR7.gif”;
imgarray[8] = new Image();
imgarray[8].src = “PRADAR8.gif”;
imgarray[9] = new Image();
imgarray[9].src = “PRADAR9.gif”;
imgarray[10] = new Image();
imgarray[10].src = “PRADAR10.gif”;
var timeoutValue = 500;
var animDelay = 1000;
var numOfImages = 10;
var imageIndex = 0;
var timeoutID = 0;
var playMode = 1;
function animImageInc()
{
if (imageIndex 1)
imageIndex–;
else
imageIndex = numOfImages;
}
function setCurrImage()
{
document.MainImage.src = imgarray[imageIndex].src;
}
function updateAnim()
{
var currTimeoutValue;
currTimeoutValue = timeoutValue;
if (playMode == 1)
{
animImageInc();
if (imageIndex == numOfImages)
currTimeoutValue += animDelay;
}
else
{
animImageDec();
if (imageIndex == 1)
currTimeoutValue += animDelay;
}
setCurrImage();
timeoutID = setTimeout(”updateAnim()”, currTimeoutValue);
}
function clearLastUpdate()
{
clearTimeout(timeoutID);
timeoutID = 0;
}
function startPlay()
{
clearLastUpdate();
playMode = 1;
updateAnim();
}
function startPlayReverse()
{
clearLastUpdate();
playMode = 2;
updateAnim();
}
updateAnim();
>” style=”background-color:white;”>
<input type=”button” onclick=”startPlayReverse()” value=”Play <
>” style=”background-color:white;”>
<input type=”button” onclick=”animImageDec();setCurrImage()” value=”<
>” style=”background-color:white;”>
document.PlayForm.IntervalValue.value = timeoutValue;
This javascript plugin is exactly what I have been looking for. Thanx a lot.
Thanks for the plugin, it works great!
Hi Daniel,
The issue might be one of two things: either the plugin isn’t working, or the javascript doesn’t work at all (even if you run it outside of WP).
Have you tested the javascript on a normal webpage?
If you have, and it works OK, post back some more details (which version of WP, maybe the URL) and I’ll see if I can help further.
Regards,
Andy
Wordpress version: 2.62
Plugins: AYB Javascript In Posts, HeadSpace2, Per-Post CSS, Permalink Redirect.
I pasted javascript into wordpress page the javascript did not load. I pasted javascript into regular .html page to test and javascript loaded. I disabled visual editor in wordpress. Not sure what problem is any suggestions appreciated.
Hi Andrew,
I have the same problem as Daniel.
I have been trying to put the new Pepperjam store javascript on my wordpress blog pages and it aint happening.
I just get a blank area.
I tested the script on a html and php page which I put in a sub folder on one of my other sites and the script worked fine but it just won’t show on wordpress.
There is room for a Pepperjam store builder wordpress plugin…wink wink lol
But joking aside here is the URL where I have the script if you have time:
http://feelinggroovy.org/hippy-rugs/
Thanks,
Nigel.
Hi Nigel,
It looks like you got it working – can you tell me how in case it’s useful for other readers?
Andy
Hi PK,
I’ve just installed a fresh copy of 2.6.2, and added a post with
[script]
alert(’hello’);
[script]
Obviously, I used < and > rather than [ and ]
It works fine. Can you create a page or post with your JS and I’ll take a look?
Regards,
Andy
Somehow it does not work on my WordPress Page. The strange thing is, in Preview it works well, even without this Plugin…
Hi Matthias,
A couple of questions:
1. Which version of WP are you using?
2. Can you share the URL?
Regards,
Andy
Does this plugin conflict with Smart YouTube plugin?
Hi Ginko,
Unfortunately, it’s not feasible for me to test my plugin with every other plugin available. There are simply to many, even if I test my plugin with 1 other. If you take into account many people could have 10+ plugins installed, testing every combination would take my entire life.
And given I’ve offered the plugin free, that’s not something I’m able to do.
So, my suggestion is for you to try it with your plugins and your theme, and see if it works. If it doesn’t, you simply disable and delete my plugin. All in all, it should take you less than 5 minutes.
Regards,
Andy
Hi Andrew,
I’m hoping you can offer some insight. I’m trying to get a piece of javascript working on wordpress, but alias, even with your plugin, the darn thing just doesn’t want to work. Would you be able to offer a small amount of insight?
Thanks
Frank.
Code from http://www.dynamicdrive.com/dynamicindex2/mikescroll.htm
/*
Mike’s DHTML scroller (By Mike Hall)
Last updated July 21st, 02′ by Dynamic Drive for NS6 functionality
For this and 100’s more DHTML scripts, visit http://www.dynamicdrive.com
*/
//SET SCROLLER APPEARANCE AND MESSAGES
var myScroller1 = new Scroller(0, 0, 480, 32, 1, 5); //(xpos, ypos, width, height, border, padding)
myScroller1.setColors(”#006600″, “#ccffcc”, “#009900″); //(fgcolor, bgcolor, bdcolor)
myScroller1.setFont(”Verdana,Arial,Helvetica”, 2);
myScroller1.addItem(”Click here for Dynamic Drive, the net\’s #1 DHTML site!“);
myScroller1.addItem(”Visit Brain Jar, Mike\’s great coding site!“);
myScroller1.addItem(”Looking for free JavaScripts? Visit JavaScript Kit.“);
myScroller1.addItem(”Discuss and get help on web coding, at CodingForums.com“);
//SET SCROLLER PAUSE
myScroller1.setPause(2500); //set pause beteen msgs, in milliseconds
function runmikescroll() {
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to position the scrollers.
layer = getLayer(”placeholder”);
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(100);
myScroller1.show();
}
window.onload=runmikescroll
Just tried the plugin on WP 2.7 and it’s not working for me. I both page and posts.
P.S. Tested script in a normal web page and the script works ok.
Any assistance will be greatly appreciated.
Your plug is a must have for me!
I tried this script:
But it did not show up at all
I am using version WP 2.3.2
The script is:
I purposely added spaces.
The script is:
>div id=’Calculator636′>
>script type=’text/javascript’ src=’http://www.calculators4mortgages.com/dspcalculator.php?pi=636′>
>/script>
using WP 2.2 and the plug in is not appearing to work.
Have script installed on this page
http://blog.oncallservices.co.uk/?page_id=335
This is the script
Nothing is happening though
Any thoughts?
Stuck on this version of WP until I can remember how to do a manual upgrade as my host, although providing WP as a add on module, does not support automated updgrade to any of the software they provde *duh*
(any one with ideas on how to do a COMPLETE manual upgrade let me know)
Chris
Thank you, thank you, thank you for the plug in allowing Javascript in my blog at advancingwomem.com/wordpress
I can’t tell you how much I appreciate this. So, thank you again.
Hi Ken,
I’ve got the script working on a test site: http://automateyourbusiness.com/test-wp2/?p=28
That install is WP 2.7 – I’d absolutely recommend you upgrade to the latest version of WP – not just for this plugin, but to keep up to date with security enhancements.
Regards,
Andy
Sorry Ken, I should have added – I used double-quotes. The single-quotes (which seem to go the wrong way) in your comment are auto-corrected by WP.
Try it with double quotes in your WP version, and let me know how you get on.
Regards,
Andy
Gretchen,
Glad you found it useful!
Andy
Hi Chris,
A simple one – there’s a carriage-return in the middle of the code, just after the “JavaScript”.
Take that out, and re-publish.
You can see it working here:
http://automateyourbusiness.com/test-wp2/?p=48
Regards,
Andy
Hi Mack,
Can you share the code you’re trying to use (replace the < and > with [ and ] )
Regards,
Andy
Hi Frank,
I’ve kind of got this working with my development version of the plugin. You can see it here:
http://automateyourbusiness.com/test-wp2/?p=50
The text appears, but it’s not scrolling.
I can take the same code and use it in a non-WP page, and it works fine.
Only in WP do you get the messed up view you can see in the sample post, so I think it might be something to do with some conflicts between WP and the specific DHTML scroller code, probably in the stylesheet details.
I’ll keep on looking at it for a bit longer, but I’m not holding out much hope for finding a resolution.
You are a frickin’ genius. THANK YOU for creating this.
Awesome, this is a bomb plugin for WordPress I’ll have you know.
Thank you Andrew.
Edward
Hi. Just try plugin. Have some problems with alert(’hi’);- WordPress replace ‘ with \\’
But alert(”hi”); work fine. Thanks!!
Hi Andrew, just downloaded your plugin. I am trying to add a slide show to my post and it’s not working. I saved the actual JS code in its own document and I am simply calling to the script in my post:
I know that the code is correct, as it’s working on an html page. Any suggestions? Thanks in advance.
ahh.. sorry.. the code got stripped away: