wp_enqueue_style() es la función que WordPress ofrece para cargar hojas de estilos de forma ordenada. En lugar de poner enlaces CSS a mano en header.php, registras cada archivo con un identificador, sus dependencias, una versión y el tipo de dispositivo al que va dirigido.
El artículo original explicaba esta función con ejemplos de WordPress 3.3. Desde entonces han cambiado el editor, los temas y la forma de desarrollar plugins, pero la función sigue siendo válida. Lo que conviene actualizar es el contexto: hoy importa tanto cargar el CSS correctamente como no enviarlo a todas las páginas si solo se necesita en una.
La función registra una hoja de estilos si le pasas una URL y la añade a la cola de recursos que WordPress imprimirá en la página. También evita que el mismo archivo se cargue varias veces cuando otro tema o plugin usa el mismo identificador.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );Lenguaje del código: PHP (php)La referencia de wp_enqueue_style() en WordPress Developer Resources define estos cinco argumentos:
$handle: nombre único de la hoja de estilos.$src: URL o ruta del archivo CSS.$deps: matriz de hojas que deben cargarse antes.$ver: versión que se añade a la URL para controlar la caché.$media: medio o consulta CSS, como all, screen o print.La URL puede omitirse si el estilo ya se registró con wp_register_style(). En la mayoría de casos no hace falta separar el registro y la carga: si pasas una URL a wp_enqueue_style(), WordPress registra el recurso y lo pone en cola.
Para los estilos públicos de un tema usa el hook wp_enqueue_scripts. Este ejemplo carga la hoja principal del tema activo y utiliza la versión declarada en su cabecera:
function mi_tema_enqueue_styles() {
wp_enqueue_style(
'mi-tema-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'mi_tema_enqueue_styles' );Lenguaje del código: PHP (php)get_stylesheet_uri() devuelve la URL del style.css del tema activo. En un tema hijo apunta al tema hijo, que es lo habitual para sus personalizaciones. Si necesitas cargar además el CSS del tema padre, puedes hacerlo con get_template_directory_uri() y declarar el identificador del padre como dependencia.
function mi_tema_hijo_enqueue_styles() {
wp_enqueue_style(
'tema-padre',
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme( get_template() )->get( 'Version' )
);
wp_enqueue_style(
'tema-hijo',
get_stylesheet_uri(),
array( 'tema-padre' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'mi_tema_hijo_enqueue_styles' );Lenguaje del código: PHP (php)No todos los temas hijos necesitan cargar manualmente el CSS del padre. Algunos temas modernos ya gestionan sus estilos con theme.json o tienen otra arquitectura. Antes de añadir este código revisa la documentación del tema y comprueba si el padre ya se está cargando.
Un plugin también debe usar la cola de WordPress. Para un estilo que se muestra en la parte pública, utiliza wp_enqueue_scripts y construye la URL con plugins_url() o plugin_dir_url():
function mi_plugin_enqueue_styles() {
wp_enqueue_style(
'mi-plugin-public',
plugins_url( 'assets/css/public.css', __FILE__ ),
array(),
'1.0.0',
'all'
);
}
add_action( 'wp_enqueue_scripts', 'mi_plugin_enqueue_styles' );Lenguaje del código: PHP (php)Para una pantalla propia del escritorio no cargues el CSS en todo el panel. Usa admin_enqueue_scripts y comprueba el identificador de la página:
function mi_plugin_admin_styles( $hook_suffix ) {
if ( 'settings_page_mi-plugin' !== $hook_suffix ) {
return;
}
wp_enqueue_style(
'mi-plugin-admin',
plugins_url( 'assets/css/admin.css', __FILE__ ),
array(),
'1.0.0'
);
}
add_action( 'admin_enqueue_scripts', 'mi_plugin_admin_styles' );Lenguaje del código: PHP (php)Cargar los recursos solo donde hacen falta reduce CSS innecesario y evita que los estilos de un plugin interfieran con páginas que no tienen relación con él. Si el CSS solo acompaña a un bloque, estudia también wp_enqueue_block_style() y la forma en que tu tema gestiona los estilos de bloques.
El tercer argumento indica qué estilos deben ir antes. Por ejemplo, un CSS propio que modifica Bootstrap debería declarar el handle de Bootstrap como dependencia:
wp_enqueue_style(
'mi-personalizacion',
plugins_url( 'assets/css/custom.css', __FILE__ ),
array( 'bootstrap' ),
'1.2.0'
);Lenguaje del código: PHP (php)El cuarto argumento controla la versión. Si usas una cadena como 1.2.0, WordPress la añade a la URL y el navegador puede distinguir ese archivo de una versión anterior. Si dejas el valor en false, WordPress utiliza su versión instalada. Si pasas null, no añade ningún parámetro.
Para un archivo propio que cambia con frecuencia puedes utilizar su fecha de modificación:
$css_path = get_theme_file_path( 'assets/css/app.css' );
$css_version = file_exists( $css_path ) ? filemtime( $css_path ) : null;
wp_enqueue_style(
'mi-tema-app',
get_theme_file_uri( 'assets/css/app.css' ),
array(),
$css_version
);Lenguaje del código: PHP (php)Evita usar time() como versión. Cambiaría la URL en cada visita y obligaría al navegador a descargar el archivo una y otra vez, incluso aunque no haya cambiado.
Si un plugin añade un formulario de contacto que solo aparece en una página concreta, no tiene sentido cargar sus estilos en todo el sitio. Las etiquetas condicionales funcionan dentro de wp_enqueue_scripts:
function mi_formulario_styles() {
if ( ! is_page( 'contacto' ) ) {
return;
}
wp_enqueue_style(
'mi-formulario',
plugins_url( 'assets/css/formulario.css', __FILE__ ),
array(),
'1.0.0'
);
}
add_action( 'wp_enqueue_scripts', 'mi_formulario_styles' );Lenguaje del código: PHP (php)Haz una prueba después de aplicar condiciones. Es fácil quitar un recurso de una plantilla que también lo necesita una página especial, un bloque reutilizado o una petición AJAX.
<link> directamente en header.php. Pierdes el sistema de dependencias y dificultas que otros plugins gestionen el recurso.get_theme_file_uri() y plugins_url() funcionan mejor cuando el sitio cambia de dominio o mueve la carpeta de plugins.time() para romper la caché. El navegador nunca puede reutilizar el archivo.Si publicas ejemplos de código, comprueba también que el resaltado no altera las comillas, los signos menor y mayor o la sangría. En WPdirecto tienes una guía actualizada sobre SyntaxHighlighter Evolved y sus alternativas para mostrar snippets sin perder formato.
Los archivos CSS forman parte del código de tu tema o plugin, así que mantenlos bajo control de versiones y revisa los cambios cuando actualices la instalación. Si estás auditando una web antigua, nuestra guía sobre ficheros de WordPress y checksums explica cómo distinguir el núcleo de los archivos propios del sitio.
La información se ha actualizado con la referencia oficial de wp_enqueue_style(), la documentación de rutas de plugins y contenidos y la guía de WordPress sobre carga de CSS y JavaScript.
