CleanCode NZ

As WordPress loads the jQuery library in no conflict mode, $() short cut is no longer supported in javascript in WordPress, this breaks most of the open source jquery add-ons or javascript code we have written before.

One way to get away from this is to replace all $ signs with ‘jQuery’ through copy and paste, you might have to do this thousand times when you try to make your javascript work in WordPress. This is hardly a satisfying solution as this, change of code, can bring in bugs to tested code, and also is a concern for future upgrade.

To be honest I have been using the above method to get my jquery javascript to work in WordPress until today when I have got a huge javascript file to be moved into WordPress, I finally decided that it is not good enough, we should be able to find a way to bring $ back to WordPress, and just use the scripts as it is.

One suggestion from WordPress official site is using jQuery no conflict wrapper like this:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

// or 
(function($) {
    // $() will work as an alias for jQuery() inside of this function
})(jQuery);

The problem of this solution is $ only works within the scope of the function, what if it is a library(jquery.datepicker.js) I have to use in the head?

Here is my solution that can allow you use $ without any change of your code, but with one condition which I do not think would be hard to satisfy.

The first and foremost reason $ is removed from jquery is because other libraries like prototype might be using $. So here is the condition for my solution: not to use other libraries like prototype on the intended page. As far as I am concerned, I have not seen anywhere prototype is used in WordPress.

As what are other potentially conflicting libraries, I have to say I do not know, but for my projects, I do not normally use other javascript libraries but jquery.

How to put $ back?

wp_enqueue_script("jquery");
wp_enqueue_script('enable$_script', 
        filedir.‘enable$.js',array('jquery'),'1.0');
 

There is only one line in enable$.js

var $=jQuery;

It does not have to be in a separate js file, you can place same line in the next script file after jquery and before any $ reference.

You can also turn jquery $ off to give way to other libraries like this:

jQuery. noConflict();

The point is: you can turn on $ before any reference using $=jQuery, and turn it off before any conflict using jQuery.noConflict()

Tags: JQuery, WordPress