Problems and solutions of WordPress Jquery

The first problem with developing a WordPress theme is the provision of a backdated version of JQuery in WordPress. This is also a major problem. Almost all frontend frameworks use the latest version of JQuery in Dependency. Although it can be overcome, the problem remains in one place. That is in the browser console


TypeError: $ is not a function

Ah, after seeing such a message on the console, who would want to live? Whether you inspect or give a view source, the jQuery is not found. You will also see that the jQuery is loaded there.

Went to Google, Google will tell you, omitted that $ sign and wrote jQuery there. Now went to edit the JavaScript file. He went there and saw mustard flowers. Couldn’t dare. How to edit such a big file? Once you thought that all those signs can be replaced with one command, but after doing that you saw that everything is fine but the code is not working. There is no error but no expected output. What to do this time?

Whatever it is, let’s see how it can be solved.

Method 1:

First, declare a function and put $ signs as parameters in it. E.x.


;(function ($) {
$(window).on('load', function(){
// Code to Execute
});

$(document).ready(function(){
// Code to Execute
});

}(jQuery()));

Your problem is about to be solved for now. If you have not written the modular code.

Method 2:

If your code is modular, or you have copied and pasted it from somewhere but the poor person is writing modular code. The code used to work for so long but now it doesn’t work anymore. What to do in such a situation? Notice that the modular code is object-based. There he grabs the whole object and puts it into a function. E.x.

 


let data = {
init : function(){

},
anotherthing : function(){

},
oneanotherthing : function(){

},
andanotherone : function(){

}
}
data.init();

If you see such a code, then you have to squeeze a function completely. E.x.


function my_function(my_value){
let data = {
init: function () {

},
anotherthing: function () {

},
oneanotherthing: function () {

},
andanotherone: function () {

}
}
my_value = data.init();
return my_value();
}
my_function();

This time a variable inside the function calls $ sign, and passes its value to jQuery.noConflict (); That means the whole thing will match


function my_function(my_value){
let $ = jQuery.noConflict();
let data = {
init: function () {

},
anotherthing: function () {

},
oneanotherthing: function () {

},
andanotherone: function () {

}
}
my_value = data.init();
return my_value();
}
my_function();

Using the latest version of JQuery
Let’s see how the latest version of JQuery can be used this time. This folder of your theme / assets / vendor / jquery contains the latest version of your jquery. So this time we will find it on the frontend. Therefore, you have to open the function file of your theme with a little effort. And from there you have to de-register the jQuery file first.

wp_deregister_script('jquery');

Now you have to register your local version.

wp_register_script('jquery', get_template_directory_uri(). "/assets/vendor/jquery/jquery-3.3.1.min.js"array(), '3.3.1', true);

Let’s say you need a new jquery in your theme. I mean, inquire. Thus

wp_enqueue_script('jquery');

In WordPress, you must use jQuery instead of that $ sign.