Como criar child theme no WordPress: guia completo com dicas de personalização

Uma das maiores vantagens de usar o WordPress é o fato de ele ter uma infinidade de temas que você pode escolher. Entretanto, se você pretende personalizar o design ou a funcionalidade do seu tema, é importante usar um child theme (tema filho).

E é para isso que estamos aqui: neste artigo, explicaremos como funciona um child theme do WordPress e quando você deve usá-lo. Você também aprenderá diferentes maneiras de criar e personalizar um child theme, além de solucionar erros comuns. Vamos lá?

Como funciona um child theme no WordPress?

Um child theme cria um diretório separado que abriga seus próprios arquivos style.css e functions.php. Esses são os principais componentes usados para personalizar o design e a funcionalidade de seu site.

Quando alguém visita seu site, o WordPress carrega primeiro o child theme — todas as personalizações ou substituições no child theme têm prioridade. Para qualquer coisa não modificada, o WordPress usa os arquivos do tema pai.

Por exemplo, você pode usar um child theme para ajustar o esquema de cores, criar um template de página exclusivo ou adicionar alguma funcionalidade personalizada sem mexer no tema pai.

A maior utilidade disso é que, caso você faça essas alterações diretamente no tema pai, elas serão perdidas sempre que o tema tiver uma atualização. Com um child theme, você garante que suas alterações ficarão seguras durante as atualizações do tema — se algo der errado, você pode desativar o child theme e usar o tema pai para manter o site funcionando sem problemas.

Quando você precisa de um child theme?

Usar um child theme nem sempre é necessário, mas é altamente recomendado se você quiser:

• Personalizar com segurança o design ou a funcionalidade do seu tema sem afetar o tema principal.
• Criar um novo tema rapidamente usando o tema principal como base.
• Simplificar algumas modificações menores (como ajustar o CSS ou adicionar modelos personalizados) sem precisar lidar com arquivos principais complexos.
• Proteger suas personalizações para que elas não sejam perdidas durante as atualizações do tema principal.
• Manter a consistência da sua marca herdando o design do tema principal e fazendo ajustes específicos.
• Testar novos recursos sem colocar seu site em risco.

Como criar um child theme no WordPress

Criar um child theme do WordPress é bastante simples. Nos parágrafos abaixos, vamos detalhar o passo a passo de como fazê-lo manualmente, o que lhe dará controle total sobre a configuração e manterá seu site leve. 

Outra alternativa é usar um plugin — neste caso, pule para a próxima seção.

Pré-requisitos

Antes de começar, verifique se você tem o seguinte:

• Um tema pai. Verifique se o tema pai que você deseja personalizar está instalado e ativo em seu site do WordPress. Usaremos o tema padrão Twenty Twenty-Three para este tutorial. Consulte nosso guia se precisar de ajuda para instalar um tema do WordPress.
• Acesso aos seus arquivos do WordPress. Você pode usar o gerenciador de arquivos do seu plano de hospedagem ou um cliente FTP, como o FileZilla. O Gerenciador de Arquivos da Hostinger pode ser acessado por meio do hPanel.
• Backup do site. Crie um backup do seu site WordPress antes de fazer qualquer alteração para evitar a perda acidental de dados.
• Um site de teste. A configuração de um ambiente de teste do WordPress permite que você faça experimentos livremente sem correr o risco de prejudicar o site ao vivo. Clientes do plano WordPress Business da Hostinger (ou superiores) podem usar a ferramenta de teste do hPanel.

1. Crie a pasta do child theme

Primeiro, vamos preparar a pasta do child theme para armazenar todos os arquivos. Para este tutorial, usaremos o Gerenciador de Arquivos da Hostinger, que você pode acessar no hPanel.

No diretório raiz do WordPress (public_html), vá para wp-content→ themes. Em seguida, crie uma nova pasta com um nome parecido com o do seu tema ativo atual. Essa será a pasta do seu child theme.

2. Crie o arquivo de folha de estilo

O arquivo de folha de estilo, normalmente conhecido como style.css, controla o design e o layout do seu tema do WordPress. É nele que você define a relação com o tema pai e substitui seus estilos.

Crie um novo arquivo style.css na pasta do child theme e adicione o seguinte trecho de código a ele.

/*
Theme Name: Twenty Twenty-Three Child
Theme URI: http://example.com/twenty-twenty-three-child/
Description: Twenty Twenty-Three Child Theme
Author: Seu Nome
Author URI: http://exemplo.com
Template: twentytwentythree
Version: 1.0.0
*/
/* Adicione seus estilos personalizados aqui */

Substitua o nome, o URI, a descrição e o modelo do tema pelos dados reais do tema pai e salve as alterações.

3. Crie o arquivo functions.php e adicione a folha de estilos à fila

O arquivo functions.php é a espinha dorsal dos recursos do seu tema. Ele permite que você adicione funcionalidades personalizadas ou modifique os recursos existentes no tema principal. Esse arquivo também é responsável por criar a fila dos estilos e scripts do tema principal, garantindo que eles sejam carregados e funcionem corretamente.

Crie um novo arquivo functions.php na pasta do child theme e adicione o seguinte trecho de código para importar estilos do tema pai.

<?php
// Seu código para colocar estilos do tema pai na fila
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
?>

Não se esqueça de salvar as alterações no arquivo.

4. Ative o child theme

Se você criar os arquivos style.css e functions.php corretamente, o child theme deverá aparecer em seu site do WordPress.

Acesse Aparência →  Temas no painel de administração e clique em Ativar no child theme.

Pronto, seu site WordPress agora está sendo executado com um child theme.

Outras maneiras de criar um child theme

Se você não quiser editar os arquivos do seu site manualmente, um plugin do WordPress pode simplificar o processo. Mas preste atenção: você tem duas maneiras de fazer isso, que dependerão do tipo do seu tema — portanto, certifique-se de escolher a maneira correta.

Para verificar se você está usando um tema clássico ou em blocos, acesse a pasta do seu tema por meio do gerenciador de arquivos ou de um cliente FTP e procure um arquivo chamado theme.json. Por exemplo, o tema Twenty Twenty-Three tem esse arquivo, o que indica que ele é um tema baseado em blocos.

Criando um child theme clássico um plugin

Se você estiver usando um tema clássico, siga estas etapas para criar seu child theme usando o WP Child Theme Generator:

1. Instale e ative o plugin WP Child Theme Generator. Consulte nosso guia sobre a instalação de plugins do WordPress se precisar de ajuda.

2. Navegue até Appearance →  Child Theme Gen no painel de administração.
3. Selecione o tema pai no campo suspenso e, em seguida, ajuste os detalhes do child theme conforme necessário. Certifique-se de marcar a opção Create and Activate para automatizar a troca.

4. Depois de clicar em Create Child Theme, o plugin te redirecionará para a página Temas, mostrando o child theme ativo.

Lembre-se de que, embora esse plugin teoricamente funcione com temas baseados em blocos, ele não foi projetado para funcionar com eles. Se o seu tema principal for baseado em blocos, recomendamos o método seguinte.

Criando um child theme de blocos usando um plugin

Para esse método, usaremos um outro plugin gratuito, chamado Create Block Theme. Esse plugin é compatível com a configuração theme.json, o que o torna ideal para criar temas filhos a partir de temas baseados em blocos. Veja como:

1. Instale e ative o plugin Create Block Theme.

2. Acesse Appearance →  Create Block Theme em seu painel do WordPress.
3. O plugin fornece várias opções para trabalhar com seu tema ativo. Por enquanto, escolha Create a child of “[nome do seu tema]”.

4. Digite o nome, a descrição e o autor do child theme. Clique em Create Child Theme quando terminar.

5. Se o processo for bem-sucedido, o plugin mostrará uma mensagem de confirmação e te levará ao Editor do Site. Você pode verificar novamente acessando Aparência → Temas para ver se agora está usando um child theme.

Como personalizar seu child theme no WordPress

Agora que você tem um child theme, é hora de personalizá-lo. Esses métodos de personalização exigem alguma programação, portanto, pode ser útil ter algum conhecimento em CSS.

Se você preferir não mexer em código, confira nossas escolhas dos melhores plugins de criação de páginas do WordPress para simplificar o processo. Você também pode usar o editor de blocos do WordPress, o Gutenberg, para criar blocos personalizados e modelos reutilizáveis sem codificação.

Personalizando o CSS

Se estiver planejando grandes alterações nos estilos do seu child theme, a melhor opção é editar diretamente o arquivo style.css. Ele mantém todo o CSS do tema em um único lugar, facilitando o gerenciamento e a exportação, se necessário. Além disso, você pode usar ferramentas externas, como editores de código, para obter recursos como realce de sintaxe e controle de versão.

Por outro lado, o Editor de Temas do WordPressFile é mais conveniente para alterações rápidas. Ele permite editar arquivos de tema diretamente do painel, o que é ideal para usuários sem acesso ao FTP ou ao Gerenciador de Arquivos.

Vá para Ferramentas ou Aparência e localize o Editor de arquivos de tema. Abra a folha de estilo na barra lateral direita e clique em Atualizar arquivo após personalizá-la. 

Se preferir ver uma visualização ao vivo de suas alterações antes de aplicá-las, use o Personalizador de Tema para temas clássicos ou o Editor de Site para acessar a edição completa do site com base em blocos. Ambos podem ser acessados na barra lateral do WordPress, em Aparência – procure por Personalizar ou Editor.

Outra maneira de adicionar CSS personalizado ao seu child theme é usar um plugin de gerenciador de código, como o WPCode. Esse método é excelente para reaplicar códigos sem precisar copiá-los e colá-los manualmente.

Falamos sobre cada um desses métodos em detalhes no nosso tutorial sobre CSS personalizado no WordPress – dê uma olhada para saber mais.

Em termos de estilo, existem muitas regras CSS que você pode usar para modificar a aparência do seu child theme. Basta misturar e editar conforme necessário para criar o design desejado.

Por exemplo, este trecho de código modifica a cor do plano de fundo do site:

body {
background-color: #f3f3f3; /* Troque #f3f3f3 pela cor desejada */
}

Para personalizar a cor da barra lateral, use o seguinte código CSS:

.sidebar {
background-color: #dddddd; /* Troque #dddddd pela cor desejada */
}

Veja como você pode atualizar as fontes de todo o seu site:

body {
   font-family: 'Arial', sans-serif; /* Troque por sua fonte desejada */
   font-size: 16px; /* Escolha o tamanho desejado */
   color: #333333; /* Escolha a cor */
}

Confira nossa folha de dicas de CSS para obter propriedades e valores comuns de CSS.

Adicionando trechos de código personalizados ao functions.php

Esse método só funciona para temas clássicos ou temas híbridos, que misturam elementos clássicos e de blocos.

Para personalizar as funções do seu site, basta adicionar ou ajustar as funções PHP existentes no arquivo functions.php do seu child theme. Assim como na edição do style.css, você pode fazer isso por meio do gerenciador de arquivos (ou de um cliente FTP), do editor de arquivos do tema ou até mesmo por um plugin de gerenciador de código.

O tipo de personalização que você pode fazer com as funções PHP varia de acordo com o tema. 

Por exemplo, o trecho de código abaixo combina as funções add_action() e enqueue_custom_styles() para colocar uma folha de estilo personalizada na fila:

function enqueue_custom_styles() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Com o código custom_dashboard_greeting(), você pode incluir uma mensagem de saudação personalizada no painel de administração do WordPress:

função custom_dashboard_greeting() {

function custom_dashboard_greeting() {
   echo "Boas vindas ao seu site! Tenha um ótimo dia.";
}
add_action('admin_notices', 'custom_dashboard_greeting');

Como existe uma infinidade de funções para experimentar, você pode mergulhar de cabeça na criatividade. Para te ajudar ao longo do caminho, aqui estão algumas dicas para melhorar seus resultados e tornar as personalizações do PHP mais fáceis:

• Documente seu código com comentários. Use /* */ para comentários de várias linhas ou // para comentários de uma única linha, para explicar o que seu código personalizado faz.
• Agrupe e rotule suas personalizações. Organize suas funções em seções usando comentários para facilitar futuras personalizações e depuração.
• Evite hardcoding. Em vez de incorporar funcionalidades, configurações ou conteúdo diretamente nos arquivos de tema ou modelos, use add_action() ou add_filter() para aplicar funcionalidades personalizadas com ganchos do WordPress.

Modificando ou adicionando arquivos de modelo

Esse método é ideal quando você precisa personalizar o layout, a estrutura ou o conteúdo de partes específicas do seu site e evitar que as atualizações do tema substituam suas alterações.

Primeiro, acesse a pasta do seu tema principal usando o Gerenciador de arquivos ou um cliente FTP e abra a pasta templates. Localize o arquivo responsável pela funcionalidade ou pelo design que você deseja alterar e copie-o para o child theme.

O WordPress usa uma hierarquia de templates específica para localizar e carregar arquivos com base em sua localização e nomenclatura. Portanto, sempre mantenha a estrutura de diretórios para garantir que suas alterações funcionem.

Por exemplo, se o arquivo page.html estiver localizado na pasta templates do tema pai, você precisará criar uma pasta templates em seu child theme e copiar o arquivo para ela.

Depois de ter o arquivo base pronto no diretório do child theme, faça as modificações desejadas.

Se quiser criar um novo arquivo de template de página, copie o arquivo page.html da pasta templates do tema pai para a pasta templates do child theme e renomeie-o. Em seguida, adicione o nome do modelo na parte superior do arquivo:

<!-- 
Template Name: Custom Page Template 
-->

Para temas clássicos, o modelo será escrito em formato PHP. Siga as mesmas etapas para criar um novo arquivo .php e adicione o seguinte trecho de código na parte superior do arquivo para definir o nome do modelo:

<?php
/* Template Name: Custom Page Template */

Agora você pode selecionar o novo modelo no editor do WordPress em Atributos da página >  Template.

Alterando estilos globais usando um arquivo theme.json

Se os temas clássicos usam o functions.php para adicionar funcionalidades e gerenciar recursos, os temas em bloco dependem de um arquivo theme.json para definir estilos e configurações globais (como fontes, paletas de cores e espaçamento). 

Na pasta do child theme, crie um novo arquivo theme.json, caso ele não exista. Em seguida, adicione apenas as alterações que você deseja fazer. O WordPress o mesclará automaticamente com o theme.json do tema pai, e tudo o que estiver em seu child theme substituirá ou adicionará às configurações do tema pai.

Por exemplo, adicione este trecho de código para definir uma paleta de cores personalizada para todo o seu site:

{
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#3498db" },
        { "name": "Accent", "slug": "accent", "color": "#e74c3c" },
        { "name": "Background", "slug": "background", "color": "#f4f4f4" }
      ]
    }
  }
}

O código para definir a tipografia personalizada, especificamente os tamanhos das fontes, é semelhante:

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "name": "Small", "slug": "small", "size": "12px" },
        { "name": "Medium", "slug": "medium", "size": "18px" },
        { "name": "Large", "slug": "large", "size": "24px" }
      ]
    }
  }
}

E aqui está como definir a largura máxima para blocos de conteúdo, como parágrafos e imagens:

{
  "settings": {
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  }
}

Como solucionar erros do child theme WordPress

Embora os child themes ofereçam muitas vantagens, aqui estão alguns problemas comuns que devem ser levados em conta e como corrigi-los.

O child theme não aparece na seção Temas

Quando a pasta do child theme e os arquivos de suporte estiverem configurados, ele deverá aparecer em Aparência →  Temas. Se isso não acontecer, é provável que haja um problema com a configuração na folha de estilo. Esse problema é mais comum para usuários que criam manualmente o child theme.

Para corrigi-lo, abra o style.css por meio do gerenciador de arquivos/FTP e verifique se o parâmetro Template corresponde ao nome da pasta do tema principal. Você pode verificar o nome da pasta navegando até wp-content →  themes em seu diretório raiz.

O child theme não está substituindo o tema pai

Se suas alterações no child theme não estiverem sendo exibidas, isso geralmente ocorre porque o child theme não está na fila da folha de estilo do tema pai.

Você pode solucionar esse problema verificando se há erros de digitação em seu arquivo functions.php. Em seguida, verifique se o parâmetro Template em style.css aponta para a pasta correta do tema pai.

O cache também pode ser um dos culpados. Comece tentando limpar o cache do navegador; se isso não funcionar, limpe o cache do site usando plugins como o LiteSpeed Cache ou o WP Rocket.

Outra possibilidade é que os estilos do tema pai estejam substituindo os do child theme. Para corrigir isso, localize o CSS conflitante em seu child theme e adicione a propriedade !important para forçar seus estilos a terem prioridade. Por exemplo:

h1 {
  color: red !important;
}

A propriedade !important garante que seu estilo substitua quaisquer estilos conflitantes, mesmo que eles tenham maior especificidade. Dito isso, use-a com moderação, pois ela pode dificultar a depuração e o gerenciamento do CSS.

Os arquivos de template não estão substituindo os arquivos pai

Esse problema ocorre quando o WordPress não reconhece ou não usa os arquivos de modelo em seu child theme para substituir os do tema pai.

Primeiro, verifique a convenção de nomenclatura de arquivos. O arquivo de modelo no child theme deve ter exatamente o mesmo nome do arquivo que você está tentando substituir no tema pai.

Em seguida, verifique a localização do arquivo. Certifique-se de colocar o arquivo do template na raiz da pasta do child theme (/wp-content/themes/seu-child-theme/), e não em um subdiretório.

Se isso não funcionar, tente limpar o navegador e o cache do site.

Conclusão

Usar um child theme é uma ótima maneira de transformar um tema padrão do WordPress em uma solução personalizada que atenda às suas necessidades. Você pode experimentar diferentes recursos e designs e, ao mesmo tempo, garantir que eles permanecerão compatíveis com as atualizações do tema principal.

Neste artigo, você aprendeu a criar e personalizar um child theme no WordPress, bem como a solucionar problemas comuns. Esperamos que você consiga tirar o máximo proveito desse poderoso recurso. Boa sorte!

Se você tiver mais perguntas, sinta-se à vontade para deixar um comentário logo abaixo.

Perguntas frequentes sobre  child theme WordPress

Por fim, vamos responder algumas perguntas frequentes sobre child themes no WordPress.