Como criar um tema filho no WordPress – passo a passo

Por
Tema-Filho-Wordpress


O que é um tema filho (child theme)?

Um tema filho é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai.

É o método recomendado para se fazer modificações em um tema sem que alterações no tema pai sejam perdidas, pois quando se altera algo diretamente no código de um tema, ao atualizar a versão do tema, as modificações podem ser perder.

Quando você cria um tema filho, ele herda tudo de outro tema, que será o tema pai, então você poderá fazer as modificações desejadas no site diretamente no tema filho.

Para criar um tema filho não é preciso copiar todos os arquivos do tema pai, basta instalar um tema qualquer e informar nas configurações do tema filho, que este será seu tema pai.

O WordPress por sua vez, primeiramente irá buscar os arquivos necessários para o funcionamento do tema no tema filho, e quando não os encontrar, buscará no tema pai.

Assim, quando você desejar alterar algum arquivo do tema, não altere no tema pai, mas faça uma cópia do arquivo necessário para o tema filho e então altere esta cópia, pois ao encontra-lá no tema filho, o WordPress irá usá-la, buscando os demais arquivos no tema pai.


Por que usar um tema filho?

Se você não tiver um tema filho, e fizer alguma alteração no arquivo functions de seu tema, para adicionar recursos personalizados, por exemplo, sempre que o tema for atualizado estas alterações podem ser perdidas.

Porém, usando um tema filho, sempre que precisar alterar algo basta alterar apenas no Tema filho, desta forma, as alterações feitas no tema filho serão mantidas, mesmo que o tema pai seja atualizado.


Passo a passo – Criando um tema filho.


01 – Instale o tema que será o tema pai

Como explicado anteriormente, todo tema filho precisa obrigatoriamente ter um tema pai, pois é dele que será clonado os arquivos do tema filho.

  • Instale o tema pai, mas não ative!


02 – Criando a pasta do tema filho

  • Crie uma pasta para armazenar os arquivos do tema filho
  • O nome da pasta pode ser composto por nome do tema pai (para facilitar a identificação)
  • Seguido do trecho child (para informar que é um tema filho)
  • E no final o nome do site (para saber para qual site este tema filho foi projetado)

Este formato não é obrigatório, mas é recomendado.

ATENÇÃO:
O nome da pasta não pode conter espaços e deve ser em letras minúsculas.

Exemplo:

nome_do_tema_pai-child-nome_do_site


03 – Criando o arquivo “style.css”

Para poder personalizar o arquivo style.css de seu tema filho sem alterar o arquivo style.css do tema pai, é preciso criar este arquivo no seu tema filho.

  • Crie um arquivo style.css na raiz da pasta do tema filho.

ATENÇÃO:
Este arquivo style.css não substitui o arquivo style.css do tema pai, ele o complementa!
Os códigos inseridos neste arquivo style.css, irão se sobrepor aos códigos CSS originais do tema pai.
Já o código CSS inserido na área de CSS personalizado do WordPress irá sobrepor os códigos CSS do tema pai e também do Tema filho.

É muito importante que este arquivo contenha no topo um comentário com informações do tema.

Duas informações que não podem faltar neste comentário são:
Nome do tema filho, que deve ser o mesmo nome que você deu a pasta do tema filho.
Ex.:

* Theme Name: nome_tema_filho

Nome do tema pai, deve ser o mesmo nome da pasta do tema pai, que está em …/wp-content/themes/thema_pai
Ex.:

* Template: nome_tema_pai

Veja um exemplo do comentário completo, onde é criado um tema filho para o site Utilidade Ninja com base no tema pai twentytwentythree, as 2 informações que não devem faltar estão destacadas abaixo:

/*
* Theme Name: twentytwentythree-child-utilidadeninja
* Theme URI:
* Template: twentytwentythree
* Description: Tema filho Utilidade Ninja.
* Author: Utilidade Ninja
* Author URI: https://utilidadeninja.com
* Version: 1.0.0
* License: GNU General Public License v2.0 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Tags: 
* Text Domain: utilidadeninjachild
*/
COPIAR


04 – Criando o arquivo “functions.php”

O arquivo functions.php é um arquivo PHP comum, que pode receber tanto funções nativas do PHP quanto funções do WordPress, para adicionar ações (actions) e filtros (filters) ao seu tema. Além disso, você também pode criar classes, variáveis, e qualquer coisa que colocaria em um arquivo PHP normal.

Ele é carregado tanto na área administrativa do WordPress (wp-admin) quanto no tema público, portanto, qualquer erro neste arquivo pode fazer com que o WordPress pare de funcionar como um todo. Você pode tirar benefícios desse comportamento adicionando opções ao seu tema, como página de opções, página de configurações da aparência, campos adicionais nos posts e páginas, e qualquer coisa que sua imaginação e conhecimento lhe oferecerem.

Para poder personalizar seu tema adicionando códigos ao arquivo functions.php sem alterar o arquivo functions.php do Tema Pai, é preciso criar este arquivo no seu tema filho.

ATENÇÃO:
Este arquivo functions.php não substitui o arquivo functions.php do tema pai, ele o complementa!
Os códigos inseridos neste arquivo functions.php irão se sobrepor aos códigos equivalentes existentes no tema pai.
Já os códigos que só existem no tema pai, continuarão funcionando normalmente.

  • Crie um arquivo functions.php na raiz da pasta do tema filho
  • Adicione ao início do arquivo abertura do código php: <?php
  • Todo o código deve ser inserido abaixo desta tag

O passo final é enfileirar as folhas de estilo do tema pai e do tema filho.

Observe que o método anterior de criação de temas filhos usava @import:, este método não é considerado uma boa prática.

Atualmente a prática adequada é enfileirar as folhas de estilo usando wp_enqueue_scripts action e wp_enqueue_style() no arquivo functions.php de seu Tema-filho. A seguinte função de exemplo funcionará somente se o seu tema pai usar apenas o estilo style.css para armazenar “todos” os estilos. Se o seu tema filho tiver mais de um arquivo CSS (ie.css, style.css, main.css), você terá que se certificar de manter todas as dependências do tema pai.

  • Insira o seguinte código dentro do arquivo functions.php de seu tema filho:

ATENÇÃO:
Este código abaixo NÃO DEVE ser utilizado no tema Generatepress!
Verifique a documentação de tema pai para saber se ele também possui esta restrição.

function enqueue_parent_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
COPIAR
  • Caso o primeiro código não funcione, remova-o, e tente este segundo 
function my_theme_enqueue_styles() {
	$parent_style = 'parent-style'; // Este é o estilo.css do tema pai.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
COPIAR


05 – Adicionando uma imagem de exemplo no tema

A imagem de exemplo é exibida na lista de temas instalados no seu WordPress.

  • Copie para a pasta raiz de seu tema filho a imagem que deseja exibir na lista de temas
  • A imagem deve ter o nome screenshot para funcionar
  • A extensão pode ser png ou jpg
  • A imagem deve ser na proporção 4:3


06 – Criando uma pasta para armazenar arquivos que não são cópias de arquivos do tema pai

Eventualmente você irá precisar usar em seu tema filho arquivos para serem utilizados em diversas ocasiões, como na exibição de um aviso de cookies, ou imagens, vídeos, etc.
Para estes casos, iremos criar uma pasta separada pois as cópias dos arquivos do tema pai devem obrigatoriamente possuir a mesma estrutura de pastas do tema pai.

  • Crie uma pasta chamada arquivos na raiz de seu tema filho
  • Adicione dentro desta pasta, outra pasta img
  • Copie para a pasta img os arquivos de imagens necessários para sua personalização como ícones, logotipos, etc.


07 – Instalando seu tema filho

Antes de instalar o tema filho, tenha certeza que o tema pai está instalado no site, o tema pai não precisa estar ativo, basta estar instalado.

  • Compacte a pasta do seu tema filho no formato ZIP
  • No painel de controle do WordPress, acesse: Aparência > Temas > Adicionar novo > Enviar tema
  • Clique em Escolher arquivo
  • Selecione o arquivo ZIP do tema filho e clique em Instalar agora
  • Clique em Ativar

Parabéns, seu tema filho está instalado e ativado!

Agora, ao acessar seu site, ele será exatamente igual ao tema pai, e você já pode iniciar as personalizações do site

Se precisar alterar algum arquivo do tema pai, basta copiar o arquivo desejado para o tema filho, reproduzindo toda a hierarquia de pastas, e então faça as modificações desejadas na cópia sem afetar o arquivo original do tema pai.

Veja mais informações na documentação oficial do WordPress clicando AQUI.

Até a próxima!

Como personalizar um tema no Wordress, Como personalizar o WordPress, Como criar um tema no WordPress, Como clonar um tema no WordPress.