Tutorial WordPress: Encapsular estilos solo para una página usando body.page-id-XX

Introducción

En WordPress cada página suele llevar clases específicas en la etiqueta body generadas automáticamente por el sistema. Una de las más útiles es la clase page-id-XX (donde XX es el ID numérico de la página). Encapsular estilos usando esa clase permite aplicar CSS solo en una página concreta, evitando conflictos y minimizando el impacto en el resto del sitio. Este artículo explica en detalle cómo encontrar el ID, varias formas de cargar o escribir estilos específicos para una página y buenas prácticas para mantener el código limpio y eficiente.

¿Por qué encapsular estilos por página?

Evitar colisiones: los estilos globales pueden afectar a otras páginas acotar el alcance evita roturas visuales.
Mejor mantenimiento: cambios localizados son más fáciles de revisar y revertir.
Rendimiento: cargar CSS solo donde es necesario reduce el CSS útil para cada vista.
Compatibilidad con plugins/temas: menor probabilidad de sobrescribir reglas de terceros.

Cómo encontrar el ID de la página

En el escritorio de WordPress, al editar la página mira la URL: el parámetro post= o post_id contendrá el número. Ejemplo: post=123.
Desde el frontend, abre las herramientas de desarrollador (Inspector) y revisa las clases del elemento body verás page-id-123 entre otras.
También puedes usar funciones PHP como get_the_ID() dentro de plantillas.

Métodos para encapsular estilos

Presento cuatro enfoques comunes, con ejemplos prácticos y recomendaciones sobre cuándo usar cada uno.

Método 1 — CSS directo con la clase page-id-XX

El método más sencillo: en tu archivo CSS global prefixa tus reglas con la clase de la página. Es inmediato y no requiere PHP.

/ archivo: style.css o css/global.css /
body.page-id-123 .entrada-hero {
    background: linear-gradient(90deg, #fff, #f2f2f2)
    padding: 40px 20px
}
body.page-id-123 .contenido-principal h2 {
    color: #2b6cb0
    margin-bottom: 1rem
}

Ventaja: simple. Inconveniente: el CSS se carga globalmente aunque solo se use en una página.

Método 2 — Cargar un archivo CSS solo para una página (functions.php)

Encola un stylesheet únicamente cuando la página coincide usando condicionales de WordPress. Recomendado para mantener el global limpio y mejorar rendimiento.

Dentro de /css/pagina-123.css, escribe reglas normales (puedes seguir usando la clase page-id-123 si quieres doble seguridad).

Método 3 — Añadir CSS inline desde PHP (cuando necesitas pocos estilos)

Útil para ajustes puntuales y rápidos. Evita abusar de este método para mucho CSS.

Nota: wp_add_inline_style requiere que el handle exista si no, puedes imprimir directamente con echo en la plantilla (menos recomendado).

Método 4 — Scoped dentro de la propia plantilla / bloque contenedor

Si controlas la plantilla de esa página puedes envolver el contenido con una clase única y escribir CSS que afecte solo a ese contenedor. Esto es especialmente útil cuando trabajas con bloques o shortcodes y quieres aislar estilos internos.

/ ejemplo de CSS para un contenedor específico /
.page-mi-landscape .hero { display:flex align-items:center gap:20px }
.page-mi-landscape .hero .imagen { flex:0 0 40% }

Y en la plantilla: asigna la clase page-mi-landscape al wrapper. Este enfoque evita depender de la clase del body y mejora legibilidad.

Consideraciones y trucos avanzados

Especificidad: si tus reglas no se aplican, sube la especificidad en lugar de usar !important por defecto. Por ejemplo usar body.page-id-123 .clase > .subclase.
Post vs Page: para entradas se usa postid-XX templates personalizados a veces añaden page-template-nombre.
Gutenberg y bloques: algunos bloques generan estilos en línea o clases propias revisa el HTML generado con el inspector para apuntar a los selectores correctos.
Caching/Minificación: si usas plugins de cache o deminify CSS, limpia caché tras cambios y asegúrate de que los archivos encolados usan versión actualizada.
Child theme: coloca estilos o modificaciones en un child theme para no perder cambios en actualizaciones del tema padre.
Performance: encolar un archivo CSS pequeño solo para la página es preferible a cargar un archivo grande en todas las páginas.

Ejemplo completo paso a paso

Objetivo: cargar estilos solo para la página con ID 123 y aplicar cambios en el header y en un bloque hero.

1) Añadir en functions.php:

2) Crear el archivo assets/css/pagina-123.css con:

/ assets/css/pagina-123.css /
body.page-id-123 .site-header {
    background: rgba(255,255,255,0.95)
    border-bottom: 1px solid #e6e6e6
}
body.page-id-123 .hero {
    background-image: url(/wp-content/uploads/hero-landing.jpg)
    background-size: cover
    padding: 6rem 2rem
}
body.page-id-123 .hero h1 {
    color: #ffffff
    text-shadow: 0 2px 6px rgba(0,0,0,0.35)
}

Con esto lograrás que el CSS solo se cargue en la página 123 y que las reglas afecten solo a esa vista.

Buenas prácticas finales

Prioriza encolar archivos por página antes que inundar el CSS global.
Mantén un prefijo o nomenclatura clara para archivos y clases (por ejemplo pagina-123, page-123, etc.).
Evita el abuso de !important úsalo solo como último recurso.
Documenta en comentarios el motivo de estilos específicos para facilitar mantenimiento futuro.
Prueba en distintas resoluciones y limpia cachés/optimización tras cambios.

Implementar estilos encapsulados con page-id-XX es una técnica sencilla pero poderosa para mantener un código CSS ordenado y evitar efectos secundarios no deseados en el resto del sitio. Utiliza el método que mejor se ajuste a tu flujo de trabajo y escala del proyecto: desde CSS rápido hasta encolado condicional con PHP.

SushiHost