Wordpress how to use jquery and $ sign

Question

I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:

$(document).ready(function(){

    // jQuery code is in here

});

I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.

When I check the page in Firebug I constantly keep receiving the error message:

TypeError: $ is not a function

$(document).ready(function(){

Should I maybe wrap the script in this function:

(function($){

    // jQuery code is in here

})(jQuery);

I have had this error quite a few times and am not sure how to handle it.

Any help would be greatly appreciated.

If you type `$` in console and press enter - what do you see? — zerkms, Sep 09 '12 at 23:08

Explosion Pills · Accepted Answer · 2012-11-27T19:47:02.097

364

By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).

Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).

If you must use document.ready, you can actually pass $ into the function call:

jQuery(function ($) { ...

edited Nov 27 '12 at 19:47

answered Sep 09 '12 at 23:10

Explosion Pills

188,624
52
326
405

I tried the second version however it didn't work, the first version did but I just want to make sure I am not doubling up on calling jQuery. – Jason Sep 09 '12 at 23:19
@Jason you don't even need that; just exactly what I posted: http://jsfiddle.net/vcbYJ/ – Explosion Pills Sep 09 '12 at 23:24
Could you please see this question http://wordpress.stackexchange.com/questions/214858/how-to-hide-product-attribute-from-quick-edit-panel-woocommerce – Jan 18 '16 at 13:21
And if any selector is outside `jQuery(function ($) { ...`, you have to use `jQuery` instead of `$` – Misha Rudrastyh Oct 13 '17 at 10:13

Matthew Blancarte · Answer 2 · 2016-02-26T20:10:58.663

This should fix it:

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

Put simply, WordPress runs their own scripting before you can and they release the $ var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.

From their documentation:

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available...

score 34 · Answer 3 · edited Jun 10 '17 at 00:23

34

This solution worked for me

;(function($){
    // your code
})(jQuery);

Move your code inside the closure and use $ instead of jQuery

I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

...after searching too much

edited Jun 10 '17 at 00:23

Zanna

205
5
13

answered Nov 08 '14 at 17:21

Bikram Shrestha

2,010
24
22

2

Fantastic solution. The main reason this works is because that **";"** closes any other instance of jquery already active and at the same time it declares another one new locally. When you have just few seconds to implement a layout in production or lots and lots of wordpress plugins running this can do it great. But, be aware that you must fix the issue, this is just a band-aid, but if it is an info page it's OK. – Luis Dec 12 '15 at 00:53
@Martha James This works for me so included it. It may or maynot work for others – Bikram Shrestha Apr 29 '16 at 05:52

optimiertes · Answer 4 · 2022-01-10T12:52:59.480

32

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027

Reasons why in WordPress jQuery and not $ is used: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

edited Jan 10 '22 at 12:52

answered May 30 '16 at 08:14

optimiertes

4,002
1
22
15

score 22 · Answer 5 · answered Mar 30 '15 at 08:02

22

You can avoid confliction like this

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

answered Mar 30 '15 at 08:02

Ashwani Panwar

3,819
3
46
66

9

Or $=jQuery.noConflict(); – Cyssoo Dec 29 '15 at 14:24

score 14 · Answer 6 · answered Mar 24 '14 at 13:04

Try this:

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>

Renish Khunt · Answer 7 · 2021-01-30T05:38:27.133

11

Also, I find the good solution for use jQuery noConflict mode.

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

I found this solution from here TryVary.com.

edited Jan 30 '21 at 05:38

answered Apr 02 '18 at 07:27

Renish Khunt

5,620
18
55
92

score 10 · Answer 8 · edited Apr 12 '18 at 14:42

10

replace $ sign with jQuery like this:

jQuery(function(){
//your code here
});

edited Apr 12 '18 at 14:42

Abdelsalam Shahlol

1,621
1
20
31

answered Feb 19 '18 at 08:06

MaXee Khan

137
2
15

score 9 · Answer 9 · answered Jul 08 '15 at 12:22

9

You have to pass $ in function()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

answered Jul 08 '15 at 12:22

Jitendra Damor

774
17
27

4

How is this any different than the answer given above (from three years prior)? – rnevius Feb 03 '16 at 04:27

score 9 · Answer 10 · answered Aug 07 '17 at 07:04

9

Use

jQuery(document).

instead of

$(document).

or

Within the function, $ points to jQuery as you would expect

(function ($) {
   $(document).
}(jQuery));

answered Aug 07 '17 at 07:04

Sanjay

370
4
9

score 8 · Answer 11 · edited May 18 '15 at 22:06

8

Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.

If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.

In the end... jQuery is not currently defined.

edited May 18 '15 at 22:06

Cayce K

2,288
1
22
35

answered May 18 '15 at 20:12

Raghul Manoharan

91
1
1

I think it's rather than something tries to access JQuery before it's defined which in turn breaks everything. Try moving your ```script``` which references ```JQuery``` to the top of your ```index.html``` and it will probably work – Dan Moldovan May 18 '15 at 20:36
This answer needs more visibility. Yes, the others are valid if the standard namespace is taken with a version of jQuery loaded via some other plugin. But do check you're not inadvertently (and possibly unnecessarily) loading jQuery more than once. – edkay Jan 13 '17 at 19:57

score 7 · Answer 12 · answered Jan 30 '18 at 06:00

7

(function( $ ) {
  "use strict";

  $(function() {

    //Your code here

  });

}(jQuery));

answered Jan 30 '18 at 06:00

Sharif Mohammad Eunus

826
8
14

score 5 · Answer 13 · answered Mar 21 '16 at 11:16

What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>

score 4 · Answer 14 · edited Sep 30 '15 at 05:47

4

<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

now use jq in place of jQuery

edited Sep 30 '15 at 05:47

Panther

3,312
9
27
50

answered Sep 30 '15 at 05:29

Aman birjpuriya

117
5

score 4 · Answer 15 · answered May 16 '16 at 04:55

4

You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.

answered May 16 '16 at 04:55

Laxman Jaygonde

39
3

score 3 · Answer 16 · edited Aug 06 '20 at 15:53

3

You can use

jQuery(document).ready(function(){ ...... });

or

(function ($) { ...... }(jQuery));

edited Aug 06 '20 at 15:53

H.M Maruf

65
12

answered Mar 12 '19 at 05:36

Bhavesh Balar

121
7

score 0 · Answer 17 · edited Oct 16 '21 at 16:56

0

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

If you are using jquery for frontend, you can achieve it by passing $deps as jquery

edited Oct 16 '21 at 16:56

Suraj Rao

29,388
11
94
103

answered Oct 16 '21 at 16:52

Shebin KP

115
4

score 0 · Answer 18 · answered Apr 24 '23 at 13:34

Had the Uncaught TypeError: $ is not a function error. Though this is not specific to Wordpress, this tip should be useful if you are working on a CMS. Basically, this error tells us that jQuery wasn't defined, particularly $. Chances are you're CMS already declared jQuery. To check, simply go to the web console and see what is attached to the window object.

The jQuery library exposes its methods and properties via two properties of the window object called jQuery and $. $ is simply an alias for jQuery and it's often employed because it's shorter and faster to write.

In my case, the CMS exposed it as cmJQuery (CoreMedia CMS). So the correct code looks something like:

cmJQuery(document).ready(function($) {
  //you can now use $ as your jQuery object.
});

It was a good thing it had a descriptive name!

As you can see below, it had the same function names.

Wordpress how to use jquery and $ sign

18 Answers18

Linked

Related