Agregar SCRIPTS a mi WordPress de forma correcta

Te mentí no vamos a ver Netflix® jajjajaa vamos a aprender cómo agregar de forma natural STYLES Y SCRIPTS a tu tema de WordPress porque veo que es un error súper recurrente.

¿cómo agregar los scripts?

WordPress cuenta con miles de HOOKS para poder ejecutar de forma automática las funciones que hayamos creado mientras el WordPress está cargando normalmente, en este caso queremos que se dispare una función cuando el WordPress esté cargando los scripts, y para ello podemos utilizar el hook wp_enqueue_scripts, este HOOK es el idóneo para agregar SYTLES y SCRIPTS al sitio aunque su nombre solo dice SCRIPTS.

¿y cómo se utiliza?

Una vez que se activa el hook wp_enqueue_scripts podemos pedirle que mande a llamar la función adanzilla_scripts() y dentro de esta función mandaremos a llamar a la función wp_enqueue_style() quien es la encargada de agregar las hojas de estilo y wp_enqueue_script() quien es la encargada de agregar los scripts de javascript.

function adanzilla_scripts() {
	//Incluye nuestra hoja de estilos localizada en /css
	wp_enqueue_style( "adanzilla", get_template_directory_uri() . '/css/mis-estilos.css' , [], "1.0.0" );
	//Incluye nuestro script de de javascript localzada en /js
	wp_enqueue_script( "adanzilla", get_template_directory_uri() . '/js/mis-scripts.js', [ "jquery" ], "1.0.0", false );
}
add_action( 'wp_enqueue_scripts', 'adanzilla_scripts' );

Nótese que el wp_enqueue_script a diferencia del wp_enqueue_style el cuarto parámetro que solicita se llama DEPS que es la acortación para DEPENDENCIAS, en este caso agregamos “jQuery”, recordemos que WordPress por defecto ya tiene integrado jQuery, pero esta es la forma de declarar su dependencia y así evitar errores como el fastidioso “jQuery is not defined”

¿Y cuál es el resultado?

Se generarán ambas líneas de código en nuestro HTML que insertarán tanto la hoja de estilos como el script, la hoja de estilos dentro de la etiqueta y el script estará en el o antes de él dependiendo de la definición del wp_enqueue_script que hayamos utilizado.

<link rel='stylesheet' id='adanzilla-css'  href='http://adanzilla.local/wp-content/themes/adanzilla/css/mis-estilos.css?ver=1.0.0' media='all' />
<script src='http://adanzilla.com/wp-content/themes/adanzilla/js/mis-scripts.js?ver=1.0.0' id='adanzilla-js'></script>