En WordPress es muy fácil no seguir las buenas prácticas de programación. Dado que hay varias rutas para llegar al mismo destino, algunos programadores toman la ruta que no deben. A pesar de esto, el código que crean probablemente funcione sin problemas, sin embargo no es lo ideal.

Una de las situaciones en las que esto pasa con muchas frecuencia es en la carga de scripts y hojas de estilo en nuestros temas.

La mala manera de hacerlo

Como seguro (espero) ya saben, en el header.php se coloca la función wp_head() y en el footer.php colocamos wp_footer()
Estas funciones sirven para que WordPress cargue todos los scripts que necesita. Sin embargo, algunos programadores colocan los scripts

<script src="<?php echo get_template_directory_uri(); ?>/js/algunjs.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/otrojs.js"></script>

Ya sea en el header o en el footer.

Por qué es mala práctica hacer esto

WordPress tiene una “cola” de carga de scripts y los carga en el orden que sean más convenientes. Por ejemplo, si necesitas underscore, WordPress trae underscore. Instalarlo por tu lado es perder recursos. Todos los plugins que usamos cargan los scripts usando la cola de WordPress, por lo que si los cargamos sin seguir el orden podemos romper algo.

La manera correcta

WordPress tiene la siguiente función que nos permite registrar nuevos scripts

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

• $handle Es un nombre que le damos al script
• $src Es nuestro script, debemos colocar aquí la ruta a nuestro script
• $deps Éstas son las dependencias, por ejemplo, si nuestro código necesita jquery para correr, lo colocamos como dependencia y WordPress carga jQuery dentro del proyecto.
• $ver La versión del script que estamos usando.
• $in_footer Como indica el nombre, este parámetro es para especificar si queremos cargar el script en el footer o en el header. Por defecto está en true, así que si queremos colocar un script en el header (cómo modernizr) debemos colocarla en false

Después debemos usar wp_enqueue_script para ponerlos en la cola.

Si usamos el código anterior en nuestro código original, queda de la siguiente manera

// Definimos la función
function ss_scripts() {
// El primer paso es usar wp_register_script para registrar el script que queremos cargar. Fíjense que aquí sí usamos *get_template_directory_uri()*
wp_register_script( 'primer-script', get_template_directory_uri() . '/js/algunjs.js', array( 'jquery'), '1.0.0', true );
wp_register_script( 'segundo-script', get_template_directory_uri() . '/js/otrojs.js', array( 'jquery'), '1.0.0', false );
// Una vez que registramos el script debemos colocarlo en la cola de WordPress
wp_enqueue_script( 'app-script' );
wp_enqueue_script( 'segundo-script' );
}

// Agregamos la función a la lista de cargas de WordPress.
add_action( 'wp_enqueue_scripts', 'ss_scripts' );

Aquí vemos que el primer script va al footer y el segundo va al header. Se pueden colocar tantos scripts se quieran, siempre y cuando se registren primero y luego se coloquen en la cola.