unGrid

The use of AJAX and JavaScript frameworks are so predominant nowadays and WordPress has also hopped on to the AJAX bandwagon. Thus, I am sure that at some point of theme development, you might want to include some form of AJAX function also.

Normally in websites, the usual practice for adding JavaScript files is by including:

directly into the theme files.

However, in WordPress, a better way would be to make use of the built-in WordPress function: wp_enqueue_script().

The function works by putting your script "in queue" for inclusion. When the function is called, it checks if the script have already been included by plugins or other scripts beforehand. This effectively ensures that the script will only included only once.

An example of its usage will be:

Common frameworks like prototype, jquery and Scriptaculous are already pre-defined. In fact, they even have thickbox (a JavaScript lightbox) available natively.

The function even allows you to specify dependencies for your own scripts. Lets say you have myscript.js which requires prototype. Instead of linking to prototype and then linking to your own script via the usual <script> method, try using this:

wp_enqueue_script('myscript', '/pathto/myscript.js', array('prototype') );

This particular piece of code would check if prototype is included before myscript.js and if it isn't, it will load it first. This saves the hassle of looking back into your code (which may be broken into multiple files), just to ensure you did not include double instances of the same code.

For a list of included scripts, check out: Function Reference/wp_enqueue_script (via WordPress Codex)

Some troubleshooting regarding scripts :

Question: "My script was working fine before I activated (this) plugin. What happened?"

In some forums I take part in, it is common to see similar questions like this. I have also come across this problem in my theme developments.

Various plugins make use of the wp_enqueue_script feature and thus, if you had included the same JavaScript framework (eg: jQuery) using the usual <script> method, it will not detect its existence and include the script again, causing a conflict.

The solution is either to remove your direct link to the your JavaScript framework totally or replace it with the wp_enqueue_script. The latter is recommended as it will safeguard your custom scripts in the event you don't use the plugin that includes the necessary files anymore.

Question: "Why isn't normal codes working with the WordPress included jQuery?"

This may be due to the "jQuery.noConflict()" option set in the default included jQuery.

The noConflict option was set to allow jQuery to operate side-by-side with another JavaScript framework with minimal problems. Thus, in order to define a code that will be parsed by jQuery, just wrap the following code around your original code:

jQuery(document).ready(function($) {

Orignal code

});

Cheers.