¡Bienvenid@ desarrollador/a! En esta entrada te voy a hablar de un tema que seguramente te hayas encontrado si has o estas trabajando con WordPress o lo más probable es que tengas esta pregunta ahora mismo y por este motivo te encuentras aquí: como añadir un nuevo fichero javascript en WordPress.

Para añadir un nuevo fichero javascript en WordPress tienes que hacer uso de dos funciones:

wp_register_script()

wp_enqueue_script()

Estas funciones las puedes llamar en cualquier fichero PHP donde necesites hacer uso de tu fichero javascript. Los parámetros que utilizan estas dos funciones son:

$handle (Tipo string) (Obligatorio) –> Este parámetro es el nombre que se usará para el javascript. Se utiliza como identificador, por lo que tiene que ser único.

$src (Tipo string) (Obligatorio) –> Equivale a la URL donde se encuentra el javascript que queremos añadir. Puede ser una URL absoluta o una URL relativa teniendo como punto de partida el directorio raíz de WordPress.

$deps (Tipo array) (Opcional) –> Este campo se utiliza por si este javascript tiene dependencias con otros ficheros javascript. Si este fichero tiene dependencias de otro, en este parámetro tendrás que añadir el identificador (handle) definido en el otro fichero. Si se utiliza este parámetro conviene hacerlo teniéndolo todo bien claro. Por defecto a este valor se le asigna un array vacío.

$ver (Tipo string, boolean o null) (Opcional) –> Este parámetro se utiliza para asignar un número de versión de fichero que WordPress añade al final de la URL establecida en el parámetro «$src». Si este campo se pone como «false» o ‘ ‘, WordPress añade automáticamente su número de versión. Si quieres que no se añada ningún número el valor tiene que ser «null». Por defecto tiene el valor de «false».

$footer (Tipo boolean) (Opcional) –> Con este parámetro se indica si el fichero javascript tiene que cargarse en la etiqueta «» o en la etiqueta «». Aunque por defecto se le asigna el valor «false», acepta dos parámetros: true y false. Si lo ponemos como «true» el fichero se va a cargar antes de la etiqueta «». En cambio, si lo ponemos como «false» el fichero se va a cargar en la etiqueta «»

Ejemplos para añadir nuevos ficheros javascript en WordPress

Ejemplo 1: Llamar ficheros javascript con WordPress en el Front Office

add_action('wp_enqueue_scripts', 'my_enqueue_front_scripts');

function my_enqueue_front_scripts() {

    wp_enqueue_script(
        'bootstrap',
        get_theme_file_uri('assets/js/bootstrap.min.js'),
        array('jquery'),
        '3.1'
    );

    wp_enqueue_script(
        'my-custom-script',
        get_theme_file_uri('assets/js/my-custom.js'),
        array('jquery', 'bootstrap'),
        '1.0',
        true
    );
}

Explicación: En primer lugar llamamos a la función «add_action()». De este modo añadimos en el hook «wp_enqueue_scripts» (que es el hook donde se registran los ficheros javascripts del front office) nuestra nueva función «my_enqueue_front_scripts()«. A continuación, dentro de esta función, primero llamamos al fichero javascript de bootstrap indicando que el fichero depende de jQuery. En segundo lugar llamamos a nuestro fichero javascript «my-custom.js» indicando que depende de jQuery y de bootstrap e indicando que el script se cargará en el footer.

Ejemplo 2: Llamar ficheros javascript con WordPress para el admin

Si lo que quieres es llamar a un fichero javascript para que se ejecute únicamente en el admin (back office) el código que necesitas es el siguiente:

add_action('admin_enqueue_scripts', 'my_enqueue_admin_scripts');

function my_enqueue_admin_scripts() {

    wp_enqueue_script(
        'my-custom-admin-script',
        get_theme_file_uri('assets/js/custom-admin.js')
    );
}

El código es muy parecido al anterior ejemplo pero en este caso tenemos que hacer uso del hook «admin_enqueue_scripts».

Ejemplo 3: Llamar ficheros javascript con WordPress para el wp-login.php

Si lo que quieres es llamar un fichero javascript para que se ejecute únicamente en el área de login el código que necesitas es el siguiente:

add_action('login_enqueue_scripts', 'my_enqueue_login_scripts');

function my_enqueue_login_scripts() {

    wp_enqueue_script(
        'my-custom-login-script',
        get_theme_file_uri('assets/js/custom-login.js'),
        array('jquery')
    );

}

El código es muy parecido al anterior ejemplo pero en este caso tenemos que hacer uso del hook «login_enqueue_scripts«.

Ejemplo 4: Llamar a nuestro fichero javascript con WordPress desde el fichero «functions.php» del theme

Otra opción a parte de llamar a nuestro fichero javascript con un «add_action()», es ir al fichero «functions.php» de nuestro theme, buscar la función que carga todos los ficheros javascript del front y añadir nuestro «wp_enqueue_script()«.

La idea es la misma porque esta función tendrá su «add_action()» que la llama y que tiene asociado el hook del Front Office.

Ejemplo 5: Ignorar un fichero javascript de WordPress para llamarlo desde otra ubicación

Si queremos modificar la ruta desde donde WordPress carga un fichero javascript en concreto, tenemos que hacer uso en primer lugar de la función «wp_deregister_script()» y a continuación de la función «wp_register_script()«.

El código quedaría del siguiente modo:

add_action('init', 'my_custom_init_method');

function my_custom_init_method() {
    
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js');
}

Ejemplo 6: Registrar un fichero javascript con WordPress ignorando el área del admin

Si quieres cargar tu archivo javascript y únicamente quieres que se ejecute en el front office, tienes que tener en cuenta que la función «wp_enqueue_script()» carga los ficheros tanto en el front como en el back. Por lo tanto, si quieres evitar conflictos con el área de administración, la manera de hacerlo es la siguiente:

if(!is_admin()) {

    wp_register_script('my_custom_script', get_theme_file_uri('assets/js/custom-script.js'), array('jquery'));
    wp_enqueue_script('my_custom_script');
}

Explicación: Con la primera línea indicas que la carga no se haga en el área de administración. Con la segunda registras los datos del fichero javascript (ubicación, dependencias y versión). Finalmente con la última línea ponemos en cola el fichero javascript.

Como rellenar nuestro nuevo fichero javascript con WordPress

Con nuestro nuevo fichero javascript cargado con WordPress, solo te falta introducir el código que te interesa en él. Para realizar esto, tienes que basarte en el modo en que WordPress trabaja. Como ya sabrás, y en caso contrario lo vas a aprender ahora, la librería jQuery que se incluye en WordPress se carga en modo de «no conflicto» para prevenir problemas de compatibilidad con otras librerías. Por este motivo, la manera de programar el fichero es la siguiente:

  • Si quieres que el código del fichero se ejecute una vez la página haya terminado de cargarse, la manera de realizar el código es:
jQuery(document).ready(function($) {

    // Todo mi código javascript
});
  • En cambio, si quieres que tu código se ejecute inmediatamente, sin esperar el evento ready del DOM, la manera es:
(function($) {

    // Mi código javascript
})(jQuery);

Y hasta aquí llega el tutorial de los distintos modos de añadir un nuevo fichero javascript con WordPress. Espero que te haya servido de ayuda, que haya resuelto todas tus dudas y por cualquier comentario o anotación no dudes en dejar tu comentario :).