Respuesta corta: guarda tu código en assets/js/custom.js dentro del tema hijo y cárgalo desde functions.php con wp_enqueue_script() en el gancho wp_enqueue_scripts. Desde WordPress 6.3 puedes pedir además que se cargue con defer para que no frene la página.
Pegar un <script> a mano en el header.php o en un widget de HTML funciona, pero es la forma más rápida de acabar con código duplicado, scripts que se cargan en todas las páginas aunque solo hagan falta en una y errores que nadie sabe de dónde vienen. En las webs que mantenemos, el JavaScript propio va en un archivo del tema hijo y entra por la puerta que WordPress tiene preparada para eso.
Te enseño cómo lo hacemos, con el código que usamos hoy y los fallos que más veo.
Contenido
Antes de empezar
- Trabaja sobre un tema hijo. Si pones el archivo en el tema padre, la próxima actualización lo borra.
- Haz una copia del functions.php antes de tocarlo. Un error de sintaxis ahí deja la web en blanco.
- Ten a mano un acceso por FTP (FileZilla es gratuito) o el administrador de archivos de tu hosting.
Paso 1: crea el archivo custom.js
Dentro de wp-content/themes/tu-tema-hijo/ crea la carpeta assets/js/ y, dentro, el archivo custom.js. Para comprobar que se carga, empieza con algo que se vea en la consola:
document.addEventListener( 'DOMContentLoaded', function () {
console.log( 'custom.js cargado' );
} );
Paso 2: cárgalo desde functions.php
Abre el functions.php del tema hijo y añade al final:
/* JavaScript propio del tema hijo. Soluciones Web 365 */
add_action( 'wp_enqueue_scripts', 'sw365_js_propio' );
function sw365_js_propio() {
$ruta = '/assets/js/custom.js';
wp_enqueue_script(
'sw365-custom',
get_stylesheet_directory_uri() . $ruta,
array(),
filemtime( get_stylesheet_directory() . $ruta ),
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
}
Qué hace cada parte:
- get_stylesheet_directory_uri() apunta al tema hijo. Si usas get_template_directory_uri(), WordPress buscará el archivo en el tema padre y no lo encontrará.
- array() son las dependencias. Déjalo vacío si tu código es JavaScript moderno. Si usas jQuery ($( … )), pon array( 'jquery' ) para que se cargue antes que tu archivo.
- filemtime() cambia la versión cada vez que guardas el archivo, así el navegador no te sirve la copia antigua de la caché.
- in_footer y strategy son el formato que acepta WordPress desde la versión 6.3: el script se imprime al final de la página y con defer, sin bloquear la carga. Si tu web tiene una versión anterior, pon true en lugar del último array.
Un detalle: en la versión antigua de este tutorial el código apuntaba a /custom.js aunque el archivo se guardaba en una subcarpeta. Si copiaste aquel fragmento y no te funcionaba, era por eso. Revisa que la ruta del código y la del archivo coincidan.
Paso 3: comprueba que funciona
- Recarga con Ctrl + F5, abre la consola del navegador (F12) y busca el mensaje «custom.js cargado».
- Si no aparece, mira la pestaña Red. Un 404 en custom.js significa que la ruta está mal.
- Si usas LiteSpeed Cache, WP Rocket u otro optimizador, vacía la caché. Y si combina o retrasa JavaScript, comprueba que no esté rompiendo tu script.
Cargar el script solo donde hace falta
Si tu código solo sirve en una página, por ejemplo un calculador en la página de presupuesto, no lo cargues en toda la web. Envuelve el wp_enqueue_script() en una condición:
function sw365_js_propio() {
if ( ! is_page( 'presupuesto' ) ) {
return;
}
// ... el wp_enqueue_script() de antes
}
Las funciones is_page(), is_single(), is_front_page() o is_product() (en WooCommerce) te sirven para casi cualquier caso.
Pasar datos de PHP a tu JavaScript
Si tu script necesita algo que solo sabe WordPress, como la URL de admin-ajax.php o un texto traducido, no lo escribas a mano dentro del archivo. Añádelo justo antes del script con wp_add_inline_script():
wp_add_inline_script(
'sw365-custom',
'const sw365Datos = ' . wp_json_encode( array(
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
) ) . ';',
'before'
);
Desde custom.js ya puedes usar sw365Datos.ajaxUrl.
¿Y sin tocar archivos?
Si solo necesitas pegar un fragmento suelto, como un píxel o un script de un proveedor, tienes plugins de fragmentos de código como WPCode, y en Elementor Pro la opción Código personalizado, que permite elegir si va en el head o al final del body. Para JavaScript propio que vas a mantener, el archivo en el tema hijo sigue siendo lo más ordenado.
Errores típicos
- Cargar jQuery sin declararlo como dependencia y que el script falle con $ is not defined.
- Usar defer en un script que otro script en línea necesita antes. En ese caso, cárgalo sin estrategia o mueve también ese código al archivo.
- Poner el script en todas las páginas cuando solo se usa en una.
- Editar a mano el tema padre o el header.php.
Preguntas frecuentes
¿Dónde se pone el JavaScript en WordPress?
En un archivo propio dentro del tema hijo (o de un plugin), cargado con wp_enqueue_script(). Evita pegarlo en las plantillas del tema.
¿Necesito jQuery?
No para la mayoría de cosas. El JavaScript actual hace lo mismo sin librerías. Solo añade jQuery como dependencia si tu código lo usa.
¿Cómo añado también un archivo CSS?
Con el mismo método y wp_enqueue_style(). Te lo explico en cómo añadir un archivo CSS adicional a tu tema de WordPress.
¿Te lo hacemos nosotros?
Si lo que necesitas es una funcionalidad a medida y no quieres pelearte con el código, en nuestro mantenimiento WordPress nos encargamos de estos cambios con copia de seguridad previa. Y si buscas algo más grande, también desarrollamos plugins para WordPress.
