Getting JavaScript to work inside WordPress Pages and Posts can be a bit of tricky coding. The fundamental problem is that the WordPress Visual Editor prunes out any <SCRIPT> tags or inline JavaScript associated with events like onclick= or onmouseover= etc. Now developers can get around this by sticking religiously to using the HTML editor when creating or editing a page or post containing Javascript; but one slip of a SAVE DRAFT or UPDATE while in the Visual Editor and all your code is gonzo. Yes, if you are using WordPress 3.61 or later it is easy to restore the excised JavaScript using the Revisions edit command- but then you lose your most recent edits in order to restore the JavaScript. The following method provides for JavaScript without having to give up the Visual Editor.
One of the big advantages of WordPress is the fact that the jQuery library is automatically loaded with the program. So that theoretically makes a developer’s collection of jQuery scripts available for use. The first article in this series on using JavaScript in WordPress discusses the procedural hack required to get inline JavaScript to work in WordPress. This post describes how you can use JavaScript and retain use of the Visual Editor but at the price of giving up inline JavaScript.
The key to this WordPress mini-wizardry is the use of the plugin Insert JS/CSS which allows JavaScript and CSS code to be inserted into the header of the specific post or page you are working on. The JavaScript [and any CSS] code is inserted at the bottom of the <HEAD> block for the Post or Page which eliminates most order of loading problems. Here is a screenshot of the Insert JS/CSS plugin panel used for this post.
And here is what can be done with such simple jQuery Code – we have created an accordion widget. just click on a title line to expand & collapse the underlying message:
Quinte WestLibrary was host to a free tutorial on Splash Pages in Javascript and how they can work for you.
So at the price of no inline JavaScript one can implement some pretty impressive JavaScript code into your WordPress Pages ad Posts. Think full forms validations, advanced carousels & sliders, or nifty tabs and panels and still have the Visual Editor at your command.