Este tutorial explica con todo detalle cómo ocultar la fecha de las entradas cuando se muestran en listados de categorías/archivos (o en el índice/blog) pero seguir mostrándola cuando se visualiza el post en su página individual (single) utilizando únicamente CSS. Se muestran varias alternativas según la estructura y las clases que tu tema genere, así como pasos prácticos para localizar el selector correcto e implementar la regla CSS de forma segura.
Concepto básico
WordPress añade clases al elemento ltbodygt según el contexto de la página: por ejemplo category, archive, home, tag, search para listados y single, single-post para páginas individuales de entradas. La técnica consiste en usar esas clases de contexto para aplicar estilos condicionales a la caja que contiene la fecha (o al elemento lttimegt): ocultarla en las páginas de categoría/archivo e imponer su visibilidad en la vista single.
Pasos previos: localizar el selector que contiene la fecha
Antes de aplicar CSS debes inspeccionar el HTML generado por tu tema (botón derecho → Inspeccionar o Herramientas de desarrollador). Busca el elemento que muestra la fecha suele tener alguno de estos nombres de clase (o una estructura similar):
- .entry-meta
- .post-meta
- .posted-on
- .post-date
- .byline (si autor fecha están juntos)
- el elemento lttimegt con clases como published o entry-date
Apunta el selector exacto para usarlo en las reglas CSS del siguiente apartado.
Soluciones CSS (ejemplos listos para usar)
A continuación hay varias opciones. Usa la que mejor encaje con tu tema después de verificar los selectores con la inspección.
1) Ocultar la fecha en todas las vistas que no sean single (solución genérica)
Esta regla oculta el meta que contiene la fecha en cualquier vista que no tenga la clase single en ltbodygt. Es la solución más simple si quieres que la fecha se vea solo en la página individual del post.
body:not(.single) .entry-meta,
body:not(.single) .posted-on,
body:not(.single) .post-meta {
display: none !important
}
2) Ocultar solo en páginas de categoría (selector específico)
Si solo quieres ocultar la fecha en las páginas de categoría (y mantenerla visible en otros listados como el inicio o archivos), usa la clase category:
body.category .entry-meta,
body.category .posted-on {
display: none !important
}
3) Ocultar el elemento lttimegt (si la fecha está en lttimegt)
Algunos temas imprimen la fecha dentro de una etiqueta lttimegt. En ese caso puedes ocultar solo ese elemento y dejar el resto del meta visible:
body:not(.single) time.published,
body:not(.single) time.entry-date {
display: none !important
}
4) Asegurar que en single se muestre (refuerzo de visibilidad)
Si el tema tiene reglas muy específicas que anulan tu CSS, puedes forzar la visibilidad en single con mayor especificidad:
.single .entry-meta,
.single .posted-on,
.single time.entry-date {
display: block !important / o inline/inline-block según el elemento /
}
5) Caso donde la fecha y el autor están juntos: ocultar solo la fecha
Si la fecha y el autor están en la misma línea y la fecha tiene su propio span o time con clase, oculta solo ese subelemento para no eliminar el autor:
body:not(.single) .byline .posted-on,
body:not(.single) .byline time.entry-date {
display: none !important
}
Dónde añadir este CSS
- Personalizar → CSS adicional (Apariencia → Personalizar → CSS adicional): método rápido y seguro.
- Archivo style.css de tu child theme: recomendado si usas tema hijo y quieres mantener control del estilo.
- Plugin de CSS personalizado (Simple Custom CSS, Code Snippets, etc.) si no quieres tocar archivos del tema.
Tras guardar, limpia cache de plugins de caché y del navegador para ver los cambios.
Consejos prácticos y problemas comunes
- Inspección es clave: cada tema nombra las clases de forma distinta. Localiza primero el selector exacto para no romper otras partes del layout.
- Evita abusar de !important: úsalo solo si el tema tiene reglas muy específicas que impiden sobrescribir sin mayor especificidad. Alternativa: aumentar especificidad (por ejemplo .site .content .entry-meta).
- Compatibilidad responsive: verifica en móvil. Algunos temas muestran meta diferente en pequeñas pantallas prueba el cambio en varios tamaños.
- Plugins/constructores: si usas Elementor, WPBakery u otro builder, la fecha puede ser parte de un widget con clases distintas la regla CSS debe apuntar a ese widget.
- Cache/Minificación: si no ves cambios, purga la caché del sitio, CDN y desactiva minificación temporalmente para comprobar.
- Alternativa con JS o PHP: aunque este tutorial se centra en CSS, si necesitas eliminar la fecha completamente del HTML (por ejemplo por SEO o estructura), hazlo en la plantilla PHP o mediante un filtro en un child theme CSS solo oculta visualmente.
Tabla rápida de selectores comunes (referencia)
| Selector típico | Cuándo usarlo |
| .entry-meta, .post-meta | Selector genérico usado por muchos temas para el bloque de metadatos (fecha, autor). |
| .posted-on | Clase muy común para la fecha suele envolver la etiqueta lttimegt. |
| time.entry-date, time.published | Si la fecha está en lttimegt, este selector apunta específicamente a ella. |
| body.category, body.archive, body.home | Clases de contexto que WordPress añade al elemento body permiten condicionar estilos según tipo de página. |
Ejemplo práctico completo
Imagina que al inspeccionar ves que la fecha está dentro de ltdiv class=entry-metagt y que el lttimegt tiene clase entry-date. Para ocultar la fecha en categorías y en cualquier listado, pero mantenerla en la vista single, aplicas:
/ Ocultar fecha en todas las vistas que no sean single /
body:not(.single) .entry-meta time.entry-date {
display: none !important
}
/ Asegurar que en single la fecha se muestre /
.single .entry-meta time.entry-date {
display: inline !important
}
Coloca estas reglas en el CSS adicional o en el style.css de tu child theme. Comprueba con la inspección y limpia caches.
Conclusión
Con una regla CSS basada en las clases de contexto que WordPress añade al elemento ltbodygt puedes ocultar la fecha en listados (categorías, archivos, índice) y asegurar que siga visible en la página single del post. El paso más importante es identificar correctamente el selector que contiene la fecha en tu tema una vez hecho eso, las reglas anteriores son simples y seguras. Asegúrate de probar en distintos dispositivos y de purgar cachés para que los cambios se reflejen.
Leave a Reply