Como Criar um Tema Filho (Child Theme) no WordPress

A plataforma WordPress é um ímã para aqueles que querem resolver o problema com suas próprias mãos, que desejam ter controle total sobre seus sites e querem ser independentes na administração deles.

Portanto, é natural que você queira adaptar a aparência do seu site à sua visão. Duvido que haja muitos usuários do WordPress por aí que não pensem constantemente no que implementar a seguir.

Você administra seu site WordPress há algum tempo e está fazendo tudo o que precisa. Mas agora, você decide que precisa personalizá-lo.

Ou talvez você esteja criando seu site com um tema que você baixou do repositório de temas ou que comprou, e percebe que ele não aparenta exatamente da maneira que você precisa.

Ao tentar fazer alterações em um site, um número impressionante de pessoas opta por editar seu tema diretamente. Isso significa que eles estão alterando ou adicionando arquivos na pasta do tema atual. Isso cria uma série de problemas.

A maior desvantagem é que quaisquer modificações feitas no tema dessa maneira serão perdidas assim que o tema for atualizado pelo desenvolvedor.

Como consequência, os usuários não poderão manter seu tema atualizado (o que é ruim para a segurança) ou descobrirão que todas as suas alterações se foram quando o fizerem.

De qualquer maneira, a situação está longe de ser ideal.

Uma ideia muito melhor é usar um tema filho (Child Theme).

Isso permite que você faça várias alterações em um site sem tocar em nenhum dos arquivos originais do seu tema ativo.

O Que é um Tema Filho

Os temas filhos são temas separados que dependem de um tema pai para a maioria de suas funcionalidades. Se você estiver usando um tema filho, o WordPress verificará seu tema filho primeiro para ver se existe uma funcionalidade específica. Caso contrário, ele usará o tema principal. Isso é ótimo porque permite modificar apenas o que você precisa.

A grande diferença é que um tema filho depende completamente de seu pai para funcionar. Sem o tema principal presente, ele não fará nada e nem poderá ser ativado.

Isso ocorre porque um tema filho não é uma entidade autônoma, mas modifica ou adiciona aos arquivos de um tema existente.

Ele usa tudo o que está presente no tema pai e altera apenas as partes que você deseja que sejam diferentes.

Isso permite alterar estilos, funções, layout, modelos e muito mais.

Vantagens de um Tema Filho

Existem inúmeras vantagens em criar um tema filho:

• Em vez de ter que criar um tema completo do zero, você pode desenvolver algo que já existe, acelerando o tempo de desenvolvimento.
• Você pode tirar proveito da funcionalidade de estruturas sofisticadas do temas principal, enquanto personaliza o design de acordo com suas necessidades.
• Você pode atualizar o tema pai sem perder suas modificações.
• Se você não estiver satisfeito com suas modificações, desative o tema filho e tudo ficará como antes.
• É uma ótima maneira de começar a aprender sobre como os temas funcionam.
• Um tema filho pode conter pastas de imagens, JavaScript, CSS, arquivos de modelo e muitas outras coisas. O mais bonito, porém, é que eles não precisam. Você pode incluir a quantidade de personalização que você desejar.

De fato, um tema filho realmente precisa apenas de três coisas: uma pasta, uma folha de estilos (style.css) e um arquivo de funções (functions.php). É isso aí. E os dois arquivos podem estar praticamente vazios.

Quando usar um Tema Filho

Você deve sempre criar um tema filho sempre que quiser fazer alterações em um site WordPress? Não, isso realmente depende.

Se você planeja fazer apenas pequenas modificações, como alterações de cor ou uma fonte diferente, um plugin que permite criar CSS personalizado pode ser tudo o que você precisa. Atualmente, muitos temas também oferecem a opção de adicionar código personalizado nativamente.

No entanto, se você planeja introduzir mudanças maiores, como uma revisão completa do design, várias alterações de modelo ou qualquer outra coisa dessa magnitude, um tema filho é definitivamente o caminho a seguir.

Como Criar um Tema Filho no WordPress

Sempre verifique se o tema que você está usando disponibiliza um tema filho por padrão (a maioria oferece), dessa forma, você não precisa seguir todo o processo a seguir.

Criar um tema filho no WordPress é um tarefa bem simples, mas que requer atenção da sua parte.

1. Acesse os Arquivos do seu Site

Acesse os arquivos de instalação do seu site WordPress usando:

• Cliente FTP
• ou o Gerenciador de Arquivos do cPanel

e vá para wp-content > themes, agora que você está na pasta themes vamos fazer as coisas acontecerem.

2. Crie uma Pasta para o seu Tema Filho

Encontre o tema principal ativo (tema pai) que você está usando e deseja criar o tema filho.

Vamos supor que o nome do tema seja MeuTemaWordPress, então você deve criar uma pasta com o nome MeuTemaWordPress-child.

Percebeu que adicionamos -child no final do nome? Siga sempre esse padrão e você não vai confundir seu tema filho. (mas você pode usar o que achar melhor)

Veja um exemplo com o tema padrão twentyfourteen:

3. Crie um Arquivo de nome style.css na pasta do tema filho

Para um tema filho no WordPress ser reconhecido como tal, ele deve ter um arquivo style.css. Caso você não crie tais arquivos, não conseguirá ativar o tema filho.

Então, crie o arquivo style.css dentro da pasta do tema filho que você criou acima:

• Você pode criar usando o Gerenciador de Arquivos do cPanel

• Ou usando um Cliente FTP como FileZilla, ao criar, nomeie o arquivo como style.css.

4. Edite o Arquivo style.css

Agora você precisa editar esse arquivo style.css do tema filho, isso é obrigatório também.

Adicione a seguinte estrutura como indicada abaixo no arquivo style.css (altere as informações de acordo com o seu tema e suas informações):

/*
Theme Name: Nome do Tema Filho
Theme URI: Endereço URL para o seu site
Description: Tema Filho para Meu Tema Principal
Author: Seu Nome
Author URI: Endereço URL que leva ao perfil do autor do tema
Template: nomedotemapai
Version: 1.0
*/

Em Template: nomedotemapai, presente no bloco de código acima, dizemos quem é o tema pai para esse tema filho.

Então, coloque o nome do tema pai exatamente como está na pasta do tema pai (ou tema original).

• Adicionando a estrutura com o Gerenciador de Arquivos do cPanel:

• Ou use seu Cliente FTP favorito:

Depois de ter modificado as informações e o Template de acordo com o nome do seu tema pai, salve o arquivo.

5. Crie um arquivo de nome functions.php na pasta do tema filho

O próximo passo é adicionar um arquivo de funções (functions.php) para o seu tema filho.

Você precisa disso para poder enfileirar a folha de estilo CSS do tema pai.

Sem ele, seu site não teria nenhum estilo e ficaria parecido com algo assim:

Novamente escolha o seu método para criar o arquivo functions.php, seja o Gerenciador de Arquivos do cPanel ou um Cliente FTP.

• Criando o arquivo functions.php com o Gerenciador de Arquivos cPanel:

• ou crie o arquivo functions.php utilizando o seu cliente FTP favorito (como FileZilla):

6. Edite o arquivo functions.php

Abra o arquivo functions.php que você criou e adicione as seguintes linhas de código:

<?php

/* script de enfileiramento para a folha de estilo do tema pai */
function childtheme_parent_styles() {

// Enfileire o estilo
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Escolha o seu método para editar o arquivo functions.php, seja o Gerenciador de Arquivos cPanel ou o Cliente FTP:

• Editando com o Gerenciador de Arquivos do cPanel:

• Editando com o Cliente FTP:

Depois de ter feito isso seu tema filho já está pronto para ser usado.

Como Ativar o Tema Filho

Quando o tema filho estiver pronto, você precisará ativá-lo. Se você está preocupado que a ativação do tema filho desative o tema pai, não se preocupe: o WordPress saberá usar os arquivos do tema pai, a menos que você adicione novos arquivos ao tema filho que os substitua.

Até o momento, você não adicionou nenhum arquivo ou função extra ao tema filho, para que seu site funcione exatamente da mesma maneira que faria com o tema pai ativado.

No Painel Administrativo do WordPress, vá para Aparência > Temas.

Você encontrará seu tema filho listado entre os temas instalados no seu site.

Passe o mouse sobre o tema e clique no botão Ativar.

Isso ativará o seu tema filho. Agora, quando você visita seu site ao vivo, ele terá a mesma aparência de antes.

Parece o mesmo porque você ainda não adicionou personalizações.

Mas agora você tem um tema filho que funciona. Parabéns!

Adicione Estilos CSS para Fazer Alterações no Design do Tema

Agora que você configurou e ativou o seu tema filho, pode estar se perguntando como você pode usá-lo para alterar o design do seu site.

Vamos dar uma olhadinha no que podemos fazer para você ter uma breve visão das possibilidades.

Algumas informações importantes:

1. Vamos usar exemplos bem simples, o ideal é que você estude um pouco de folhas de estilos CSS.
2. Todas as mudanças serão feitas no arquivo style.css do tema filho, nada será alterado no tema pai.
3. É importante que você utilize um editor de texto desenvolvido para programadores, pois facilita a leitura do código e numeração das linhas.
4. O que eu uso e recomendo é o Sublime Text 3, mas você pode ficar livre para buscar um que você se sinta mais confortável.
5. Você vai precisar utilizar a inspeção de elementos na ferramenta do desenvolvedor do seu navegador, normalmente pressionando a tecla F12.
6. Com o inspetor de elementos você vai encontrar a classe CSS que você quer alterar.

Abra o arquivo style.css do seu Tema Filho com o Editor de Texto escolhido e adicione as seguintes alterações após as informações do tema:

Alterando a Cor de Fundo do Site e Widgets (background)

Cor de fundo do site:

body {
background: #e7efff; /* cor de fundo do site */
}

body é a classe CSS do corpo do site.

Para alterar o cor de fundo de outros elementos, encontre a class CSS usando o inspetor de elementos e coloque no lugar de body.

Cor de fundo das Widgets:

.widget {
background: #ede7f6; /* cor de fundo da widget */
}

.widget é a classe CSS do corpo das Widgets.

Veja um exemplo do código acima e de como usar o inspetor:

Alterando Tamanho, Família, Peso e Cor do Texto dos Posts

.entry-content p {
font-size: 25px; /* tamanho da fonte */
font-family: 'open-sans', sans-serif; /* família da fonte */
font-weight: 400; /* peso da fonte */
color: #3f3f3f; /* cor da fonte */
line-height: 32px; /* altura de linha da fonte */
}

Se você perceber que algumas alterações não tiveram efeito, experimente adicionar !important na frente do valor, por exemplo:

.entry-content p {
font-size: 25px !important; /* tamanho da fonte */
}

Dessa forma você está dando importância a esse valor acima de todos os outros, consequentemente forçando o uso dessa regra.

Muito cuidado para não usar !important em todos os elementos e principalmente com as classes CSS que você está aplicando as alterações.

Dicas Importantes para usar um Tema Filho

Os temas filhos são um recurso incrivelmente valioso do WordPress. Eu os uso em todos os sites que eu desenvolvo.

Para ajudá-lo a encontrar os métodos que você precisa usar para fazer o uso mais eficaz dos temas filhos, aqui estão minhas dicas para ajudá-lo:

• Se você precisar editar um tema de terceiros, sempre use um tema filho. Dessa forma, suas alterações não serão perdidas quando você atualizar o tema.
• Todo tema filho precisa de uma folha de estilo (style.css) e um arquivo de funções (functions.php).
• O WordPress usará a hierarquia de modelos para determinar qual arquivo de modelo usar ao gerar conteúdo. Se encontrar dois arquivos com o mesmo nome, ele usará o do tema filho.
• Você pode substituir uma função conectável em seu tema pai, escrevendo uma função com o mesmo nome no tema filho.
• Você pode retirar uma função do tema pai usando uma função com remove_action () ou remove_filter () no tema filho e, em seguida, escrevendo uma nova função.
• Não se esqueça de ativar o seu tema filho depois de criá-lo. E certifique-se que ninguém exclua o tema principal da sua instalação do WordPress: sem ele, o tema filho não funcionará.

Conclusão

Os temas filhos são um recurso útil do WordPress que permite personalizar um tema sem editar diretamente seu código original. Você pode usar um para adicionar funcionalidade adicional a um tema, personalizar o estilo ou criar/editar arquivos de modelo (templates como single.php, page.php e etc).

Se você seguir os conselhos acima, poderá criar temas filhos no WordPress seguindo as práticas recomendadas e aproveitá-los para uma variedade de tarefas. Tudo sem perder suas alterações e personalizações quando você atualizar o tema principal.