body_class()
body_class() añade un atributo class al elemento <body> con clases dinámicas que WordPress genera según el contexto: tipo de página, ID del post, categoría, si el usuario está logueado, etc.
Uso básico
<!-- En header.php -->
<body <?php body_class(); ?>>Clases que genera automáticamente
// Tipo de página
.home → portada
.blog → página del blog
.archive → páginas de archivo (categoría, fecha, autor)
.single → post individual
.page → página estática
.search → resultados de búsqueda
.error404 → página 404
.attachment → página de adjunto
// Contenido específico
.single-post → post de tipo 'post'
.single-producto → post de tipo 'producto' (CPT)
.page-id-42 → página con ID 42
.page-template-contacto → plantilla 'contacto'
.category-tecnologia → categoría 'tecnología'
// Usuario
.logged-in → usuario autenticado
.admin-bar → si se muestra la barra de adminAñadir clases personalizadas
// Directamente en la llamada
<body <?php body_class( 'tema-oscuro layout-ancho' ); ?>>
// Via filter para lógica condicional
add_filter( 'body_class', 'mis_clases_body' );
function mis_clases_body( $classes ) {
// Añadir clase si es un producto destacado
if ( is_singular('producto') ) {
$destacado = get_post_meta( get_the_ID(), '_destacado', true );
if ( $destacado ) {
$classes[] = 'producto-destacado';
}
}
// Eliminar una clase que no quieres
$classes = array_diff( $classes, [ 'clase-a-eliminar' ] );
return $classes;
}Uso en CSS
/* Estilos específicos por contexto */
.single-producto .entry-title { font-size: 2rem; }
.logged-in .precio-especial { display: block; }
.error404 .site-content { text-align: center; }