👉 How to fix '$ is not a function' in WordPress: 4 ways
You edit functions.php, add a couple of lines of jQuery, and the site crashes with a white screen. The console shows: Uncaught TypeError: $ is not a function. Sound familiar?
Every WordPress developer encounters this error at least once. You copy working jQuery code from CodePen or a snippet, paste it on your site, and WordPress doesn't understand it. The reason isn't broken code or plugin conflicts. The reason is how WordPress handles jQuery.
We'll cover four proven methods to fix the "$ is not a function" error, from the safe IIFE wrapper to completely disabling noConflict. Each method comes with ready-to-use code you can copy and paste.
💡 Quick overview:
- Wrap jQuery code in an IIFE anonymous function, the safest and most universal method
- Use jQuery document ready with a dollar parameter for scripts in the head
- Assign your own alias via noConflict, convenient when the dollar sign is taken by another library
- Globally disable noConflict, only when there are no other libraries on the site
Why the "$ is not a function" error occurs in WordPress
WordPress loads jQuery in noConflict mode. This means the $ variable, jQuery's short alias, is not globally available. WordPress core developers did this intentionally to avoid conflicts: many JavaScript libraries (Prototype, MooTools, older Bootstrap versions) also use $ as their main shorthand.
When you write in your script:
1 $("#element").hide();
WordPress doesn't know that $ is jQuery. It sees a call to an unknown function and throws TypeError: $ is not a function. Outside WordPress, on a "bare" HTML page, this same code would work without issues, as jQuery registers $ globally there.
Technically, WordPress only understands the full name: jQuery("#element").hide(). But writing jQuery instead of $ in every line of a multi-line script is inconvenient, the code bloats and loses readability. Fortunately, there are four ways to work around this limitation.
Before editing any theme files, make a backup of your site. One missing semicolon in functions.php, and the site goes down. With a backup, you can roll back changes in a minute.
Method 1: IIFE wrapper, safe and universal
The most reliable way to bring back $ in WordPress scripts is an Immediately Invoked Function Expression (IIFE). You pass jQuery as an argument, and inside the function you refer to it via the familiar $.
Code for footer.php or low-level insertion (site footer):
1 (function($) { 2 // Your jQuery code here 3 $("#element").hide(); 4 })(jQuery);
What's happening here: an anonymous function accepts the $ parameter and is immediately invoked with the jQuery argument. Inside this function $ === jQuery, while outside $ remains undefined. Conflict with other libraries is eliminated.
This method works for scripts in the footer. If the script must execute in <head>, use method 2.
Method 2: jQuery(document).ready with $ parameter
When a script must execute in the page header (before DOM loads), wrap it in jQuery(document).ready. Note: the $ is passed to the callback parameter, this is not a typo but a key point.
Code for header.php or functions.php via wp_enqueue_script:
1 jQuery(document).ready(function($) { 2 // Your jQuery code here 3 console.log($); 4 });
The .ready() method waits for full DOM load, and jQuery passes itself to the callback as $. Inside this callback, $ works again like in a normal JavaScript environment. And, unlike method 1, the script starts from <head>, which is useful for critical initialization operations.
Most theme and plugin developers know about this WordPress quirk, so in quality products you'll almost always see jQuery instead of $, or one of the wrappers above.
Method 3: create your own alias via noConflict
jQuery allows you not only to bring back $, but also to assign any other short alias, for example variables $j or jq, or any variable you prefer. This is convenient when the site already uses another library that has taken $.
1 var jq = jQuery.noConflict(); 2 jq("div p").hide(); 3 4 // Another library continues using its own $ 5 $("content").style.display = "none";
The jQuery.noConflict() method frees up $ for other libraries and returns jQuery to your variable (jq in the example). After this, calls are made via jq(...), while $ works for the neighboring library, the conflict disappears completely.
This approach is especially useful on sites where a WordPress theme coexists with a third-party JavaScript framework that uses $ for its own purposes.
Method 4: completely disable noConflict (use with caution)
If you know for certain that the site has no other libraries claiming $, you can disable noConflict mode globally:
1 $ = jQuery.noConflict(true);
After this line, $ works again as a global jQuery alias everywhere, in any script, anywhere on the page. However, this method is the riskiest. If you later install a plugin that also uses $, the site will break with a hard-to-reproduce bug.
We recommend methods 1 and 2 as primary, they are safe, isolated and cover the vast majority of real-world scenarios. Method 4 is for situations when you maintain a large legacy script and cannot wrap every function separately.
In the video above, a visual demonstration of all four methods in action. Watch it if you prefer visual explanation to text.
⁉️🤔 Frequently asked questions
Why did WordPress disable $ for jQuery in the first place?
WordPress core developers enabled
jQuery.noConflict()by default to protect sites from conflicts with other JavaScript libraries. Prototype.js, MooTools and some older frameworks also register a global$variable. If WordPress gave$to jQuery, any theme or plugin with such a library would break the admin panel or frontend. WordPress has run jQuery in noConflict mode since version 3.6, this is not a bug but an architectural decision. The$variable in the global scope remains free for third-party libraries. That's exactly why$("#id")outside a wrapper will always throwTypeError.
Can I just include jQuery a second time, outside WordPress?
Technically, yes, you can include jQuery via a CDN link a second time, and it will register
$globally. But this is bad practice: two jQuery versions on one page conflict, page size grows, and WordPress plugins expect exactly the jQuery version registered viawp_enqueue_script. Always work with the jQuery version WordPress provides, it's tested for compatibility with core and admin panel. Including jQuery again means creating new problems instead of solving the original one.
What to do if the error appears only on specific pages?
Check if the specific page loads a third-party script via a plugin or widget. Some caching and minification plugins aggressively reorder scripts, and jQuery may load after your code. Disable optimization plugins one by one to find the culprit. In most cases, the "$ is not a function on one page" problem is caused by script loading order. A minification or caching plugin puts your script before jQuery, and
$doesn't exist yet at the time of the call. Solution: either exclude the script from minification, or wrap it in the IIFE from method 1, which doesn't depend on global$.
Is there a ready-made plugin that fixes this error?
There's no dedicated plugin "for fixing $ is not a function", and it's not needed. The problem is solved with a one-line wrapper, and installing a separate plugin for this is excessive. However, there are plugins like Code Snippets that let you add JavaScript and PHP code without editing theme files, which is safer for beginners. Code Snippets stores your code in the database, not in
functions.php. If you make a syntax error, the plugin automatically rolls back changes, and the site doesn't crash. We recommend beginners add any JS code through it, not by editing theme files.
The "$ is not a function" error is fixed, what's next?
Main takeaway: the problem is not in your code and not in WordPress. This is standard CMS behavior, and it's fixed with one wrapper. In the vast majority of cases, method 1 (IIFE) or method 2 (.ready() with $) is sufficient. They don't break other scripts and work in any WordPress version, from 4.0 to the latest.
If you often work with jQuery in WordPress, develop the habit of starting every script with (function($) { and ending with })(jQuery);, this will become muscle memory in a week and forever eliminate the error.
Share the article with colleagues who still edit functions.php by trial and error, one ready-made wrapper will save them an hour of debugging.
A professional team of writers and editors specializing in creating quality content.