jQuery Shorthand $ is not a function Error on WordPress

In this post, we are going to talk about a very common error in WordPress. When you try to write a jQuery code in WordPress, '$ is not a function' error must be very familiar to you if you are a WordPress beginner. This post explains how to avoid this error with proper examples. 

Example Scenario 

Let's look at this example. Let's say we want to add a popup box to a WordPress page. We cannot do this by using just CSS and we need to get jQuery support to achieve this requirement. Let's forget the CSS for a moment and look into the jQuery only for now. To show a popup you will need a jQuery code something like this: 

$(document).ready(function() {
    // DOMContentLoaded event listener
    // You can also use $(function() { ... }) shorthand for document.ready
    $("#show-popup-button").click(function() {
        // Show the popup
        $("#popup").fadeIn();
        $(".popup-overlay").fadeIn();
    });
    // Close the popup when the close button is clicked
    $("#popup-close").click(function() {
        // Hide the popup
        $("#popup").fadeOut();
        $(".popup-overlay").fadeOut();
    });
});

This JavaScript code uses jQuery to handle the DOMContentLoaded event and show/hide the popup when the button is clicked or the close button is clicked. This code looks fine and doesn't have any errors. But when you save this and try to load the WordPress page, it generates $ is not a function error. 

You may think that you will need to include the jQuery library to run this code properly but the jQuery library is already available in WordPress and you don't need to load it again manually. 

Solution Explanation 

In the above example, the code we provided is correct. The problem is in its format. The $ shorthand symbol in the first line of this code is the problem. We need to replace it but you can see there are multiple $ signs in this code. However, we only need to replace the first line of code and the script will run without any errors. 

jQuery(document).ready(function ($) {
    // Your code using jQuery here
    // For example:
    
    // To show the popup when the button is clicked
    $('#myButton').on('click', function () {
        $('#myPopup').show();
    });
    // To close the popup when the close button is clicked
    $('#closeButton').on('click', function () {
        $('#myPopup').hide();
    });
});

In this code, we wrap your jQuery code within jQuery(document).ready(function ($) { /* Your code here */ }); to ensure that it runs after the document has fully loaded. Inside this function, you can safely use jQuery instead of $ to avoid conflicts with other JavaScript libraries.

For Extra Knowledge 

In the previous sections, we talked about that,

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

is equivalent to: 

jQuery(document).ready(function() {
    // Code here
});

Also, there is another way to mitigate this issue. jQuery provides a noConflict() method to avoid conflicts. You can use it to assign a different alias to jQuery, freeing up the $ symbol for other libraries. This example shows how to use this method. 

// Using noConflict to assign a different alias
var jq = jQuery.noConflict();
// Now, use jq instead of $ for jQuery operations
jq(document).ready(function() {
    // Code here
});

This also resolving potential conflicts by using noConflict allows for a more harmonious integration of multiple JavaScript libraries.

In summary, $ and jQuery are essentially the same in the context of the jQuery library. Using $ is a convenient shorthand, but WordPress developers need to be aware of potential conflicts with other libraries. The noConflict method also provides a solution to this issue.