Initially whenever I start developing a WordPress theme from scratch, either it is converting PSD to WordPress theme or HTML into WordPress theme, there are many resources like style-sheets, Fonts & jQuery files are required to use within the project.

This post is regarding an error occurs while developing WordPress website, or I can say I faced it a lot during my very early stage of learning WordPress Theme Development which is:

uncaught Typeerror: $ is not a function


via GIPHY

Recently when I started developing a WordPress theme based on Material Design for Bootstrap I enqueued a main.js file in my functions.php after which the jQuery error started appearing in the browser console.

main.js file enqueued in functions.php file
main.js file enqueued in functions.php file

The code inside the main.js file is very simply and I just initiated the jQuery to further use it in my project. The code is:

$( document ).ready(function() {
console.log( "ready!" );
});

Now when I reloaded the page I can see the error in my browser console.

error message in chrome console
error message in chrome console

As you can see in the image above the Uncaught TypeError is occurring due to main.js file but if you look closely there are other same Uncaught TypeError messages appeared due to other Js file enqueued in the project.

$ is not a function in WordPress error occurs when the code executes before the jQuery library get enqueued in the page.

By default, WordPress doesn’t understand $ as jQuery

Here is a very simple technique to completely remove this error from your WordPress project. You have to modify the code of your enqueued js file ie. main.js & the modified code will look like

var $ = jQuery.noConflict();
$( document ).ready(function(){
console.log(“ready”);
});

The $.noConflict command gives you the ability to control the $ variable back to whatever library it was first assigned to. This command makes sure that jQuery doesn’t have any conflict with the $ object of other libraries.

Stay connected and you can also subscribe to my channel TheWebGuru – YouTube Channel

Thank you, All your comments and queries are most welcome.