Como adicionar uma classe body personalizada em páginas específicas com Astra Pro

Quer aplicar estilos CSS exclusivos em páginas específicas do seu site WordPress?
A forma mais limpa é adicionar uma classe personalizada à tag <body> — assim você pode estilizar essas páginas com precisão usando CSS.
Seguindo os passos abaixo, você conseguirá adicionar uma classe body personalizada a qualquer página (ou grupo de páginas) usando o recurso Custom Layouts do Astra Pro — sem precisar programar.

Visão Geral

O WordPress já adiciona algumas classes ao body automaticamente (como page-id-42), mas às vezes você precisa de
uma classe limpa e significativa como special-page que você mesmo controla.
O recurso Custom Layouts do Astra Pro permite injetar um pequeno trecho de JavaScript em páginas específicas,
que adiciona sua classe personalizada ao body no carregamento da página.

Fluxo de trabalho:

[Astra Pro → Custom Layouts] → [Trecho JavaScript] → [Injetado via hook wp_head] → [Classe body adicionada no DOMContentLoaded]

Passo 1. Abrir o Custom Layouts no Astra Pro

1. Faça login no painel de administração do WordPress.
2. Vá em Aparência → Astra Options.
3. Encontre o módulo Custom Layouts e clique em Settings.
4. Clique em Add New.

Se você não vir o Custom Layouts, pode ser necessário ativá-lo primeiro.
Vá em Aparência → Astra Options → Astra Addons e ative o interruptor de Custom Layouts.

Passo 2. Configurar o Custom Layout

Você verá uma nova tela de editor. Preencha o seguinte:

1. Adicione um Título para sua referência (ex. Body Class - Páginas Especiais).
2. No editor, clique na aba Code e cole o seguinte trecho:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Substitua special-page pelo nome de classe que você deseja usar.

Passo 3. Configurar o Hook

Role para baixo para encontrar o painel Layout Settings e configure:

Layout → Hook
Action → wp_head
Priority → 10

Importante: Embora o script seja injetado dentro do <head>,
ele não será executado até que o DOM esteja completamente analisado — porque o envolvemos em
document.addEventListener('DOMContentLoaded', ...).
Isso garante que document.body exista quando a classe for adicionada,
e dispara antes do wp_footer, evitando qualquer flash de conteúdo sem estilo.

Passo 4. Configurar as Condições de Exibição

Ainda no painel Layout Settings, encontre Display On e selecione as páginas
onde você quer que a classe body apareça.

Você pode escolher entre condições como:

Specific Page — aponta para uma ou mais páginas individuais pelo nome
All Pages — aplica a todas as páginas do site
Front Page — apenas a página inicial
Page Template — todas as páginas que usam um template específico

Você pode adicionar várias páginas de uma vez em um único Custom Layout,
o que é muito mais eficiente do que criar um layout por página.

Passo 5. Publicar

Após configurar o hook e as condições de exibição, clique em Publish no canto superior direito.

Passo 6. Verificar se está funcionando

Acesse uma das páginas que você selecionou no Display On.
Clique com o botão direito em qualquer lugar da página e selecione Inspecionar (ou pressione F12).
Na aba Elements, encontre a tag <body>.
Confirme que sua classe personalizada aparece na lista de classes:

<body class="home page-template-default ... special-page">

Atenção: Não use Ver código-fonte da página para verificar —
isso mostra o HTML antes do JavaScript ser executado, então a classe não aparecerá lá.
Sempre use o Inspecionar Elemento para ver o DOM ao vivo após a execução do JavaScript.

Use no seu CSS

Agora você pode estilizar essas páginas especificamente no seu CSS:

/* Aplica apenas em páginas com a classe body special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Adicione em Aparência → Personalizar → CSS Adicional ou na folha de estilos do seu tema filho.

Solução de Problemas

A classe não aparece? Certifique-se de verificar com Inspecionar Elemento, não com Ver código-fonte.
Ainda não funciona? Limpe o cache do navegador e qualquer plugin de cache do site, depois recarregue.
Usa Cloudflare? Limpe também o cache do Cloudflare para essa página.
A classe aparece em páginas erradas? Verifique novamente as condições Display On no Custom Layout.

Conclusão

Agora você tem uma forma simples e confiável de adicionar uma classe body personalizada a páginas específicas do WordPress
usando o Astra Pro — sem tocar no functions.php nem criar templates de página personalizados.

Resumo do processo:
Custom Layouts → Trecho JavaScript → Hook wp_head → Condições de exibição → Classe body personalizada ✅

Essa abordagem é especialmente útil quando você precisa aplicar estilos exclusivos a um grupo de páginas
sem afetar o restante do site. Limpo, preciso e fácil de gerenciar.