Como agregar correctamente CSS y JavaScript a WordPress

Si utilizas un tema hijo o desarrollas tu propio tema en WordPress es probable que necesites añadir mas hojas de estilo o alguna que otra librería en Javascript. Hay varias maneras de hacerlo, pero la forma correcta es mediante la función wp_enque_scripts. Esta te permite registrar tus archivos de manera ordenada, logrando que se ejecuten una sola vez y al mismo tiempo evitar conflictos con otros complementos y plugins que seguramente añadirán otros archivos CSS o JS.

¿Como utilizar wp_enque_scripts de wordpress?

Dirígete al archivo functions.php de tu tema personalizado o tema hijo, copia, pega y modifica el siguiente snippet que te explicaré mas abajo:

function custom_scripts() {
    wp_enqueue_style( 'styles', get_stylesheet_uri() );
    wp_enqueue_style('custom-styles',  get_template_directory_uri() . '/assets/css/styles.css', array('jquery'), '1.2.1', 'all');
    wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/scripts.js', array(), '5.3', true );

}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Con wp_enqueue_style añadimos nuestros archivos CSS, su estructura completa es la siguiente:

wp_enqueue_style( 'handle', 'src', 'deps' , 'ver', 'media' );

Donde:

• handle: es el nombre único de nuestro css para efectos de wordpress (en nuestro ejemplo uno se llama styles y el otro custom-styles).
• src: es la ruta de nuestro archivo. En el primer caso utilizamos get_stylesheet_uri() para obtener directamente la ruta al archivo styles de nuestro custom theme. En el segundo ejemplo usamos get_template_directory_uri() para obtener la ruta raíz de nuestro custom theme y luego añadir la ruta hasta nuestro archivo css.
• deps: Aquí agregamos un arreglo de dependencias, podemos dejarlo vació de esta forma «array()», pero hemos colocado array(‘jquery’) en nuestro ejemplo para indicar que nuestro archivo debe ejecutarse después de jquery. Si queremos agregar otro debemos separarlos por comas, Ejemplo: array(‘jquery’, ‘bootstrap’).
• ver: Indica la versión de nuestro archivo, también puede dejarse en blanco, en comillas o en ‘false’ para no indicar ningún numero de versión.
• media: Con este parametro indicamos el medio al cual va destinado como (print o screen). Por defecto colocamos «all».

Para el caso de los scripts lo hacemos con la funcion wp_enqueue_script. Su estructura es la siguiente:

wp_enqueue_script( 'handle', 'src', 'deps', 'ver', 'in_footer' )

La diferencia con respecto a wp_enqueue_style es el parámetro $in_footer, puede ser true o false, lo colocamos true para que inserte a nuestro script en el pie de página, de lo contrario si colocamos false o no lo asignamos (por defecto false), lo añadirá en el head.

Una vez que hemos agregado nuestro archivos solo queda activar nuestra funcion con el hook:

add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Y listo!, ahora tu tema personalizado cargara a tus archivos CSS y JS de forma correcta.

Recuerda que si tienes dudas puedes consultar la documentacion oficial en:

• https://developer.wordpress.org/reference/functions/
• https://developer.wordpress.org/reference/functions/wp_enqueue_script/
• https://developer.wordpress.org/reference/functions/wp_enqueue_style/

O con toda confianza puedes dejar un comentario para plantear tus interrogantes. Si quieres guardar estos códigos como snippets te muestro como hacerlo en: https://pixonauta.com/snippets/los-snippets-de-codigo/

Y finalmente espero que este post haya sido de tu utilidad, compártelo con quien creas que lo necesite, gracias por llegar hasta aquí y nos estaremos leyendo pronto.