Estilizar widget de calendário no WordPress é aplicar regras CSS aos seletores que o core já gera, sem editar arquivos do núcleo. O widget de calendário do WordPress sai com a classe .widget_calendar no contêiner e uma tabela #wp-calendar por dentro, então você mira nesses alvos e ajusta cor, borda, espaçamento e o destaque do dia de hoje. Este tutorial mostra o caminho prático: do CSS no Additional CSS do Customizer para teste imediato até o child theme para produção, com responsividade e os seletores corretos. Quem usa Elementor ou um tema de blocos também encontra aqui o ponto de injeção certo. Veja todos os tutoriais de WordPress da FULL para o contexto completo.

Primeiros passos: Onde o CSS do calendário vive

O widget de calendário do WordPress gera uma estrutura HTML fixa e previsível, e é nela que todo o CSS se apoia. O contêiner do widget recebe a classe .widget_calendar; dentro dele, o core monta <table id="wp-calendar" class="wp-calendar-table"> com <caption>, <thead> e <tbody>. Saber esses 3 alvos resolve a maior parte do trabalho de estilo. A tabela abaixo resume os seletores reais que você vai usar.

Legenda: a tabela #wp-calendar é o alvo central , cada coluna do thead e o id #today recebem CSS de forma independente.

Por que mirar os seletores do Core importa

Mirar .widget_calendar e #wp-calendar em vez de seletores genéricos evita que sua regra vaze para outras tabelas e perca a guerra de especificidade. Um id como #wp-calendar tem peso 100 de especificidade, contra apenas 10 de uma classe e 1 de um elemento, então a regra com id sobrescreve a do tema sem !important.

Segundo a MDN Web Docs, a cascata resolve conflitos pela soma de seletores de id, classe e elemento, e o id sempre vence a classe. Na prática isso significa que #wp-calendar td derrota qualquer table td herdado do tema, sem gambiarra. Quem ignora a especificidade acaba colando !important em tudo e quebra a manutenção meses depois, quando o tema atualiza e o CSS para de pegar. A maioria dos tickets de CSS quebrado que chega ao suporte da FULL nasce justamente de seletor genérico demais brigando com o tema. A regra de ouro: prefira o id #wp-calendar para a tabela e a classe .widget_calendar para o contêiner, e reserve !important só para o caso raro em que um plugin injeta estilo inline.

Passo a passo: Estilize o calendário com CSS

Estilizar o calendário leva cerca de 10 minutos e cabe em 4 blocos de CSS. O fluxo é testar no Additional CSS do Customizer, inspecionar com o Chrome DevTools, ajustar os seletores e só então mover para o child theme. Os 6 passos abaixo cobrem fundo, bordas, o dia atual e a navegação, na ordem em que fazem sentido aplicar.

Passo 1: Abra o additional CSS no customizer

Vá em Aparência, Personalizar, CSS adicional. Esse painel injeta CSS ao vivo e mostra o resultado em tempo real no preview à direita, sem recarregar a página. É o ambiente certo para experimentar, porque nada é salvo no banco até você clicar em Publicar. Cole aqui as regras dos próximos passos e observe o calendário mudar enquanto digita.

Passo 2: Estilize o conteiner com .widget_calendar

Comece pelo contêiner para dar respiro e identidade visual ao bloco:

.widget_calendar {
  background: #f7f7f9;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e2e2e6;
}

Isso aplica fundo claro, espaçamento interno de 16px e cantos arredondados ao widget inteiro, sem tocar na tabela ainda.

Passo 3: Formate a tabela #wp-calendar

Agora a tabela. Use o id para vencer a especificidade do tema:

#wp-calendar {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
#wp-calendar th,
#wp-calendar td {
  border: 1px solid #e2e2e6;
  padding: 6px;
  text-align: center;
}

O border-collapse: collapse junta as bordas das células numa linha única e limpa, padrão de grade de calendário.

Passo 4: Destaque o dia atual com #today

O core marca a célula de hoje com o id today. Dê a ela uma cor de marca:

#wp-calendar #today {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
}

Esse é o detalhe que mais agrega: o usuário enxerga o dia de hoje à primeira batida de olho.

Passo 5: Ajuste a navegação de meses

Os links de mês anterior e próximo vivem em .wp-calendar-nav-prev e .wp-calendar-nav-next:

.wp-calendar-nav-prev a,
.wp-calendar-nav-next a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

Mantenha o contraste alto: a navegação precisa ser clicável e óbvia, não decorativa.

Passo 6: Migre o CSS para o child theme

Quando o visual agradar, mova o bloco do Customizer para o style.css do seu child theme. Isso versiona o CSS no código, sobrevive a backups e não fica preso ao banco de dados. Quem nunca criou um, o guia de como alterar corretamente um tema do WordPress mostra o caminho seguro.

Customizer ou child theme: Onde salvar o CSS

A escolha entre os 2 destinos, Additional CSS e child theme, define se o estilo persiste numa migração ou se evapora. O Additional CSS do Customizer salva o CSS no banco de dados, na tabela de opções, então ele acompanha o site mesmo se você trocar de tema dentro do mesmo WordPress.

O child theme guarda o CSS num arquivo style.css versionável, ideal para agências que sobem o site por Git. A regra prática: use o Customizer para testar e para clientes que mexem sozinhos; use o child theme para entregas profissionais e sites que recebem deploy. O child theme é a única opção que sobrevive a uma exportação de arquivos sem o banco junto. Para entender a base, o conceito de child theme e o de widget WordPress ajudam a separar o que é tema do que é bloco.

Como deixar o calendário responsivo

Tornar o calendário responsivo evita que a tabela estoure a largura no celular, onde mais de 60% do tráfego brasileiro acontece. A tabela #wp-calendar tem 7 colunas fixas, uma por dia da semana, e em telas estreitas o texto encolhe demais se a fonte não for ajustada. Use uma media query mirando 480px para reduzir o padding e a fonte sem quebrar a grade:

@media (max-width: 480px) {
  #wp-calendar th,
  #wp-calendar td {
    padding: 3px;
    font-size: 12px;
  }
  .widget_calendar {
    padding: 10px;
  }
}

Esse ajuste mantém os 7 dias visíveis e legíveis, sem esconder nenhuma coluna. Em sidebar estreita abaixo de 280px, vale também testar o overflow-x: auto no contêiner .widget_calendar para impedir corte horizontal quando o número do dia tem 2 dígitos. Evite reduzir a fonte abaixo de 11px: o calendário vira ruído e ninguém clica numa data ilegível. Outra dica de campo: em temas que aplicam min-width na tabela, sobrescreva com #wp-calendar { min-width: 0; } dentro da media query, senão a regra de fonte não resolve o estouro. O conceito de widget área ajuda a prever onde a sidebar afunila no mobile e quanto espaço o calendário realmente tem.

Estilizar o calendário no Elementor e em temas de bloco

No Elementor e nos temas de bloco, o ponto de injeção do CSS muda, mas os 2 seletores .widget_calendar e #wp-calendar continuam idênticos. O Elementor oferece o campo CSS personalizado por widget e por página, além do CSS global no painel de estilo do tema, num total de 3 pontos de injeção.

Já um tema de blocos (FSE) usa o editor de estilos, mas aceita CSS adicional pelo mesmo Customizer ou pelo arquivo theme.json. Em todos os casos, o calendário renderizado pelo core mantém a tabela #wp-calendar, então as regras dos passos anteriores funcionam sem nenhuma alteração de seletor. Um detalhe que confunde: o widget de calendário nativo não é o mesmo que widgets de evento de plugins como o The Events Calendar, que trazem o próprio HTML e exigem outras classes. Para CSS dentro do Elementor, o tutorial de como adicionar CSS personalizado no Elementor lista os 5 métodos com seus prós. Quem trabalha com o builder pode aprofundar no guia para dominar o Elementor.

Estilizar outros widgets com a mesma lógica

A lógica de estilizar o calendário se repete em qualquer um dos widgets do WordPress: cada um sai com uma classe .widget_ própria e uma estrutura HTML previsível. O widget de busca usa .widget_search, o de categorias .widget_categories, o de posts recentes .widget_recent_entries, o de tags .widget_tag_cloud.

Você inspeciona o HTML com o Chrome DevTools, copia o seletor real e aplica a regra, exatamente como fez com .widget_calendar nos 6 passos anteriores. Esse padrão de mirar a classe específica do widget mantém o CSS organizado e fácil de manter num arquivo só. A vantagem prática é que uma folha de estilo única, com um bloco por classe .widget_, padroniza todos os widgets da sidebar de uma vez. Para um panorama de quais widgets existem e como ativá-los, o tutorial de adicionar e usar widgets no WordPress passo a passo serve de base, e há também uma lista dos melhores plugins de widget do WordPress quando o core não basta.

Acelere a estilizacao de widgets com a FULL

Quem gerencia muitos sites ganha tempo padronizando o CSS de widgets com as ferramentas da FULL. O plano PRO da FULL sai por R$849,90 e inclui os 17 plugins premium ativados em 1 clique; dividido pelos 10 sites que o plano cobre, dá R$85 por site, contra comprar Elementor PRO, Astra PRO e cache avulsos. A gente vê no suporte da FULL que a maior parte do retrabalho de estilo some quando o time usa um child theme único replicado entre sites. Conheça os planos da FULL para padronizar a estilização em escala.

Perguntas frequentes sobre estilizar o widget de calendário

Próximos passos para personalizar sua sidebar

Estilizar widget de calendário no WordPress se resolve mirando 3 seletores reais do core: .widget_calendar, #wp-calendar e #today, aplicados primeiro no Customizer e depois migrados ao child theme para persistir. Com os 6 passos deste tutorial você ajusta cor, borda, o dia atual e a responsividade em cerca de 10 minutos, e a mesma lógica de mirar a classe .widget_ específica vale para qualquer outro widget da sidebar. O segredo é vencer a especificidade com o id em vez de espalhar !important. Para continuar aprendendo WordPress, o FULL Academy reúne tutoriais, guias e reviews num só lugar.