blog geek programming tips wordpress

using javascript code in wordpress posts and pages

For this bookmarklet creation tool I posted a while ago I noticed that it was actually quite hard to get some custom written JavaScript code embedded in a WordPress post. When searching for a solution to the issues I ran into, I noticed there either wasn’t a lot of info to be found on this topic, or the plugins that where supposed to fix this where either not working or causing other side effects.

So what kind of issues did I run into when trying to get my JavaScript code to work?

  1. Empty lines in JavaScript code cause a “<p>” paragraph tag to be inserted causing it to become invalid.
  2. Using CDATA tags as proposed by some does not prevent the paragraph tags from being inserted when white-lines where used. Once you save your post or page the editor will wrap the code in CDATA tags anyway, but that doesn’t cause any problems.
  3. HTML tags in strings used in the code caused the tags to be filtered out by the WYSIWYG editor.

What I wanted to find was a solution that allowed me to used JavaScript directly in the WP post and that made it safe to switch between HTML-code view and the visual editor. I found that sometimes the JS code works as long as you stay in the HTML-view, but as soon as you switch to the visual-view it gets mangled up, causing the code to break. This is a bit fragile and it would really suck if you’d have to fix the same code over and over again simply because you edited it in the wrong view. So we have to avoid this at all cost. A (working) plugin would be nice, and I didn’t feel like changing templates or core WP files to get this to work.

So how do you get it to work then without having to install any additional plugins?

  1. Don’t use empty lines in-between the code lines. It’s annoying to read since it’s all packed together but you can’t avoid  the paragraph tags from being inserted any other way.
  2. To avoid the HTML tags from being removed from the string data you have to break up the HTML tags so the editor’s regular expression matches don’t catch them any more. For example instead of the string ‘<br />‘ you use '<' + 'br />'.
  3. Write and test the code in your favourite editor and browser. Once it works, apply the above changes to your code to make it work in your post or page.

If you follow those tips your JavaScript code will continue to work after the editor mangles it. However, this doesn’t make it any easier to edit the code afterwards. So if you intend to insert a reasonable amount of code it would be wise to keep a copy of the code in case you want to edit it again easily afterwards.
Another option is to put all your code in an include file, include it in your post and simply call the necessary functions. The advantage of this approach is that it makes your code more manageable and easy to update. The annoying part is that all code isn’t safely embedded in your post so you have to maintain an extra file on your server which you might forget when you’re backup things up or switching hosts.

Photo by ruiwen, cc-licensed

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.