Uncaught TypeError: $ is not a function in WordPress
There are two solution for this:
#1
Repalce all $
to jQuery
in your code.
#2
Or a Simple way.
just assign jQuery
to $
as a global variable
like following on the top of your .js
file and all your code will work fine.
var $ = jQuery;
I hope this works for you. $ is not a function after wordpress 5.3 update
It might be because of this:
https://core.trac.wordpress.org/ticket/48568
If so, then wrapping your code, like in the answer linked by Spencer Stewart might help.
<script>
jQuery(function($) {
YOUR CODE GOES HERE
});
</script>
WordPress page: Uncaught TypeError: $ is not a function
load does not return a reference to jQuery like ready() does. It is the event object which is not a function.
(function($){
jQuery(window).load(function() {
console.log($);
});
})(jQuery);
FIXED: Wordpress site Uncaught TypeError: jQuery(...).live is not a function causing images with JS to not show
Wordpress 5.5 stopped using jQuery migrate. This change has been causing problems with old plugins and themes. If you are noticing issues after upgrading to Wordpress 5.5, installing this plugin might fix it: https://wordpress.org/plugins/enable-jquery-migrate-helper/
Though, ultimately a better solution would be to either upgrade your current plugins and themes to versions that do not rely on jQuery migrate. Or, if that is not possible, try to move away from those plugins to ones that do not require jQuery migrate. If you don't, you will likely run into compatibility issues in the future or, even worse, security vulnerabilities from these outdated plugins/themes.
UPDATE: Sep 18, 2020
I looked at the source code for the Enable jQuery Migrate Helper plugin and it has this condition for running:
if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) && ! class_exists( 'jQuery_Migrate_Helper' ) ) {
include_once __DIR__ . '/class-jquery-migrate-helper.php';
add_action( 'plugins_loaded', array( 'jQuery_Migrate_Helper', 'init_actions' ) );
}
So, the plugin will only work up to, and including, Wordpress 5.5. Once Wordpress hits version 5.6-alpha, it will stop working.UPDATE: Feb 15, 2021
The plugin code has been updated to work past Wordpress 5.6. However, at and after version 5.6, it will include jquery-migrate-3.3.2
instead of jquery-migrate-1.4.1
and it includes a lot fewer files (mostly jquery-ui scripts). If you want to continue using the older version of jquery, there are a couple options.
Option A. You could copy the jquery migrate plugin to a new folder (basically make it your own plugin), rename it, edit the class-jquery-migrate-helper.php
file, find this line in the replace_scripts
function:
if ( version_compare( $GLOBALS['wp_version'], '5.6-alpha', '<' ) || 'yes' === get_option( '_jquery_migrate_downgrade_version', 'no' ) ) {
And replace it with:if(true) {
This will cause the plugin to always install the old version of jquery.Option B. Create a new plugin that just includes the old jquery files by doing the following:
- Create a new plugin.
- Copy all of the
enable-jquery-migrate-helper/js
files from the jquery migrate plugin to thejs/
folder in your new plugin. - Add this code to your plugin file:
add_action('wp_default_scripts', function ($scripts) {
$setScripts = function($scripts, $handle, $src, $deps = [], $ver = false, $in_footer = false) {
$script = $scripts->query( $handle, 'registered' );
if ( $script ) {
// If already added
$script->src = $src;
$script->deps = $deps;
$script->ver = $ver;
$script->args = $in_footer;
unset( $script->extra['group'] );
if ( $in_footer ) {
$script->add_data( 'group', 1 );
}
} else {
// Add the script
if ( $in_footer ) {
$scripts->add( $handle, $src, $deps, $ver, 1 );
} else {
$scripts->add( $handle, $src, $deps, $ver );
}
}
};
$assets_url = $assets_url = plugins_url( 'js/', __FILE__ );
$setScripts( $scripts, 'jquery-migrate', $assets_url . 'jquery-migrate/jquery-migrate-1.4.1-wp.js', array(), '1.4.1-wp' );
$setScripts( $scripts, 'jquery-core', $assets_url . 'jquery/jquery-1.12.4-wp.js', array(), '1.12.4-wp' );
$setScripts( $scripts, 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$setScripts( $scripts, 'jquery-ui-core', $assets_url . 'jquery-ui/core.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-core', $assets_url . 'jquery-ui/effect.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-blind', $assets_url . 'jquery-ui/effect-blind.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-bounce', $assets_url . 'jquery-ui/effect-bounce.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-clip', $assets_url . 'jquery-ui/effect-clip.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-drop', $assets_url . 'jquery-ui/effect-drop.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-explode', $assets_url . 'jquery-ui/effect-explode.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-fade', $assets_url . 'jquery-ui/effect-fade.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-fold', $assets_url . 'jquery-ui/effect-fold.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-highlight', $assets_url . 'jquery-ui/effect-highlight.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-puff', $assets_url . 'jquery-ui/effect-puff.min.js', array( 'jquery-effects-core', 'jquery-effects-scale' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-pulsate', $assets_url . 'jquery-ui/effect-pulsate.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-scale', $assets_url . 'jquery-ui/effect-scale.min.js', array( 'jquery-effects-core', 'jquery-effects-size' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-shake', $assets_url . 'jquery-ui/effect-shake.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-size', $assets_url . 'jquery-ui/effect-size.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-slide', $assets_url . 'jquery-ui/effect-slide.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-effects-transfer', $assets_url . 'jquery-ui/effect-transfer.min.js', array( 'jquery-effects-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-accordion', $assets_url . 'jquery-ui/accordion.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-autocomplete', $assets_url . 'jquery-ui/autocomplete.min.js', array( 'jquery-ui-menu', 'wp-a11y' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-button', $assets_url . 'jquery-ui/button.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-datepicker', $assets_url . 'jquery-ui/datepicker.min.js', array( 'jquery-ui-core' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-dialog', $assets_url . 'jquery-ui/dialog.min.js', array( 'jquery-ui-resizable', 'jquery-ui-draggable', 'jquery-ui-button', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-draggable', $assets_url . 'jquery-ui/draggable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-droppable', $assets_url . 'jquery-ui/droppable.min.js', array( 'jquery-ui-draggable' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-menu', $assets_url . 'jquery-ui/menu.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-mouse', $assets_url . 'jquery-ui/mouse.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-position', $assets_url . 'jquery-ui/position.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-progressbar', $assets_url . 'jquery-ui/progressbar.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-resizable', $assets_url . 'jquery-ui/resizable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-selectable', $assets_url . 'jquery-ui/selectable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-selectmenu', $assets_url . 'jquery-ui/selectmenu.min.js', array( 'jquery-ui-menu' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-slider', $assets_url . 'jquery-ui/slider.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-sortable', $assets_url . 'jquery-ui/sortable.min.js', array( 'jquery-ui-mouse' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-spinner', $assets_url . 'jquery-ui/spinner.min.js', array( 'jquery-ui-button' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-tabs', $assets_url . 'jquery-ui/tabs.min.js', array( 'jquery-ui-core', 'jquery-ui-widget' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-tooltip', $assets_url . 'jquery-ui/tooltip.min.js', array( 'jquery-ui-core', 'jquery-ui-widget', 'jquery-ui-position' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-ui-widget', $assets_url . 'jquery-ui/widget.min.js', array( 'jquery' ), '1.11.4-wp', 1 );
$setScripts( $scripts, 'jquery-touch-punch', false, array( 'jquery-ui-widget', 'jquery-ui-mouse' ), '0.2.2', 1 );
}, -10);
Related Topics
React Routing Works in Local MAChine But Not Heroku
If (Key in Object) or If(Object.Hasownproperty(Key)
Why Does a Simple .*? Non-Greedy Regex Greedily Include Additional Characters Before a Match
How to Remove a Table Row with Jquery
Select a Complete Table with JavaScript (To Be Copied to Clipboard)
Load Local JSON File into Variable
Saving a Text File on Server Using JavaScript
Angularjs Does Not Send Hidden Field Value
Regular Expression to Match A, Ab, Abc, But Not Ac. ("Starts With")
Using Filesystem in Node.Js with Async/Await
JavaScript Displaying a Float to 2 Decimal Places
Why Does If("String") Evaluate "String" as True But If ("String"==True) Does Not
How to Parse a Date in Format "Yyyymmdd" in JavaScript
Play 2.X: How to Make an Ajax Request with a Common Button
How to Share States Between Components Using the Usestate() Hook in React
How to Create a Date Object from String in JavaScript
What Causes the Error "Can't Execute Code from a Freed Script"