Introducción

Este tutorial explica, paso a paso y con ejemplos prácticos, cómo aplicar CSS únicamente a una categoría en WordPress usando las clases que WordPress añade al elemento body. Verás cómo identificar las clases generadas, cómo escribir selectores CSS que afecten solo a archivos de categoría o solo a entradas pertenecientes a esa categoría, y alternativas mediante filtros PHP. Todos los fragmentos de código están listados para copiar y pegar.

Concepto clave: clases que añade WordPress

WordPress añade automáticamente una serie de clases al elemento body mediante la función body_class(). Entre las más útiles para este objetivo están:

• category-{slug}: clase con el slug de la categoría (ej. category-noticias).
• category-{id}: clase con el ID numérico de la categoría (ej. category-12).
• category: aparece en las páginas de archivo de categoría (archive de la categoría).
• single, postid-{ID}: otras clases útiles para distinguir entradas individuales.

Importante: en los ejemplos CSS de abajo evitaré escribir la etiqueta body literalmente para no declarar HTML en CSS puedes usar los selectores como .category-noticias .mi-elemento que equivalen a apuntar a la clase presente en el body.

Paso 1 — Identificar el slug o el ID de la categoría

1. En el panel de WordPress ve a Entradas → Categorías. Localiza la categoría y copia su slug.
2. Si necesitas el ID, coloca el cursor sobre el nombre de la categoría y observa la URL del enlace de edición (aparecerá quottag_ID=ltnúmerogtquot).
3. También puedes inspeccionar la fuente de la página (Herramientas del navegador) en cualquier página de esa categoría o en una entrada que pertenezca a ella: busca clases que empiecen por category-.

Paso 2 — Escribir CSS que afecte solo a la categoría

Las reglas más habituales son:

• Aplicar estilo solo a la página de archivo de la categoría (ej. listado de posts de esa categoría).
• Aplicar estilo solo a las entradas que pertenezcan a esa categoría (cuando se visualiza la entrada individual).
• Combinaciones avanzadas (cuando una entrada pertenece a varias categorías, o para un post específico).

Ejemplo: estilos para la categoría con slug noticias (archivo de categoría)

/ Solo en la página de archivo de la categoría noticias /
.category.category-noticias .archive-title {
  background: #f5f5f5
  color: #333
  padding: 20px
}

Ejemplo: estilos para entradas que pertenezcan a la categoría noticias (vista single)

/ Solo en entradas que tienen asignada la categoría noticias /
.single.category-noticias .entry-header {
  border-left: 4px solid #e53935
}

Ejemplo: estilos aplicados en cualquier página donde exista la clase (archivo o single)

/ Afecta tanto al archivo como a las entradas que tengan la clase category-noticias /
.category-noticias .site-header {
  background-color: #0a6fb5
  color: #fff
}

Ejemplo: combinar categorías o dirigirse a un post concreto

/ Cuando la página (body) tiene dos clases de categoría (entrada perteneciente a dos categorías) /
.category-noticias.category-destacada .post {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12)
}

/ Para un post con ID 123 (independientemente de categoría) /
.postid-123 .entry-content {
  font-style: italic
}

Paso 3 — Dónde colocar el CSS

• En la hoja de estilos del child theme (style.css) — recomendado para cambios permanentes y control de versiones.
• En Apariencia → Personalizar → CSS adicional — útil para pruebas rápidas.
• Si usas un plugin de CSS personalizado o un constructor (page builder), pegar las reglas en su panel de CSS global.

Verificar que body_class() está presente

La mayoría de los themes modernos ya incluyen la llamada a body_class() en header.php. Si tu tema no lo tiene (improbable), debes asegurarte de que se llame a la función. Muestra la función que debe existir dentro del atributo de la etiqueta de apertura del body en tu header.php (no declararé el tag ltbodygt aquí, solo la función):

Alternativa: añadir clases personalizadas al body vía functions.php

Si quieres añadir clases más legibles o específicas, puedes usar el filtro body_class. Ejemplo: añadir una clase en-noticias cuando el archivo sea la categoría noticias o cuando una entrada pertenezca a dicha categoría.

/ Añadir clases personalizadas al body según condiciones /
add_filter(body_class, mi_agregar_clases_body)
function mi_agregar_clases_body(classes) {
  if (is_category(noticias)) {
    classes[] = archivo-noticias
  }
  if (is_single()  has_category(noticias)) {
    classes[] = entrada-en-noticias
  }
  return classes
}

Buenas prácticas y soluciones a problemas comunes

• Prioridad y especificidad: Si tu CSS no se aplica, puede deberse a que otras reglas con mayor especificidad o con !important las estén sobreescribiendo. Usa selectores más específicos en lugar de añadir !important a todo.
• Cache: Vacía la cache del sitio y del navegador tras cambios en CSS (plugins de cache o CDN pueden servir archivos antiguos).
• Slugs y mayúsculas: Los slugs suelen ser en minúsculas y con guiones escríbelos exactamente como aparecen en WordPress.
• Constructores visuales: Algunos page builders generan estructuras y clases propias que pueden impedir que tus selectores afecten los elementos. Inspecciona el DOM y apunta a las clases internas necesarias.
• Pruebas: Usa las herramientas de desarrollador del navegador (Inspeccionar elemento) para ver las clases que realmente están en el elemento body y probar las reglas antes de pegarlas en el CSS del sitio.

Tabla rápida de referencia

Selector	Qué afecta
.category-{slug} .selector	Archivo de categoría y entradas que pertenecen a esa categoría (porque la clase existe en ambos contextos si procede).
.category.category-{slug} .selector	Sólo el archivo de categoría (la clase category identifica el archive).
.single.category-{slug} .selector	Sólo en entradas individuales que pertenezcan a esa categoría.
.postid-{ID} .selector	Entrada específica por ID.

Resumen final

Aplicar CSS solo a una categoría en WordPress es robusto y simple: identifica el slug/ID, inspecciona las clases que WordPress añade, y usa selectores que combinen las clases (por ejemplo .category-noticias .mi-clase o .category.category-noticias .mi-clase) para apuntar precisamente a archivo o entradas. Si necesitas más control, añade clases personalizadas a través del filtro body_class en functions.php.

Notas finales

• Prefiere un child theme para cambios duraderos.
• Evita abusar de !important mejor incrementa la especificidad correctamente.
• Prueba en distintos tipos de páginas (archivo, single, página estática) para asegurarte de que el alcance de tus reglas es el esperado.