Introducción
Este tutorial explica, paso a paso y con todo detalle, cómo ocultar la categoría por defecto “Sin categoría” de los listados de WordPress usando únicamente CSS. El método es rápido y no requiere tocar plantillas PHP, por lo que es ideal para usuarios que quieren una solución no destructiva y fácilmente reversible. También incluiré variantes y recomendaciones para hacerlo robusto según el tema y dónde aparece esa categoría (widget, metadatos del post, listas de categorías, menús, etc.).
Consideraciones previas
Antes de aplicar CSS conviene tener en cuenta:
- El CSS oculta visualmente la categoría, pero no la elimina del código HTML ni de la estructura del sitio seguirá existiendo para buscadores y feeds.
- Dependencia del tema: cada tema imprime las clases HTML de manera distinta (ej. .cat-item-123, .entry-meta .cat-links, .post .category-sin-categoria). Hay que identificar el selector correcto inspeccionando el HTML.
- Preferible en child theme o en “CSS adicional”: añade las reglas en Apariencia → Personalizar → CSS adicional o en el style.css de un child theme para evitar perder los cambios en actualizaciones.
- Accesibilidad: display:none oculta también a lectores de pantalla. Si quieres que siga accesible pero invisible visualmente, usa otras técnicas (off-screen), aunque en este caso normalmente se busca ocultarlo completamente.
Cómo identificar la clase o el ID de la categoría
- En el Frontend, ve a una entrada que muestre la categoría “Sin categoría” o a la lista de categorías (widget o página de categorías).
- Haz clic derecho → Inspeccionar elemento (DevTools) y localiza el enlace o el elemento que contiene “Sin categoría”.
- Busca clases como:
- cat-item-123 (aparece en listas generadas por wp_list_categories 123 es el ID real)
- category-sin-categoria o category-slug (aparece en las clases de post)
- o un enlace con href que contenga /category/sin-categoria
- Si no sabes el ID, puedes averiguarlo desde el Escritorio → Entradas → Categorías y al pasar el ratón sobre “Editar” verás en la URL term_id=NNN (ese NNN es el ID).
Reglas CSS típicas (ejemplos listos para copiar)
A continuación tienes varias soluciones según dónde quieras ocultar la categoría. Ajusta el ID o el slug al tuyo.
1) Ocultar la categoría en el widget “Categorías” (lista generada por wp_list_categories)
Suele usar la clase .cat-item-ID. Reemplaza 123 por el ID real.
/ Oculta la categoría Sin categoría en el widget de Categorías /
.widget_categories .cat-item-123 {
display: none !important
}
2) Ocultar el enlace por slug buscando en el atributo href
Útil cuando no hay clase específica pero el enlace apunta a /category/sin-categoria. Usa para coincidir parcialmente la URL (más tolerante a la estructura del sitio).
/ Oculta cualquier enlace que contenga /sin-categoria /
a[href=/sin-categoria] {
display: none !important
}
3) Ocultar la categoría en los metadatos del post (lista de categorías del artículo)
Muchos temas imprimen las categorías dentro de .entry-meta o .post-meta y dentro de un contenedor .cat-links. Esta regla oculta la categoría dentro de la barra de metadatos del post:
/ Oculta la categoría Sin categoría dentro de los metadatos del post /
.entry-meta a[href=/sin-categoria],
.post-meta a[href=/sin-categoria] {
display: none !important
}
4) Ocultar la etiqueta de categoría aplicada al post (clase de post)
WordPress añade clases tipo category-slug a los elementos de post. Si tu tema imprime esa clase en el contenedor del post, puedes ocultar el label así:
/ Si el post tiene la clase .category-sin-categoria y el tema muestra esa etiqueta /
.category-sin-categoria .cat-links,
.post.category-sin-categoria .cat-links {
display: none !important
}
5) Ocultar en un menú personalizado (si añadiste la categoría al menú)
Si la categoría se agregó manualmente a un menú, el selector puede basarse en el enlace del menú o en una clase .menu-item identificada. Ejemplo por href:
/ Oculta el elemento del menú cuyo enlace apunta a la categoría /
nav a[href=/sin-categoria],
.main-navigation a[href=/sin-categoria] {
display: none !important
}
Cómo añadir el CSS en WordPress
- Apariencia → Personalizar → CSS adicional: pega la regla CSS y guarda.
- O edita el style.css de tu child theme y añade las reglas al final del archivo.
- Si necesitas insertar dinámicamente el ID desde PHP (por ejemplo, si quieres que el ID no esté hardcodeado), puedes obtener el ID por slug y generar el CSS en functions.php. Ejemplo a continuación.
Cómo obtener el ID de la categoría por slug (snippet PHP)
Si prefieres automatizar la generación del selector cat-item-ID, este snippet PHP te devuelve el ID de la categoría con slug sin-categoria:
term_id )
} else {
echo Categoría no encontrada
}
?>
Ejemplo: añadir CSS desde functions.php usando el ID obtenido
Este ejemplo genera e inyecta una regla CSS que oculta .cat-item-{ID}. Úsalo en el functions.php de un child theme.
term_id )
echo
}
}
?>
Caveats y recomendaciones finales
- ¡Verifica los selectores! No todos los temas usan las mismas clases. Inspecciona el HTML antes de aplicar las reglas.
- Uso de !important: A menudo es necesario para sobrescribir estilos del tema. Úsalo con moderación y lo más específico posible para evitar conflictos.
- SEO y feeds: CSS no elimina la categoría en términos de SEO ni la quita de los feeds solo la oculta visualmente. Si necesitas eliminarla completamente (por ejemplo, para evitar que aparezca en listados o widgets a nivel de servidor), considera una solución PHP (filtrar wp_list_categories o modificar la consulta de categorías).
- Pruebas en dispositivos y cache: limpia la cache del sitio y del navegador tras aplicar cambios y revisa en móvil y escritorio.
- Uso responsable: si ocultas la única categoría de muchos posts, considera crear una nueva categoría por defecto para mantener la estructura y la navegación del sitio.
Snippet rápido para eliminar la categoría de wp_list_categories vía PHP (alternativa)
Si prefieres no depender de CSS y quieres excluir la categoría del listado generado por wp_list_categories, puedes usar este filtro (añádelo en functions.php):
Este enfoque elimina la categoría a nivel de servidor del widget de categorías y es más limpio desde el punto de vista del HTML generado.
Resumen
Ocultar “Sin categoría” con CSS es rápido y reversible: identifica la clase o href asociado, escribe una regla CSS específica y añádela en el Personalizador o en tu child theme. Para eliminar la categoría definitivamente del HTML generado o de widgets, usa soluciones PHP. Siempre verifica en varios dispositivos y limpia la caché tras aplicar cambios.
Leave a Reply