How to Use jQuery in WordPress with noConflict Mode

WordPress loads jQuery in noConflict() mode by default to prevent naming collisions with other JavaScript libraries. This article explains how WordPress handles jQuery, why using the standard dollar sign ($) can cause errors, and the most effective ways to safely write jQuery scripts within your WordPress themes and plugins.

Why WordPress Uses noConflict Mode

When WordPress loads its bundled version of jQuery, it immediately calls jQuery.noConflict(). This function releases the global $ variable, returning control of the shortcut back to whatever library initialized it first.

If you attempt to write standard jQuery code using the $ selector directly:

// This will throw: "Uncaught TypeError: $ is not a function"
$('#element').hide();

Your browser will throw an error because $ is undefined in the global scope. To resolve this, you must either reference jQuery explicitly or map the $ identifier back to jQuery using scoped functions.

Method 1: The Immediately Invoked Function Expression (IIFE)

The most flexible and industry-standard approach is to wrap your code in an Immediately Invoked Function Expression (IIFE). This creates a private scope where jQuery is mapped to $.

(function($) {
    'use strict';

    // $ is now safely mapped to jQuery inside this block
    $(document).ready(function() {
        $('.my-class').on('click', function() {
            $(this).toggleClass('active');
        });
    });

})(jQuery);

This method is ideal for external script files because it allows you to define custom functions, declare event listeners, and write standard jQuery syntax throughout the entire file without polluting the global scope.

Method 2: Pass $ to the Document Ready Handler

If your script only runs after the Document Object Model (DOM) is fully loaded, you can pass $ directly as an argument to the jQuery(document).ready() function.

jQuery(document).ready(function($) {
    // $ refers to jQuery inside this callback
    $('button.toggle').click(function() {
        $('#panel').slideToggle();
    });
});

You can also use the shorthand version:

jQuery(function($) {
    // $ works as jQuery here as well
    console.log('DOM is fully loaded and jQuery is ready.');
});

Method 3: Replace $ with jQuery

For short snippets or single-line commands, the simplest approach is to use the full jQuery keyword instead of the shortcut:

jQuery('#alert-box').fadeIn('slow');

While functional, this approach can become verbose and harder to read when writing extensive scripts.

Properly Enqueuing Your Scripts in WordPress

To ensure your scripts load after the core jQuery library, always register and enqueue them using the wp_enqueue_scripts action hook in your functions.php file, declaring jquery as a dependency.

function my_theme_enqueue_scripts() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/js/custom-script.js',
        array('jquery'),
        '1.0.0',
        true // Loads script in the footer
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Declaring array('jquery') ensures that WordPress loads its default, safe version of jQuery before executing your custom script.