TypeError: $ is not a function WordPress

JavascriptJqueryWordpress

Javascript Problem Overview


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 .

Javascript Solutions


Solution 1 - Javascript

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

You can read more about it here [docs][1]

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.
});

[1]: http://api.jquery.com/jQuery.noConflict/ "jQuery noConflict doc"

Solution 2 - Javascript

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();

Solution 3 - Javascript

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.

Solution 4 - Javascript

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/

Solution 5 - Javascript

Other than noConflict, this is helpful too:

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

Solution 6 - Javascript

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

Solution 7 - Javascript

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)

Solution 8 - Javascript

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

Solution 9 - Javascript

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.

Solution 10 - Javascript

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

Solution 11 - Javascript

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.
    });

Solution 12 - Javascript

jQuery might be missing.

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1645326View Question on Stackoverflow
Solution 1 - JavascriptjurkaView Answer on Stackoverflow
Solution 2 - JavascriptSimon HayterView Answer on Stackoverflow
Solution 3 - JavascriptGuy CastellView Answer on Stackoverflow
Solution 4 - JavascriptFankyView Answer on Stackoverflow
Solution 5 - JavascriptWaqar AlamgirView Answer on Stackoverflow
Solution 6 - JavascriptElias Van OotegemView Answer on Stackoverflow
Solution 7 - JavascriptSavageView Answer on Stackoverflow
Solution 8 - JavascriptGiles TamplinView Answer on Stackoverflow
Solution 9 - JavascriptWinbertView Answer on Stackoverflow
Solution 10 - JavascriptDan OsborneView Answer on Stackoverflow
Solution 11 - JavascriptThe Dead ManView Answer on Stackoverflow
Solution 12 - JavascriptAmir Abu SharebView Answer on Stackoverflow