Criar tema filho no WordPress

Tema no WordPress

Antes de falar diretamente sobre como criar tema filho no WordPress, vamos falar brevemente sobre temas. Os temas no WordPress são um conjunto de arquivos que definem o layout e estilo em que um site WordPress será apresentado. Então, você pode trocar o tema de um site já pronto e o conteúdo continua o mesmo. Você, Programador WordPress, também pode alterar a aparência, modelos de páginas e até funções de um tema, no entanto se os criadores do tema lançarem uma atualização e você a instalar, todo o seu trabalho de edição será desperdiçado. A solução para isso está nos temas filhos. Continue lendo para entender.

Tema filho no WordPress

Um tema filho (child theme) no WordPress é um outro conjunto de arquivos, separado do tema pai (parent theme), em que o administrador do site irá criar os seus próprios arquivos. O tema filho puxa todas as informações do tema pai e aplica as suas próprias com maior prioridade.

Um tema filho pode ter dezenas de arquivos, conforme a necessidade e desejo de seu programador, mas só precisa mesmo de 1 pasta e 2 arquivos. A pasta deverá ter o mesmo nome da pasta do tema pai com a adição de “-child”. Os arquivos são os famosos functions.php e style.css.

Porque é importante criar um tema filho no WordPress

Gerar o tema-filho é importante pelos seguintes motivos:

• Se você modificar um tema diretamente e o tema for atualizado, suas modificações se perderão. Ao usar um tema filho você se certifica de que suas modificações serão preservadas.
• É mais prático desenvolver alterações no tema filho, pois você pode comparar alternando entre o tema pai e filho.
• Usar um tema filho agiliza o desenvolvimento.
• Usar um tema filho é uma ótima maneira de aprender sobre o desenvolvimento de temas WordPress.

Criar um tema filho no WordPress

Para você criar o tema filho, será necessário seguir 3 passos, sendo eles:

1. Criar a pasta do tema filho;
2. Criar os arquivos do tema filho;
3. Verificar mudanças utilizando o tema filho.

Criar pasta do tema filho

Essa primeira parte é muito fácil, mas você deve ter acesso ao CPANEL ou FTP do seu site. Independente do seu método de acesso, você deve poder ver e editar as pastas e arquivos do seu site. Navegue até /wp-content/themes/ e visualize os diretórios dentro da pasta themes. Encontre a pasta do seu tema e copie o nome dela. Crie, então, uma pasta com o mesmo nome e adicione “-child” ao final. Veja o exemplo abaixo:

No meu diretório themes havia uma pasta chamada twentyseventeen, a pasta do meu tema escolhido. Criei uma pasta e a nomeei twentyseventeen-child. Se você conseguiu chegar até aqui, parabéns! A primeira parte está pronta.

Criar arquivos do tema filho

Dentro da sua recém-criada pasta, você deve agora inserir 2 arquivos: functions.php e style.css. Sem estes arquivos, seu tema filho não será percebido pelo sistema como um tema do WordPress.

Dentro dos arquivos, insira o código:

<?php 
/*
* Meu functions.php - Tema filho
* ------------------------------------------------
* Estas funções irão sobrepor as funções do tema pai
*/

/* CARREGAR ESTILOS DO TEMA
================================================== */
function child_enqueue_resources() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_resources' );

Note que as linhas 1, e da 10 à 13 são obrigatórias. Você pode alterar os comentários como quiser. Já a linha 12 é a que indica ao sistema que ele deve copiar os estilos do tema pai (para que você não tenha que fazer tudo do zero). Sem essa linha, seu site vai apresentar apenas o esqueleto HTML, sem estilos.

/* LICENSE & DETAILS
   ==================================================

  Theme Name:   Twenty Seventeen Child
  Theme URI:    http://example.com/twenty-seventeen-child/
  Description:  Twenty Seventeen Child Theme
  Author:       João Silva
  Author URI:   http://example.com
  Template:     twentyseventeen
  Version:      1.0.0
  License:      GNU General Public License v2 or later
  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
  Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
   ==================================================
*/

/* -------------------------------------
 CSS DO TEMA FILHO
    Adicione seus estilos abaixo
---------------------------------------- */

Note que as linhas 4 e 9 são obrigatórias dentro dos comentários ‘LICENSE & DETAILS’. Você deve alterá-las para que representem a sua estrutura. Por exemplo, se você está usando o tema Twenty Fifteen, então o nome (linha 4) deveria dizer “Twenty Fifteen Child” e o template (linha 9) deveria dizer “twentyfifteen”. Esta linha 9 só existe quando é um tema filho, justamente para dizer quem é o tema pai.

Tema filho criado no WordPress. E agora?

Prontinho! Com todas os requisitos já em seus lugares, podemos ativar o tema filho. No backend do seu site (/wp-admin) clique em Aparência > Temas e localize o tema filho pelo nome que você deu na linha 4 do style.css. Clique em ATIVAR.

Verificação do tema filho

Abra o seu site em uma nova aba ou janela do navegador e veja se está tudo ok. Na verdade, você deveria estar vendo a mesma coisa de antes e caso não esteja, podem ser duas coisas:

• Cache do navegador. Aperte Ctrl + F5 para atualizar forçadamente.
• Algum erro nos passos acima. Troque o tema novamente para o original, apague os arquivos que você criou na pasta do tema filho e comece novamente.

Para ter certeza de que está vendo o tema filho e não o tema pai, altere algum elemento do seu site através do seu style.css. Para isso, basta adicionar código como por exemplo:

/* LICENSE & DETAILS
   ==================================================
  Theme Name:   Twenty Seventeen Child
  Template:     twentyseventeen
   =================================================*/
/* -------------------------------------
 CSS DO TEMA FILHO
    Adicione seus estilos abaixo
---------------------------------------- */

body{
   background: #000000;
}

Tudo feito e funcionando!

Agora basta editar seu site como quiser sem medo de que alguma atualização (você sempre deve atualizar seus temas e plugins) apague todo seu trabalho suado. O tema filho nunca será sobrescrito por alguém que não seja você.

Conclusão do tutorial para tema filho no WordPress

Pra criar o tema filho em seu site WordPress, você:

1. Criou uma pasta no diretório /wp-content/themes/ com o mesmo nome do tema pai, adicionado de “-child”. Fez isso via CPanel ou FTP.
2. Dentro desta pasta, criou 2 arquivos: functions.php e style.css. Dentro desses arquivos, copiou os códigos fornecidos e alterou para o seu ambiente.
3. Verificou que a troca de tema surtiu efeito.

Sua estrutura deveria estar parecida com esta:

Caso ainda tenha dúvidas acerca de como criar um tema filho no WordPress, você pode acessar o Codex em https://codex.wordpress.org/pt-br:Temas_Filhos ou deixe uma mensagem nos comentários.