WordPress – Criando e customizando Temas Filhos (Child Themes)

O WordPress é um CMS que fornece infinitas possibilidades de customização, principalmente se você possui conhecimentos em HTML, CSS e PHP. Após instalar um tema, algumas pessoas começam a alterar uma série de coisas no blog ou site, como estilos, funções, disposição de itens, mas cuidado, você pode estar fazendo isto da forma ERRADA!

Errado? Mas por quê?

Um dos principais motivos pelo qual não é recomendado alterar diretamente os arquivos do tema, envolve a questão do update. Caso seu tema receba alguma atualização, esta atualização pode sobrescrever os arquivos do tema, fazendo com que você perca suas alterações.

Ah… mas se eu não atualizar então fica tudo certo, não é mesmo?

Não exatamente. Manter o seu tema atualizado é de vital importância para a segurança de seu site e update dos novos recursos criados pelo WordPress. Sendo assim, mantenha seu tema atualizado!

Editando temas com Child Themes

A melhor forma de se fazer alterações em um tema no WordPress sem editar diretamente seus arquivos é a utilização de Child Themes, que em uma tradução livre significa Temas Filhos. Antes de falar a respeito de Child Themes, temos que falar dos Parent Themes (Temas Pais).

Parent Themes (Temas Pais)

Quando dois temas se amam muito, eles… Brincadeiras a parte, um tema se torna um tema pai quando é criado um tema filho para ele. Caso contrário, ele é apenas um tema normal. Qualquer tema que possua todos os arquivos obrigatórios para seu funcionamento pode se tornar um Tema Pai.

Child Themes (Temas Filhos)

O WordPress entende o tema filho como um tema normal, o qual é exibido normalmente junto com os outros temas na sua dashboard do WordPress e precisa ser ativado.

Para criar um tema filho, você precisa criar um diretório para ele em wp-content/themes, mas isso não é exatamente uma regra, contudo recomenda-se a utilização do sufixo -child para indicar que o tema é um filho.

Exemplo: twentyfifteen-child

Crie dentro do diretório recém-criado os arquivos style.css e functions.php. No arquivo style.css, você precisa adicionar um cabeçalho com as informações do tema, similar ao que o tema pai possui:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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
 Text Domain:  twenty-fifteen-child
*/

Notaram algo diferente além da adição da palavra Child no nome e na descrição do tema?

Neste cabeçalho estou informando que o template é twentyfifteen, ou seja, estou dizendo que este tema é um tema filho do tema que está no diretório twentyfifteen. É esta linha que informa ao WordPress que nosso tema é um tema filho.

A partir daí, todos os arquivos que não forem encontrados no diretório do nosso tema filho, serão carregados herdados do tema pai.

Caramba! Ficou tudo zoado aqui!

Calma aí! Ainda falta uma coisa importante: Como nós criamos um arquivo style.css no nosso tema filho, ele passa a ignorar o style.css do tema pai. Sendo assim, o CSS do seu tema não carrega.

Você precisa adicionar esta função ao arquivo functions.php do seu tema filho. Ela adiciona o style.css do tema pai ao seu tema filho.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Mãos à obra!

No caso do style.css, os estilos do tema filho tem prioridade sobre os estilos do tema pai. Sendo assim, se você adicionar um código que entre em conflito com um estilo aplicado no tema pai, o que será aplicado é o do tema filho.

Agora você pode alterar seu tema livremente. Suas alterações não ficam restritas a apenas aos estilos. Você pode editar qualquer arquivo do tema, basta você fazer uma cópia do arquivo do tema pai e replicá-lo no diretório do tema filho.

Assim, você pode alterar qualquer arquivo do tema. Caso queira retornar para a versão original deste arquivo, basta removê-lo do diretório do seu tema filho. Bem melhor, não?

Mas e o functions.php? Porque o estilo não carregou e as funções carregaram normalmente?

O arquivo functions.php do seu tema filho é carregado juntamente com o functions.php do tema pai, porém, diferentemente do que ocorre com os estilos, o functions.php do tema pai é carregado primeiro.

Um erro comum é replicar o código do functions.php do tema pai no arquivo de mesmo nome no tema filho. Não faça isso, “vai dar muito ruim”, pois as funções que foram copiadas já estão sendo executadas.

Então é isso 🙂

Neste artigo optei por abordar a criação de um child theme sem ter que me aprofundar na criação e customização de temas.

Gostou do artigo? Tem alguma dúvida? Fez algo bem legal?

Quer uma série de artigos sobre como criar um tema para WordPress do zero?

Não deixe de comentar! 🙂

Bons estudos!