$ is not a function – error jQuery

Si estás introduciendo tu propio código jQuery en WordPress y obtienes el error «$ is not a function» en la consola javascript, aquí te pongo la FÁCIL solución y la explicación de por que se produce. Aunque es un error javascript relacionado con jQuery y su uso junto a otras bibliotecas y no con WordPress específicamente, publico este tuto en la categoría WordPress por ser una pregunta frecuente de usuarios de esta plataforma.

La explicación del por qué nos podemos encontrar con el error «$ is not a function» es muy sencilla. En WordPress, la biblioteca jQuery se ejecuta en modo noConflict. En este entorno el atajo $ para jQuery no está disponible. Esto se hace para evitar problemas de compatibilidad con otras bibliotecas javascript que se utilizan en WordPress, como Prototype, y que también utilizan el símbolo $.

En cualquier caso, el símbolo $ en estas bibliotecases es tan sólo un atajo que permite escribir menos. Por ejemplo, permite escribir $ en lugar de jQuery. Así que, una solución rápida al problema es cambiar $ por jQuery, es decir, no utilizar el atajo y dejarlo libre para las demás bibliotecas. Por ejemplo:

$(document).ready(function() {
   $("#identificador").show();
});

Debes pasarlo a:

jQuery(document).ready(function() {
   jQuery("#identificador").show();
   // Dentro y fuera de esta función $() NO es un alias de jQuery()
   // y está disponible para otras bibliotecas
});

La solución anterior es la de elección si quieres utilizar el símbolo $ como alias de otras bibliotecas pero no como alias de jQuery. Si no vas a utilizar otras bibliotecas y quieres seguir utilizando el símbolo $ como alias de jQuery en WordPress también hay solución, basta definir el alias dentro de una función, por ejemplo:

jQuery(document).ready(function($) {
    $( "div" ).show();
    // Dentro de esta función $() seguirá funcionando como alias de jQuery()
    // pero NO como alias para otras bibliotecas
});
// Fuera de la función anterior $() NO es alias de jQuery()
// y SI está disponible para otras bibliotecas

El código anterior se ejecutará una vez que el DOM está completamente listo. Si necesitas ejecutar el código antes de este evento puedes utilizar:

(function($) {
      $( "div" ).show();
    // Dentro de esta función $() seguirá funcionando como alias de jQuery()
    // pero no como alias para otras bibliotecas
})(jQuery);
// Fuera de la función anterior $() NO es alias de jQuery()
// y SI está disponible para otras bibliotecas

Y aún hay otra solución más. Definir tu propio alias de jQuery. Por ejemplo:

var $m = jQuery;
$m(document).ready(function() {
    $m( "div" ).show();
});
// $m is ahora alias de jQuery
// y $ sigue disponible para otras bibliotecas

😉