El calendario por defecto de WordPress, el detalle que delata un tema a medio hacer en los primeros tres segundos. Una tabla densa sin espaciado, fondo gris por defecto, texto apretado en las celdas. El desarrollador del tema dedicó una semana a las fuentes y los colores, pero se olvidó de #wp-calendar.

Veinte líneas de CSS lo cambian todo. A continuación encontrará el código que puede copiar en cualquier proyecto, junto con un desglose línea por línea para que no solo lo pegue, sino que entienda qué hace cada selector.

💡 Resumen rápido:

• CSS listo para usar para #wp-calendar, un solo bloque, cópielo completo
• Dónde insertar el código: Personalizador, plugin de fragmentos o tema hijo
• Qué hacer si el CSS no funciona, especificidad y cómo sobrescribirla
• Por qué la sombra de la captura de pantalla es solo para el artículo, no está en el código real

Cómo funciona el widget de calendario

Antes de copiar el código, un vistazo rápido a la estructura. WordPress genera este marcado para el widget:

• .widget_calendar, contenedor del widget en la barra lateral
• #wp-calendar, la tabla en sí (cada widget tiene su propio id)
• #wp-calendar caption, nombre del mes (encabezado de la tabla)
• #wp-calendar thead th, nombres abreviados de los días
• #wp-calendar tbody td, celdas de los días; las fechas con publicaciones se convierten en enlaces
• #wp-calendar tbody .pad, celdas vacías antes del primer día y después del último
• #wp-calendar tfoot #prev / #next, enlaces al mes anterior y siguiente

Estas clases no han cambiado en años y funcionan en todas las versiones de WordPress desde la 5.0 hasta las más recientes. Sin magia, solo marcado estándar del núcleo.

Un breve video sobre cómo añadir y configurar el widget de calendario en el administrador:

CSS listo para usar: copie y pegue

Añada este código a los estilos de su tema. El resultado es una tabla clara con celdas grises, efecto hover blanco y fondo desactivado para los días vacíos.

1
/* calendar widget — minimalistic styling */
2
.widget_calendar {float: left;}
3
#wp-calendar {width: 100%;}
4
#wp-calendar caption {
5
    text-align: right;
6
    color: #333;
7
    font-size: 12px;
8
    margin-top: 10px;
9
    margin-bottom: 15px;
10
}
11
#wp-calendar thead {font-size: 10px;}
12
#wp-calendar thead th {padding-bottom: 10px;}
13
#wp-calendar tbody {color: #aaa;}
14
#wp-calendar tbody td {
15
    background: #f5f5f5;
16
    border: 1px solid #fff;
17
    text-align: center;
18
    padding: 8px;
19
}
20
#wp-calendar tbody td:hover {background: #fff;}
21
#wp-calendar tbody .pad {background: none;}
22
#wp-calendar tfoot #next {
23
    font-size: 10px;
24
    text-transform: uppercase;
25
    text-align: right;
26
}
27
#wp-calendar tfoot #prev {
28
    font-size: 10px;
29
    text-transform: uppercase;
30
    padding-top: 10px;
31
}

Desglose por grupos:

Contenedor y ancho. .widget_calendar {float: left;} evita colisiones de flotación en barras laterales estrechas. #wp-calendar {width: 100%;} obliga a la tabla a estirarse al ancho completo de su contenedor padre; sin esto, el calendario se comporta como un elemento en línea y se encoge al ancho del contenido. Más información sobre CSS en WordPress.

Encabezado del mes. caption está alineado a la derecha, color gris oscuro con márgenes superior e inferior. El mes se lee como un título de la tabla, no como texto huérfano.

Cabecera con los nombres de los días. thead y th, fuente pequeña de 10px y relleno inferior. Los nombres abreviados de los días (Lun, Mar, Mié) no llaman la atención sobre sí mismos.

Celdas de los días. Color de texto principal #aaa, gris apagado. Cada celda recibe un fondo #f5f5f5 y un borde blanco que separa visualmente los días. padding: 8px da espacio de respiración alrededor de los números. Al pasar el cursor, la celda se vuelve blanca, un hover simple y claro sin animaciones.

Celdas vacías. .pad elimina el relleno de fondo para que los «huecos» al principio y al final del mes no parezcan días activos.

Navegación de meses. tfoot #prev y #next, enlaces a los meses adyacentes. Ambos en fuente pequeña en mayúsculas; #prev a la izquierda, #next a la derecha.

Nota: la sombra alrededor del calendario en la captura de pantalla de abajo es solo para ilustración del artículo. No está en el código real.

Tres formas de añadir CSS a su sitio

De la más simple a la más correcta.

Método 1: Personalizador. Vaya a Apariencia → Personalizar → CSS adicional y pegue el código. Ventajas: vista previa instantánea, sin necesidad de tocar archivos. Desventajas: los estilos están vinculados al tema, se pierden al cambiar de tema.

Método 2: Plugin de fragmentos. Instale Code Snippets o WPCode gratuitos y añada el código como un fragmento CSS activado en todo el sitio. Ventajas: los estilos viven independientemente del tema. Desventajas: un plugin más en el administrador.

Método 3: Tema hijo. Cree style.css en un tema hijo y pegue el código allí. Este es el camino correcto para proyectos en producción: los estilos sobreviven a las actualizaciones del tema padre y viven en control de versiones. Si aún no tiene un tema hijo, la guía de WordPress.org lo guiará en diez minutos.

Resultado

Después de añadir el CSS, el widget se ve así:

Los días están centrados, las celdas están separadas por bordes blancos, al pasar el cursor el fondo se vuelve blanco. Las celdas vacías no distraen, no tienen fondo gris. El nombre del mes se lee como un título ordenado.

Qué hacer si el CSS no funciona

Si el widget no ha cambiado después de pegar el código, su tema ya contiene estilos para #wp-calendar con mayor prioridad. Abra el inspector del navegador (F12), busque el elemento #wp-calendar tbody td y compruebe qué reglas están sobrescribiendo background y padding.

Para anular los estilos incorporados del tema, añada el ID de la barra lateral a los selectores o envuelva el código en un contexto más específico, por ejemplo, #sidebar .widget_calendar #wp-calendar tbody td. Esto aumenta la especificidad sin !important.

Widget o bloque: qué usar

Con el lanzamiento de Gutenberg, el núcleo introdujo un bloque «Calendario», un reemplazo moderno para el widget clásico. Este genera la misma tabla #wp-calendar y se estiliza con el mismo CSS. La diferencia está en la ubicación:

• Widget clásico, a través de Apariencia → Widgets, funciona solo en barras laterales y áreas de widgets del tema.
• Bloque «Calendario», insertado en cualquier página o entrada a través del editor de bloques, además de en áreas de widgets a través de Apariencia → Widgets (desde WordPress 5.8, los bloques también están disponibles allí).

El CSS de este artículo funciona con ambas opciones sin cambios. Elija el bloque si necesita el calendario en el cuerpo de la página; el widget clásico si solo está en la barra lateral y no desea cambiar su flujo de trabajo habitual.

⁉️🤔 Preguntas frecuentes

¿Por qué mi calendario no responde al CSS del artículo?

Lo más probable es que su tema ya contenga estilos para #wp-calendar con mayor prioridad. Abra el inspector (F12 en el navegador), haga clic en una celda del calendario y vea qué regla está sobrescribiendo su background. Solución: añada el ID del contenedor de la barra lateral antes del selector, por ejemplo, #secondary .widget_calendar #wp-calendar tbody td. Esto aumenta la especificidad sin !important.

¿Es necesario crear un tema hijo para 20 líneas de CSS?

Para un widget, no. Empiece con CSS adicional en el Personalizador (Apariencia → Personalizar). Cuando acumule suficientes reglas personalizadas para una personalización completa, entonces cree un tema hijo. El umbral de «es el momento» es aproximadamente 50 líneas de CSS o el primer cambio en functions.php.

¿Este CSS funciona con el bloque «Calendario» en Gutenberg?

Sí, completamente. El bloque «Calendario» renderiza la misma tabla #wp-calendar con las mismas clases. El código funciona sin cambios.

¿Puedo cambiar el esquema de colores?

Fácilmente. Reemplace #f5f5f5 (fondo de celda) y #fff (hover y borde) con los colores de su tema. Para un esquema oscuro, pruebe background: #2c2c2c; color: #ccc; para tbody td y background: #1a1a1a; para el hover. Lo principal es mantener el contraste entre el fondo de la celda y el texto.

¿Sigue siendo necesario el widget de calendario en 2026?

Para sitios de noticias y blogs activos, sí. El calendario ofrece a los lectores navegación por materiales antiguos sin buscar por categorías. Para tarjetas de presentación y páginas de aterrizaje, es inútil. Pero si su tema se vende en un marketplace, un widget estilizado es obligatorio: el comprador no debería ver una tabla desnuda, incluso si no usa el calendario en sí.

Calendario de WordPress: soluciónelo en cinco minutos u olvídelo

El calendario es un pequeño detalle que delata por completo un tema inacabado. Se soluciona copiando y pegando veinte líneas de CSS.

• Si crea un tema para usted, copie el código en CSS adicional en el Personalizador y olvídelo.
• Si escribe un tema para la venta, incluya los estilos en el style.css del tema hijo, es higiene básica.
• Si no necesita el calendario en absoluto, estílelo de todos modos. Un comprador del tema podría activar el widget, y no debería verse roto.

Compruebe cómo se ve su calendario ahora mismo: añada el widget a la barra lateral a través de Apariencia → Widgets y abra el sitio. ¿Tabla desnuda? El código está arriba, tómelo y soluciónelo en cinco minutos.