JavaScript and WordPress

JavaScript and WordPress go together like oil and water – they mix but only under certain conditions. True, WordPress supports Java Script and its many attractive frameworks like DHTMLx, EXTjs, jQuery, mootools,  Prototype,, Scriptaculous and others. WordPress even puts a link to the core jQuery engine right into every header.  So WordPressers using jQuery scripts only have to add their code appropriately – and they can add nifty jQuery-powered features. But that is also where the plot thickens.

Read what the official WordPress Codex has to say about using JavaScript:

Javascript will work within WordPress. If used within the template files, most Javascript will work fine. Using them within a post is another matter, though. Once you enter the world of PHP, it is really hard to go back to using Javascript, but they still serve their purpose. If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress.

So using JavaScript in WordPress is possible but without caution it can become a quickly vexing business. However, sticking to PHP-only just does not work with so manypowerful UI gadgets like image galleries, sliders, grids, and so many other useful widgets available[the PHP code often just invokes them]. So here is how to operate effectively with JavaScript in WordPress.

The Design Decisions

There are the three design decisions which determine how to most effectively use JavaScript within WordPress.
1)Will the JavaScript be used once or twice in one or a few  pages or postings at most?
2)Does the JavaScript code already work as a separate standalone page?
3)Will the same JavaScript code use different stylings or data connections depending on the page or post it is used in?
Lets examine each design question in turn and see what JavaScript methods can be used.

If the JavaScript is going to be used only once or twice at most then it pays to put the code directly into the page or post. Otherwise the header file can become loaded down with infrequently used scripts, slowing the performance of your WordPress sitea nd increasing its debugging complexity. But now the wicket becomes sticky because inserting JavaScript directly  into your page or post has its own drawbacks.Reveal/hide the section on how to use JavaScript in a Page or Post  in WordPress

How to use JavaScript within a Page or Post

The first thing to note is that use of JavaScript  in a page or post will require the user to be a)HTML savvy and b)familiar with using the HTML editor. With that said the rules of the javaScript-in-Posts/Pages is fairly simple. First one can add onclick, onmouseout and other event code to any HTML tag without worrying that the text will be corrupted or the code lost.

But this is not true for <script> and </script> tags and all the code associated with them. If you edit  and then save or update either a  post or page in Visual Edit then WordPress will thoughtfully strip out, erase and otherwise eradicate all those <script>…</script> tags and associated code for you. The only way to recover it is to go back to the last Revision[make sure you have Revisions checked on  in the WordPress screen options at the top upper right of the page or post editor or otherwise the Revisions option will be hidden] grab the code. and then restore in the safe confines of the HTML editor.

There is a way around this problem of disappearing JavaScript code in page or posts by using with the plugin Reliti Insert-js-css or the plugin JqUery Plus. So this gets around the problem of WordPress providing less the the full power of jQuery by using using ver 1.10.3 in its current September 2013 WP 3.6.1 .