Você passa horas personalizando o CSS do seu tema WordPress. Muda cores, ajusta espaçamentos, modifica o header. Tudo fica perfeito. Aí o tema recebe uma atualização, você clica em "Atualizar" e todas as suas alterações desaparecem.
Isso acontece porque modificações feitas diretamente nos arquivos do tema pai são sobrescritas em cada atualização. A solução para esse problema tem nome: child theme (tema filho).
Neste guia, vamos mostrar passo a passo como criar um child theme no WordPress, desde a estrutura de arquivos até personalizações avançadas com templates e funções.
O Que é um Child Theme e Por Que Ele é Importante
Um child theme é um tema que herda todas as funcionalidades e estilos de outro tema (chamado de tema pai). Ele permite que você faça modificações sem alterar os arquivos originais do tema pai.
Como Funciona na Prática
O WordPress carrega primeiro o tema pai e depois aplica as modificações do child theme por cima. Se o child theme tem um arquivo header.php , ele substitui o header.php do tema pai. Se não tem, usa o do tema pai.
Essa hierarquia de carregamento garante que:
- Atualizações do tema pai não apagam suas mudanças , porque suas alterações estão em arquivos separados
- Você herda todas as funcionalidades do tema pai sem precisar duplicar código
- É fácil desfazer mudanças , basta deletar o arquivo modificado no child theme
Quando Você Precisa de um Child Theme
- Quer alterar estilos CSS além do que o customizador permite
- Precisa modificar templates (header, footer, single, page)
- Quer adicionar funções PHP personalizadas
- Precisa sobrescrever comportamentos do tema pai
- Está usando um tema de terceiros que recebe atualizações frequentes
Quando Você Não Precisa
- Suas modificações se limitam a pequenas mudanças de CSS (use o customizador ou um plugin de CSS personalizado)
- Você está desenvolvendo um tema do zero (nesse caso, desenvolva diretamente o tema)
- O tema pai nunca é atualizado (raro, e isso em si é um problema)
Passo 1: Criar a Pasta do Child Theme
O child theme precisa de sua própria pasta dentro de wp-content/themes/ . O nome da pasta geralmente segue o padrão nome-do-tema-pai-child .
Por exemplo, se o tema pai é o Astra, a pasta seria:
wp-content/themes/astra-child/
Acesse o servidor via FTP, gerenciador de arquivos ou SSH e crie essa pasta.
Passo 2: Criar o Arquivo style.css
O arquivo style.css é obrigatório. Ele contém o cabeçalho que identifica o child theme e define qual é o tema pai.
Crie o arquivo wp-content/themes/astra-child/style.css com o seguinte conteúdo:
/* Theme Name: Astra Child Theme URI: https://seusite.com.br Description: Tema filho do Astra com personalizações Author: Seu Nome Author URI: https://seusite.com.br Template: astra Version: 1.0.0 Text Domain: astra-child */ /* Suas personalizações de CSS vão aqui */
O campo mais importante é o Template . Ele precisa corresponder exatamente ao nome da pasta do tema pai. Se o tema pai está em wp-content/themes/astra/ , o valor de Template deve ser astra (minúsculas, exatamente como o nome da pasta).
Erros Comuns no style.css
- Template errado : se o nome não corresponde exatamente à pasta do tema pai, o child theme não funciona
- Falta do campo Template : sem ele, o WordPress não sabe qual é o tema pai
- Espaços ou caracteres invisíveis : copiar e colar de editores como Word pode inserir caracteres que quebram o cabeçalho
Passo 3: Criar o Arquivo functions.php
O arquivo functions.php do child theme é onde você carrega os estilos do tema pai e adiciona suas funções personalizadas.
Crie o arquivo wp-content/themes/astra-child/functions.php :
<?php
/**
* Astra Child Theme functions
*/
// Enfileira os estilos do tema pai e do child theme
function astra_child_enqueue_styles() {
// Estilo do tema pai
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Estilo do child theme
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style'),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');
Diferença Entre get template directory uri() e get stylesheet directory uri()
Essa distinção é fundamental quando se trabalha com child themes:
- get template directory _ uri() : retorna o caminho do tema pai
- get stylesheet directory _ uri() : retorna o caminho do tema ativo (o child theme)
Use get_template_directory_uri() para referenciar arquivos do tema pai e get_stylesheet_directory_uri() para referenciar arquivos do child theme.
Passo 4: Ativar o Child Theme
Com os dois arquivos criados ( style.css e functions.php ), vá ao painel do WordPress:
- Acesse Aparência > Temas
- O child theme deve aparecer na lista de temas disponíveis
- Clique em Ativar
Se o child theme não aparecer, verifique:
- A pasta está dentro de wp-content/themes/
- O arquivo style.css tem o cabeçalho correto
- O campo Template corresponde ao nome da pasta do tema pai
Passo 5: Sobrescrever Arquivos de Template
Uma das funcionalidades mais poderosas do child theme é a capacidade de sobrescrever templates do tema pai.
Como Funciona
Para modificar um template, copie o arquivo do tema pai para o child theme mantendo a mesma estrutura de diretórios, e edite a cópia.
Por exemplo, para modificar o header:
- Copie wp-content/themes/astra/header.php
- Cole em wp-content/themes/astra-child/header.php
- Edite o arquivo no child theme
O WordPress vai usar automaticamente a versão do child theme.
Templates Mais Comuns para Sobrescrever
- header.php : cabeçalho do site (logo, menu, barra superior)
- footer.php : rodapé (copyright, links, widgets)
- single.php : layout de posts individuais
- page.php : layout de páginas
- archive.php : listagem de posts (categorias, tags, datas)
- sidebar.php : barra lateral
- search.php : página de resultados de busca
- 404.php : página de erro 404
- functions.php : funções do tema (não é sobrescrito, é complementar)
Importante: functions.php é Diferente
Ao contrário dos outros templates, o functions.php do child theme não substitui o do tema pai. Os dois são carregados: primeiro o do child theme, depois o do tema pai. Isso significa que funções adicionadas no functions.php do child theme complementam as do tema pai.
Personalizações Comuns com Child Theme
Adicionar CSS Personalizado
A forma mais simples de personalização. Adicione seus estilos no style.css do child theme, depois do cabeçalho:
/* Mudar cor do header */
.site-header {
background-color: #1a1a2e;
}
/* Mudar fonte dos títulos */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
/* Esconder a sidebar em mobile */
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
Adicionar JavaScript Personalizado
Crie um arquivo js/custom.js no child theme e enfileire-o no functions.php :
function astra_child_enqueue_scripts() {
wp_enqueue_script(
'child-custom-js',
get_stylesheet_directory_uri() . '/js/custom.js',
array('jquery'),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_scripts');
Criar Templates de Página Personalizados
Você pode criar templates de página exclusivos no child theme. Crie um arquivo com o cabeçalho de template:
<?php
/**
* Template Name: Landing Page Sem Header
*/
get_header('minimal'); ?>
<main class="landing-page">
<?php
while (have_posts()) :
the_post();
the_content();
endwhile;
?>
</main>
<?php get_footer('minimal'); ?>
Sobrescrever Funções do Tema Pai
Muitos temas bem construídos usam funções "pluggable" (verificam se a função já existe antes de definir). Isso permite que o child theme sobrescreva essas funções:
// No functions.php do child theme
// Sobrescreve a função de copyright do rodapé
if (!function_exists('astra_footer_copyright')) {
function astra_footer_copyright() {
echo '<p>© ' . date('Y') . ' Minha Empresa. Todos os direitos reservados.</p>';
}
}
Se o tema pai usa if (!function_exists(...)) antes de definir a função, o child theme tem prioridade porque é carregado primeiro.
Child Theme vs Plugin de CSS Personalizado
Uma dúvida comum é: preciso de um child theme só para adicionar CSS, ou posso usar um plugin como "Simple Custom CSS"?
Use Plugin de CSS Quando:
- As mudanças são poucas linhas de CSS
- Você não precisa modificar templates PHP
- Não precisa adicionar JavaScript
- Quer algo rápido sem mexer em arquivos
Use Child Theme Quando:
- Precisa modificar templates (header, footer, page, single)
- Quer adicionar funções PHP
- As personalizações são extensas
- Quer manter tudo organizado em um único local
- Precisa de templates de página personalizados
Na prática, para sites com personalizações significativas, o child theme é sempre a melhor opção.
Child Themes para Temas Populares
Astra Child
O Astra é um dos temas mais usados no WordPress e é excelente como tema pai. Ele oferece hooks e filtros bem documentados, além de suporte oficial a child themes.
Template: astra
GeneratePress Child
O GeneratePress é outro tema leve e rápido, ideal para ser usado com child theme. Sua arquitetura modular facilita sobrescrever componentes específicos.
Template: flavor flavor flavor flavor flavor
flavor flavor flavor flavor flavor Child (flavor flavor flavor flavor flavor)
Temas flavor flavor flavor flavor como flavor flavor flavor flavor e flavor flavor flavor flavor flavor podem usar child themes, mas a abordagem é um pouco diferente. Muitas personalizações são feitas via hooks e templates do próprio flavor flavor flavor flavor.
Estrutura de Pastas de um Child Theme Completo
Para um child theme com personalizações extensas, a estrutura de pastas pode ficar assim:
astra-child/
├── style.css (obrigatório)
├── functions.php (obrigatório)
├── header.php (sobrescreve o header do tema pai)
├── footer.php (sobrescreve o footer do tema pai)
├── single.php (sobrescreve o layout de posts)
├── page.php (sobrescreve o layout de páginas)
├── page-landing.php (template personalizado)
├── screenshot.png (thumbnail do tema)
├── css/
│ └── custom.css (estilos adicionais)
├── js/
│ └── custom.js (scripts personalizados)
├── images/
│ └── logo.png (imagens do child theme)
└── template-parts/
├── content.php (partes de template)
└── content-single.php
Resolução de Problemas Comuns
Estilos Não Carregam
Causa mais comum : o wp_enqueue_style não está configurado corretamente no functions.php .
Verifique:
- O functions.php do child theme começa com <?php
- O hook wp_enqueue_scripts está correto (não confunda com admin_enqueue_scripts )
- O caminho do stylesheet está correto
- O tema pai está sendo enfileirado como dependência
Conflito de Funções
Se uma função do child theme causa erro "Cannot redeclare function", significa que o tema pai não verifica function_exists() antes de definir a função.
Soluções:
- Use remove_action() para remover a função do tema pai e adicione sua versão
- Use uma prioridade diferente no add_action()
// Remove a função do tema pai
remove_action('wp_footer', 'tema_pai_footer_credits');
// Adiciona sua versão
function minha_footer_credits() {
echo '<p>Meus créditos personalizados</p>';
}
add_action('wp_footer', 'minha_footer_credits');
Child Theme Não Aparece no Painel
Verifique:
- A pasta está em wp-content/themes/ (não em subpasta)
- O style.css tem o cabeçalho completo com o campo Template
- O campo Template corresponde exatamente ao nome da pasta do tema pai
- Não há erros de sintaxe no style.css ou functions.php
Tema Pai Não Encontrado
Se ao ativar o child theme aparece erro de "tema pai não encontrado":
- Confirme que o tema pai está instalado (ele precisa estar em wp-content/themes/ )
- Verifique se o nome no campo Template corresponde exatamente ao nome da pasta
- O tema pai não precisa estar ativo, apenas instalado
Boas Práticas para Child Themes
- Mantenha o child theme no controle de versão (Git). Isso permite rastrear mudanças e reverter quando necessário.
- Documente suas alterações com comentários no código. Meses depois, você vai querer saber por que fez determinada mudança.
- Teste em staging antes de produção . Modificações em templates podem quebrar o layout.
- Copie apenas o que precisa modificar . Não copie todos os templates do tema pai para o child theme. Isso cria trabalho extra nas atualizações.
- Use hooks e filtros sempre que possível, em vez de copiar templates inteiros. Modificar uma pequena parte via hook é mais sustentável do que sobrescrever um template de 200 linhas.
- Prefixe suas funções com um nome único para evitar conflitos:
function meusite_custom_header() {
// seu código
}
- Atualize o tema pai regularmente . O child theme protege suas alterações, mas você precisa manter o tema pai atualizado por segurança.
Conclusão
Criar um child theme no WordPress é uma habilidade essencial para quem precisa personalizar sites além do que o customizador oferece. Com apenas dois arquivos (style.css e functions.php), você ganha liberdade para modificar qualquer aspecto do tema sem medo de perder tudo na próxima atualização.
Para quem não tem experiência técnica ou não quer lidar com código, a HOSTWP faz essa configuração como parte da gestão do site. Criamos child themes, implementamos personalizações e garantimos que tudo continue funcionando nas atualizações.
Fale com a HOSTWP no WhatsApp e tenha um time técnico cuidando do seu WordPress.