Cuando estás creando un tema de WordPress es posible que desees crear hojas de estilo adicionales o archivos JavaScript.

Sin embargo, recuerda que un sitio web de WordPress no solo tendrá su tema activo, sino que también utilizará muchos complementos diferentes. Para que todo funcione armoniosamente, es importante que el tema y los complementos carguen scripts y hojas de estilo utilizando el método estándar de WordPress. Esto asegurará que el sitio siga siendo eficiente y que no haya problemas de incompatibilidad.

Agregar scripts y estilos a WordPress es un proceso bastante simple. Esencialmente, crearemos una función que pondrá en cola todos sus scripts y estilos.

Al poner en cola una secuencia de comandos o una hoja de estilo, WordPress crea un identificador y una ruta para encontrar su archivo y cualquier dependencia que pueda tener (como jQuery) y luego usará un enlace que insertará sus secuencias de comandos y hojas de estilo.

Encolar scripts y estilos

La forma adecuada de agregar secuencias de comandos y estilos a su tema es ponerlos en cola en el fichero functions.php.

El fichero style.css es obligatorio en todos los temas, pero puede ser necesario agregar otros archivos para ampliar la funcionalidad de su sitio.

Hojas de estilo

Las hojas de estilo CSS se utilizan para personalizar la presentación de su tema. Una hoja de estilo es también el archivo donde se almacena la información sobre su tema. Por esta razón, el archivo style.css es obligatorio en todos los temas.

En lugar de cargar la hoja de estilo en su fichero header.php, debe cargarla usando wp_enqueue_style. Para cargar su hoja de estilo principal, puede ponerla en cola en el archivo functions.php:

wp_enqueue_style('themeStyle', get_stylesheet_directory_uri() . '/style.css');	

Esto buscará una hoja de estilo llamada style.css y la cargará.

Entonces, si quisiera cargar una hoja de estilo llamada mycustom.css en una carpeta llamada css en el directorio raíz de su tema, usaría:

wp_enqueue_style('mycustomCss', get_stylesheet_directory_uri() . '/css/mycustom.css');	

Scripts

Cualquier archivo JavaScript adicional requerido por un tema debe cargarse usando wp_enqueue_script. Esto garantiza una carga y un almacenamiento en caché adecuados, y permite el uso de etiquetas condicionales para orientar páginas específicas. Su uso podría ser el siguiente:

wp_enqueue_script('myCustomJs', get_stylesheet_directory_uri() . '/mycustom.js');

Optimización

Lo mejor es combinar todos los scripts y estilos en cola en una sola función y luego llamarlos usando la acción wp_enqueue_scripts.

Deberemos añadir el siguiente fichero en el archivo functions.php de nuestro theme:

function add_theme_scripts() {
	$theme_path = get_stylesheet_directory_uri();
  
	// styles  
	wp_enqueue_style('myCustomCss', $theme_path . '/mycustom.css');
  
	// scripts
	wp_enqueue_script('myCustomJs', $theme_path . '/mycustom.js');
  
}
  
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

En el ejemplo anterior sólo hemos añadido un fichero de tipo css y uno de tipo js. Para ello, hemos utilizado un hook de tipo action propio de WordPress.

Al principio definimos la variable $theme_path para no llamar varias veces a la función get_stylesheet_directory_uri(), optimizando así un poco más la carga de estos ficheros.