Proper use of jQuery on WordPress

The use of jQuery and WordPress together is a smart idea to develop WordPress Plugins and Themes. jQuery reduces the weight of a website’s resources. It decreases the time to load. Traditionally, jQuery includes manually with the script tag. But while using on WordPress, you should never do this. You should use wp_enqueue_script to avoid clashing with plugins and other potential problems.

Here I’d share some relevant tips for proper use of jQuery on WordPress.
WordPress uses mainly wp_deregister_script, wp_register_script and wp_enqueue_script functions.

1. Use wp_deregister_script:
   This Script is used to remove a registered script (javascript/ jQuery) from local Server, preventing WordPress loading the local version of jQuery. De-registering the WordPress stock JQuery script, so that you can register your own copy or from the Google CDN (Content Delivering Network).

Syntax:
[sourcecode language=”php”]
wp_deregister_script( $handle );

$handle is the name of the script to be removed. While working on local host, this script should be commented, it will help to make Browser faster.
[/sourcecode]

Example: [sourcecode language=”php”] wp_deregister_script( ‘jquery’ ); [/sourcecode]

• Use wp_register_script:
  It is a safe way of registering javascripts in WordPress for later use with wp_enqueue_script(). First of all, it is better to register Google hosted jQuery in Google Libraries API using Google CDN. Similarly, every script must be registered if it is not included in WordPress.
  Syntax:
  [sourcecode language=”php”]
  wp_register_script( $handle, $src, $deps, $ver, $in_footer );

$handle=Name of the script, which should be unique as it is used as a handle for later use with wp_enqueue_script().

$src =URL to the script.

$deps = Array of handles of script, depends on; scripts that must be loaded before this script.
False if there are no dependencies.

$ver = String specifying the script version number.
Defaults to false.

$in_footer = Normally scripts are placed in the section. If this parameter is true the script is placed at the bottom of the .
Default: false.
[/sourcecode]
Note: We have to enqueue script before wp_head is run, even if it will be placed in the footer.

Example:
[sourcecode language=”php”]
// Registering Google hosted JQuery
wp_register_script( ‘jquery’,’https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js’, false, ‘1.7.0’);
[/sourcecode]

1. Load Google Hosted jQuery in the footer
   jQuery will, by default, be inserted into the head of your HTML page. If you would prefer to have jQuery inserted at the bottom of your page, you’ll need to use the $in_footer parameter for the wp_enqueue_script() function.
   Example:
   [sourcecode language=”php”]
   wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ‘1.3.2’, true);
   [/sourcecode]
2. Add jQuery as a dependency
   By passing an array of dependencies for the $deps parameter, WordPress will automatically manage the order and placement of your script tags.The $deps array allows for multiple dependencies and helps you manage the scripts that are loaded on your site.
1. Use wp_enqueue_script
   It is a safe way of adding javascripts to a WordPress. Basically, it is used to include the script if it hasn’t already been included. Wp-enqueue-script must apply for each registered script. wp_enqueue_scripts action to call the function, or admin_enqueue_scripts to call it on the admin side.Syntax:
   [sourcecode language=”php”]
   wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
   [/sourcecode]

   Example:
   [sourcecode language=”php”]
   // enqueue ‘jquery’
   wp_enqueue_script(‘jquery’);
   [/sourcecode]

2. Google Libraries API:
   The Google Libraries API is a content delivering network and loading architecture for the most popular, open-source JavaScript libraries. Google Libraries hosts a copy of the latest jQuery version which allows developers to use in their live websites. It is delivered by a CDN. A CDN allows the file to be stored on several different servers, and is sent to the user from the closest physical server to them. Basically, using Google CDN gives the application high speed and global access to a growing list of the most popular, open-source JavaScript libraries.
3. Proper way of loading jQuery:
   WordPress includes jQuery, calling wp_enqueue_script(‘jquery’); which will automatically load the jQuery file located in wp-includes/js/jquery/jquery.js. Actually, this is not a proper way to load jQuery on WordPress. The proper way to use a different jQuery source, you need to remove the local version and introduce your new version to WordPress. So to load Google Hosted jQuery, you have to modify the code in your functions.php file like this:
   Syntax:
   [sourcecode language=”php”]
   // remove local version of jQuery
   wp_deregister_script(‘jquery’);// Register Google Hosted jQuery
   wp_register_script( ‘jquery’,’https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js’, false, ‘1.7.0’);
   wp_enqueue_script(‘jquery’);[/sourcecode]
4. Proper jQuery coding conventions
   All of the previous steps are nullified if proper jQuery coding conventions aren’t followed. The most common issue I see with jQuery and WordPress is the misuse of the $ variable.
   It is important to know that the version of jQuery that comes with WordPress automatically calls the jQuery.noConflict(); function, which gives control of the $ variable back to whichever library first implemented it.
   The following is an example of how to shortcut jQuery to safely use the $ variable:
   [sourcecode language=”php”]
   jQuery(function ($) {
   /* You can safely use $ in this code block to reference jQuery */
   });
   [/sourcecode]
   The tricky thing is this particular copy of jQuery is in compatibility mode by default. That means that the typical ‘$’ shortcut for jQuery doesn’t work, so it doesn’t conflict with any other JavaScript libraries that use the dollar sign also, like MooTools or Prototype.
   Many plugin authors and theme developers are aware of this, and they use ‘jQuery’ instead of ‘$’ to be safe.

Hits: 45