Cómo agregar una clase body personalizada en páginas específicas con Astra Pro

¿Quieres aplicar estilos CSS únicos a páginas específicas de tu sitio WordPress?
La forma más limpia es agregar una clase personalizada al tag <body> — así puedes apuntar a esas páginas con precisión usando CSS.
Siguiendo los pasos a continuación, podrás agregar una clase body personalizada a cualquier página (o grupo de páginas) usando la función Custom Layouts de Astra Pro — sin necesidad de programar.

Resumen

WordPress ya agrega algunas clases al body automáticamente (como page-id-42), pero a veces necesitas
una clase limpia y significativa como special-page que tú mismo controles.
La función Custom Layouts de Astra Pro te permite inyectar un pequeño fragmento de JavaScript en páginas específicas,
que agrega tu clase personalizada al body al cargar la página.

Flujo de trabajo:

[Astra Pro → Custom Layouts] → [Fragmento JavaScript] → [Inyectado via hook wp_head] → [Clase body agregada en DOMContentLoaded]

Paso 1. Abrir Custom Layouts en Astra Pro

1. Inicia sesión en el panel de administración de WordPress.
2. Ve a Apariencia → Astra Options.
3. Encuentra el módulo Custom Layouts y haz clic en Settings.
4. Haz clic en Add New.

Si no ves Custom Layouts, es posible que necesites activarlo primero.
Ve a Apariencia → Astra Options → Astra Addons y activa el interruptor de Custom Layouts.

Paso 2. Configurar el Custom Layout

Verás una nueva pantalla de editor. Completa lo siguiente:

1. Agrega un Título como referencia propia (ej. Body Class - Páginas Especiales).
2. En el editor, haz clic en la pestaña Code y pega el siguiente fragmento:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Reemplaza special-page con el nombre de clase que desees usar.

Paso 3. Configurar el Hook

Desplázate hacia abajo para encontrar el panel Layout Settings y configura:

Layout → Hook
Action → wp_head
Priority → 10

Importante: Aunque el script se inyecta dentro de <head>,
no se ejecutará hasta que el DOM esté completamente analizado — porque lo envolvimos en
document.addEventListener('DOMContentLoaded', ...).
Esto garantiza que document.body exista cuando se agrega la clase,
y se ejecuta antes que wp_footer, evitando cualquier destello de contenido sin estilos.

Paso 4. Configurar las condiciones de visualización

Aún en el panel Layout Settings, encuentra Display On y selecciona las páginas
donde quieres que aparezca la clase body.

Puedes elegir entre condiciones como:

Specific Page — apunta a una o más páginas individuales por nombre
All Pages — aplica a todas las páginas del sitio
Front Page — solo la página de inicio
Page Template — todas las páginas que usan una plantilla específica

Puedes agregar múltiples páginas a la vez en un solo Custom Layout,
lo cual es mucho más eficiente que crear un layout por página.

Paso 5. Publicar

Una vez configurados el hook y las condiciones de visualización, haz clic en Publish en la esquina superior derecha.

Paso 6. Verificar que funciona

Visita una de las páginas que seleccionaste en Display On.
Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar (o presiona F12).
En la pestaña Elements, encuentra el tag <body>.
Confirma que tu clase personalizada aparece en la lista de clases:

<body class="home page-template-default ... special-page">

Nota: No uses Ver código fuente para verificar —
eso muestra el HTML antes de que se ejecute JavaScript, por lo que la clase no aparecerá ahí.
Siempre usa Inspect Element para ver el DOM en vivo después de que JavaScript se haya ejecutado.

Úsalo en tu CSS

Ahora puedes apuntar a esas páginas específicamente en tu CSS:

/* Solo aplica en páginas con la clase body special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Agrégalo en Apariencia → Personalizar → CSS adicional o en la hoja de estilos de tu tema hijo.

Solución de problemas

¿La clase no aparece? Asegúrate de verificar con Inspect Element, no con Ver código fuente.
¿Sigue sin funcionar? Limpia la caché del navegador y cualquier plugin de caché del sitio, luego recarga.
¿Usas Cloudflare? Purga también la caché de Cloudflare para esa página.
¿La clase aparece en páginas incorrectas? Revisa nuevamente las condiciones Display On en el Custom Layout.

Conclusión

Ahora tienes una forma simple y confiable de agregar una clase body personalizada a páginas específicas de WordPress
usando Astra Pro — sin tocar functions.php ni crear plantillas de página personalizadas.

Resumen del proceso:
Custom Layouts → Fragmento JavaScript → Hook wp_head → Condiciones de visualización → Clase body personalizada ✅

Este enfoque es especialmente útil cuando necesitas aplicar estilos únicos a un grupo de páginas
sin afectar el resto de tu sitio. Limpio, preciso y fácil de gestionar.