Adding JavaScript to WordPress Posts Without a Plugin

If you have installed your own WordPress blog on your server, you may want to include some JavaScript goodness from time to time.

The bad news is that WordPress likes to screw around with tags when using the WYSIWYG post editor. That makes it kind of hard to, say, embed a video in one of your posts.

The good news is that there is a very easy way to embed any kind of JavaScript in your posts without the need to install any plugins, or change any configuration settings. And it works beautifully with the WYSIWYG editor…

So, let’s say you’d like to embed a video:

<div id="video1" style='display:none;'>Error Loading Video!</div>
<script type="text/javascript">
var so = new SWFObject('http://my.server.com/vids/mediaplayer.swf','vidplayer','320','240','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('file','http://my.server.com/vids/my_video.flv');
so.write('video1');
</script>

You click the HTML tab in the editor, paste your code in, and publish your post. Unfortunately, you end up with something like this:

<div id="video1" style="display: none;">Error Loading Video!</div>
<p><script type="text/javascript">// < ![CDATA[
var so = new SWFObject('http://my.server.com/vids/mediaplayer.swf','vidplayer','320','240','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('file','http://my.server.com/vids/my_video.flv');
so.write('video1');
// ]]&gt;</script></p>

OOPS! That’s not going to work. At this point, you might go foraging about for a plugin that will give you super-duper JavaScript capabilities. But there’s a much easier way to get what you want without any plugin at all:

1. Create a directory on your server for JavaScript. You can put it in your theme directory or wherever else you’d like. For this example, let’s say we’re going to use: http://my.server.com/js/
2. Copy all the lines inside the <script> tags and plop them into a file, which we’ll call my_video.js
3. Put your new my_video.js file into your new js/ directory on your server, so it is accessible on the web like so:
   http://my.server.com/js/my_video.js
4. In your WordPress post, switch to the HTML view and add these lines:

<div id="video1" style="display: none;">Error Loading Video!</div>
<script src="http://my.server.com/js/my_video.js" type="text/javascript"></script>

Now carry on editing your post, and submit it when finished. When you view the new post, the JavaScript include you added will go to your server, grab your my_video.js file and plop it into your new post. WordPress won’t monkey with the single line <script...></script> stuff. It might wrap it in <p></p> tags, but that’s generally no big deal. And caching plugins should be perfectly happy with it.

Using this very easy little technique, you can include flash audio players, video players, and all kinds of other scripts and fun little toys in your WordPress posts… all without a plugin! What’s more, all your JavaScript is kept neatly in files that can be easily reused in other posts.

Note that in our example, if the JavaScript fails to load the video, or if the my_video.js file cannot be found on the server, the user will see the DIV with the text “Error Loading Video!”

Pretty nifty, eh?

[ad name=”banner”]