---
title: "wp_enqueue_style(): cargar CSS en WordPress"
description: "Guía actualizada para cargar CSS en temas y plugins con wp_enqueue_style(), controlar dependencias y versiones y evitar recursos innecesarios."
url: https://wpdirecto.com/funcion-wp_enqueue_style/
date: 2012-05-03
modified: 2026-09-10
author: "David Carrero Fernández-Baillo"
image: https://wpdirecto.com/wp-content/uploads/2026/09/wp-enqueue-style-wordpress-css.png
categories: ["Desarrollo"]
tags: ["codex", "css", "estilos", "funciones"]
type: post
lang: es
---

# wp_enqueue_style(): cargar CSS en WordPress

**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.

## Qué hace wp_enqueue_style()

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](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) 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.

## La forma correcta de cargar CSS en un tema

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.

## Cómo cargar estilos desde un plugin

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.

## Dependencias, versiones y caché

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.

## Cargar una hoja solo en determinadas páginas

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.

## Errores habituales

- **Poner un \`\` directamente en `header.php`.** Pierdes el sistema de dependencias y dificultas que otros plugins gestionen el recurso.
- **Usar una URL fija para un archivo local.** Las funciones como `get_theme_file_uri()` y `plugins_url()` funcionan mejor cuando el sitio cambia de dominio o mueve la carpeta de plugins.
- **Repetir el mismo handle.** El identificador debe ser único; reutilizarlo puede hacer que un recurso no se registre como esperas.
- **Cargar CSS del panel en la web pública.** Separa los hooks de administración y frontend.
- **Usar `time()` para romper la caché.** El navegador nunca puede reutilizar el archivo.
- **Confundir CSS con lógica de presentación del bloque.** Si trabajas con bloques, revisa si el estilo pertenece a todo el tema o solo a un bloque concreto.

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](https://wpdirecto.com/destaca-tu-codigo-fuente-con-wordpress-con-syntaxhighlighter-evolved/) para mostrar snippets sin perder formato.

## Una comprobación rápida antes de publicar

1. Confirma que el hook coincide con el lugar donde se usará el CSS.
2. Comprueba que el handle no coincide con el de otro tema o plugin.
3. Abre la URL del CSS en el navegador y revisa que no devuelva un error 404.
4. Comprueba las dependencias en el orden que aparece en el HTML.
5. Modifica una regla y verifica que la caché se renueva sin cargar una versión distinta.
6. Prueba escritorio, móvil y páginas que no deberían cargar ese archivo.

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](https://wpdirecto.com/lista-completa-de-ficheros-por-defecto-de-wordpress/) explica cómo distinguir el núcleo de los archivos propios del sitio.

## Fuentes oficiales

La información se ha actualizado con la referencia oficial de [wp_enqueue_style()](https://developer.wordpress.org/reference/functions/wp_enqueue_style/), la documentación de [rutas de plugins y contenidos](https://developer.wordpress.org/plugins/plugin-basics/determining-plugin-and-content-directories/) y la guía de WordPress sobre [carga de CSS y JavaScript](https://developer.wordpress.org/themes/classic-themes/basics/including-css-javascript/).