Fixing the Common jQuery Error in WordPress

JavaScript is used to make your wordpress website attractive.  We use javascript in hover effect or animation or many more in other functionality. Also provides great functionality to pages and post using javascript.

One of the most common error in wordpress is "jquery is not defined". It makes things stop or not working on your WordPress site. In wordpress, sometimes we try to use"$" to access jquery, we get an error that "$" is not defined. This error occurs because jQuery library include in wordpress loads in "noconflict". For this mode, jQuery returns the control of "$" andit is no longer accessible as function, variable or alias for jQuery.

There are some common causes which display error "jquery is not defined" which are listed below:

  • One of your plugins is conflicting with other plugins, especially with older ones.
  • JavaScript runs before the page is fully loaded in turn before the jQuery is fully loaded.
  • CDN-hosted jQuery might be blocked or down.

You can further fix this error by following this approach:

  • Our jquery code is look like this using "$"

<pre>
 $(document).ready(function(){

     $(#selector)……

 });

</pre>

  • We can use the following code, which uses  " jQuery " insteadof "$"

<pre>
  jQuery(document).ready(function(){

      jQuery(#selector)…..

  });

</pre>

  • If you want to use the default "$" symbol, it can be done by wrapping the code within a function.

    <pre>
        (function($) {

              // You can use $() inside of this function

         $(#selector)….

         })(jQuery);

     </pre>

  • If you want to execute the jQuery code on document ready you can use the following instead of the above code:

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

               // You can use $() inside of this function

               $(#selector)…..

    });
</pre>

  • Addition of jQuery

Make sure jQuery is included in your code properly and will load before your script also jQuery loaded only once if it loads multiple time, it will cause an error.

If it is not included, then pass it as third argument in your wp_enqueue_script() function as follows:

<pre>
wp_enqueue_script( 'tt-mobile-menu', get_template_directory_uri() .

'/js/mobile-menu.js', array('jquery'), '1.0', true );

</pre>

  • Make sure jQuery is Loaded

<pre>

<script src= http://code.jquery.com/jquery-1.11.2.min.js  type="text/javascript"></script>

</pre>

Copy the URL ("http://code.jquery.com/jquery-1.11.2.min.js") from script src and paste it in the new browser tab. If it display content of jquery that means it loaded correctly. If not, then it's error in your code so check it thoroughly.

So here we discuss how to Fixing the Common jQuery Error in WordPress. I hope this post is helpful for you. If you have any queries then contact our Experienced WordPress Developer at Lathiya solutions. They are happy to help you.