Cargar Javascript personalizado en WordPress

Al igual que se pueden cargar hojas de estilo externas en nuestro fichero functions.php o en nuestro plugin personalizado, WordPress también permite cargar ficheros de código Javascript.

Función para añadir Javascript personalizado o externo en WordPress

Los parámetros de esta función corresponden a:

$handle

• Tipo: string
• Requerido: Si
• Descripción: Es un nombre que debe identificar, de forma única, el fichero js a cargar.

$src

• Tipo: string
• Requerido: No, es opcional.
• Descripción: Es la ruta o URL del js que se va a cargar.
• Valor por defecto: » (vacío)

$deps 

• Tipo: string[]
• Requerido: No, es opcional.
• Descripción: Si el javascript a registrar depende de otros, aquí se deben incluir los ficheros que deben ser cargados primero, para ello fijarse en el identificador ($handle) que identificaba a cada javascript.
• Valor por defecto: array() (un array vacío)

$ver

• Tipo: string|bool|null
• Requerido: No, es opcional
• Descripción: El número de versión. WordPress añade este número al final de la URL establecida en el parámetro $src. Al establecerse como vacío o false, WordPress añade el número de la versión de WordPress. Para que no se añada ningún número de versión, se tendría que poner como null.
• Valor por defecto: false

$in_footer

• Tipo: bool
• Requerido: No, es opcional
• Descripción: Define si el javascript será cargado en el footer o en la cabecera.
• Valor por defecto: false

Ejemplo de cargar javascript personalizado

Se pone el ejemplo de que se necesita cargar una hoja javascript a un tema hijo, el siguiente código, que será localizado en el fichero functions.php, cargará este fichero javascript que se encuentra dentro del tema hijo, en una carpeta llamada js y que contiene el fichero «custom.js»

• Se indica que se ejecute en el hook wp_enqueue_scripts la función de nombre load_custom_js.
• Dentro de la función load_custom_js se llama a la función wp_enqueue_scrypt, que encola el javascript.
• Se identifica, con un nombre único, el javascript  de carpeta «js» con el nombre my-custom-js.
• Se hace referencia al archivo custom.js a cargar, que está dentro de la carpeta js.
• El parámetro array(), indica si hay alguna dependencia, en caso de haberla la dependencia se cargará antes de nuestro js.
• Con el true, se indica que se cargue al final de la etiqueta body.

Ejemplo de carga de js con dependencias

Cómo último ejemplo, suponer que en nuestro javascript utilizamos jQuery, por ello, en el array de dependencias, indicamos que antes de que cargue nuestro javascript, necesitamos que esté disponible la librería jQuery.

Fuentes: Códex de WordPress y DecodeCMS