67

I might have an error in a .js document in a theme I have purchase:

$('.tagcloud a').wrap('<span class="st_tag" />');

I am trying to solve it but I am not a programmer so I don't know how. The site is this: http://www.framerental.com .

2
  • To be honest if you've paid for the theme and you haven't made many other customisations to your site (as you're not a programmer after all) I would contact their support Commented Feb 18, 2016 at 13:08
  • It seems to me I can now use $ fine with newer versions of wp Commented Aug 7, 2019 at 12:35

15 Answers 15

160

You use jQuery.noConflict(); So $ is undefined.

You can read more about it here docs

Try to modify your code in this way (add $ sign to ready function):

jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
});
Sign up to request clarification or add additional context in comments.

6 Comments

ok!! Now somethings work but other error has appear: Referenceerror resiza window is not defined. Line: jQuery(window).bind("resize", resizeWindow); function resizeWindow( e ) { var newWindowWidth = jQuery(window).width();
Try to define function before bind expression.
This fixed all my errors with an old WP theme after I commented out the theme's old "enqueued" jQuery. Frankly, I find "wp_enqueue_script" system really annoying, contrived, over-complicated and unnecessary. I wish WordPress would hide/compartmentalize its own js code for the admin panels and get out of the way for us to use jQuery how we want to use it. Does "wp_enqueue_script" pass Google PageSpeed Insight tests? Probably not. Either that or simply require all WP plugins and themes to use the same jQuery--then everyone would be on the same page and we could all move forward together.
I fought WP's enqueue methods also but have now embraced it. It keeps best practice in tact and you can ignore it VERY easily by just adding your scripts with a link tag within your templates. WP enqueue's jQuery automatically so you'd have to use dequeue. WP also has localization which is worth a look into in regards to combining of scripts for page speed.
This should be the accepted answer. The only thing that worked for me!
|
41

Function errors are a common thing in almost all content management systems and there is a few ways you can approach this.

  1. Wrap your code using:

    <script> 
    jQuery(function($) {
    
    YOUR CODE GOES HERE
    
    });
    </script>
    
  2. You can also use jQuery's API using noConflict();

    <script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
    // Code that uses jQuery's $ can follow here.
    });
    // Code that uses other library's $ can follow here.
    </script>
    
  3. Another example of using noConflict without using document ready:

    <script>
    jQuery.noConflict();
        (function( $ ) {
            $(function() { 
                // YOUR CODE HERE
            });
         });
    </script>
    
  4. You could even choose to create your very alias to avoid conflicts like so:

    var jExample = jQuery.noConflict();
    // Do something with jQuery
    jExample( "div p" ).hide();
    
  5. Yet another longer solution is to rename all referances of $ to jQuery:

    $( "div p" ).hide(); to jQuery( "div p" ).hide();

Comments

22

Instead of doing this:

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

You should be doing this:

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

    // your code goes here

});

This is because WordPress may use $ for something other than jQuery, in the future, or now, and so you need to load jQuery in a way that the $ can be used only in a jQuery document ready callback.

2 Comments

This works great for anything within the doc.ready. If you want it across the board (window functions), view Savage's answer above.
Finally, the solution to my problem! 5 years later, and the butterfly effect of your awesome answer is still being felt. Thanks!
16

Just add this:

<script>
var $ = jQuery.noConflict();
</script>

to the head tag in header.php . Or in case you want to use the dollar sign in admin area (or somewhere, where header.php is not used), right before the place you want to use the it.

(There might be some conflicts that I'm not aware of, test it and if there are, use the other solutions offered here or at the link bellow.)

Source: http://www.wpdevsolutions.com/use-the-dollar-sign-in-wordpress-instead-of-jquery/

1 Comment

This works if you enqueue your own custom theme scripts in the footer.
11

Other than noConflict, this is helpful too:

(function( $ ) {
    // Variables and DOM Caching using $.
    var body = $('body');
    console.log(body);
})( jQuery );

Comments

10

Either you're not including jquery toolkit/lib, as some have suggested, or there is a conflict of sorts. To test: include jQuery and test like this:

console.log($);
console.log($ === jQuery);

If $ is not undefined, and $ === jQuery logs false, you definitely have a conflict on your hands. Replacing your $ with jQuery solves that, but that can be quite tedious (all that extra typing...). Generally I start my scripts with $jq = _$ = jQuery; to at least have a shorter reference to the jQuery object.
Of course, before you do that, check to see if you're not accidentally overriding variables that have been set beforehand: console.log($jq, _jQ, _$); whichever is not undefined should be left alone, of course

2 Comments

Elias you seem to have the answer but as long as I am not a programmer I feel like you are talking in chinesse. Is there any easy solution for me? I am completely lost :-(
@user1645326: Yes, there is. Your comment below jurka's answer sort of tells me you're either not writing all jQ code inside the wrapper jQuery(document).ready(function($){ function, which you should. Also, the resizeWindow should get its with from $(this).width(); rather then jQuery(window).with(); but perhaps most importantly: the error says it all: there's a typo in your code: just search your code for resiza window, and replace it with resizeWindow...
10

I added a custom script file that loaded at the end of the head section, and inserted the following at the top:

(function (jQuery) {
    window.$ = jQuery.noConflict();
})(jQuery);

(This is a modification of Fanky's answer)

Comments

3

If you have included jQuery, there may be a conflict. Try using jQuery instead of $.

Comments

2

There is an easy way to fix it. Just install a plugin and active it. For more : https://www.aitlp.com/wordpress-5-3-is-not-a-function-fix/ .

Tested with Wordpress version 5.3.

Comments

2

You can fix this error with the following way:

const $ = jQuery;

$(document).ready(() => {
    console.log(`Document is ready`);
});

You can also use this way:

jQuery(document).ready(function($) {
    console.log(`Document is ready`);
})

Comments

2

I noticed that no one mentioned this:

The version of jQuery that WordPress ships with doesn't support using $, which means that updating the jQuery version will resolve the error.

wp_deregister_script('jquery');
wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.7.1.min.js", array(), '3.7.1' );

(As of writing this,the latest jquery is 3.7.1)

Comments

0

I was able to resolve this very easily my simply enqueuing jQuery wp_enqueue_script("jquery");

Comments

0

I had the same issue with jquery in my WordPress site I solved it by rearranging my scripts.

enter image description here

if aowl loads first in my site then I have the error mention on a question.

and make sure jquery loads first before aowl carousel script, and then add below code the error should not appear. hope it may help someone in the future.

  jQuery(document).ready(function($) {
        // Code that uses jQuery's $ can follow here.
    });

1 Comment

VsCode tells that the code above is deprecated since 3.0. It recommends using jQuery(function() { })
-1

You can replace $ by jQuery.

Happy coding !

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-5

jQuery might be missing.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

1 Comment

it is possible but wordpress and most of CMS the $ is not set by default.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.