Como Criar um Tema Filho (Child Theme) no WordPress – Guia Estendido

Você tem administrado seu site WordPress há algum tempo e ele faz o que você precisa. Mas agora, decidiu que precisa personalizá-lo.

Ou talvez você esteja criando seu site com um tema que baixou do diretório de temas ou que você comprou e percebeu que ele não funciona exatamente da forma que deveria.

E então, o que você faz?

Pode tanto encontrar um plugin que oferecerá o tipo de personalização que você precisa, quando trocá-lo por um tema novo. Mas e se estiver satisfeito com o tema atual e não consegue encontrar um plugin que adicione a funcionalidade necessária?

Resposta: você precisará personalizar seu tema. E as melhores práticas dizem que isso deve ser feito através de temas filhos no WordPress.

Neste artigo, mostrarei exatamente como criar um tema filho no WordPress, como usá-lo para personalizar seu site e como os temas filhos funcionam. Também explicarei o conceito dos temas principais e descreverei como o tema principal do seu site interage com o tema filho (child theme).

Antes de nos aprofundarmos em criar um tema filho, vamos identificar os três métodos que você pode usar para personalizar seu site WordPress.

Métodos para personalizar o WordPress

Personalizar um tema vem acompanhado de riscos. Se você edita o código de um tema de terceiros (que não seja um que foi comprado em um marketplace, por exemplo), na próxima atualização dele todas as suas alterações serão perdidas. Isso significa que não só seu site voltará à forma como ele era, como todo o seu trabalho será desperdiçado.

Existem três formas de personalizar seu site WordPress:

• Editando seu tema diretamente.
• Instalando um plugin.
• Criando um tema filho do tema atual.

Vamos analisar cada uma delas por vez.

Editando seu tema

Se seu site estiver usando um tema WordPress personalizado, o que significa que ele foi desenvolvido especialmente para você, existe a opção de editá-lo com segurança, porque você não arrisca perder suas personalizações na próxima vez que o tema for atualizado.

Ao invés disso, se você ou seu desenvolvedor fizerem mudanças no tema no futuro, será a versão personalizada dele que será editada, não a versão original que estava presente antes das alterações.

Isso não significa que editar seu tema não acompanhe riscos. Se você não tem experiência com a codificação de temas, talvez seja mais seguro criar um tema filho (veremos como fazer isso em breve). Aqui está o que faço: tenho um tema base que uso em todos os meus sites, com um layout, hooks e funções padrão e, em seguida, o personalizo de acordo com cada site com um tema filho.

Se você for editar seu tema diretamente, certifique-se de manter um backup do tema original e não edite o tema no site de produção (use um site de desenvolvimento ou um site de teste) e utilize um controle de versão para monitorar suas mudanças.

E se você estiver usando um tema de terceiros, não deve nunca editá-lo diretamente. Ao invés disso, use um plugin ou crie um tema filho.

Adicionando um plugin

A segunda opção para personalizar um tema WordPress é instalar ou codificar um plugin.

Se as personalizações que você deseja fazer são funcionais ao invés de alterações no design, um plugin é um meio muito mais apropriado de realizá-las. Portanto, se você deseja adicionar código extra, talvez seja melhor criar um plugin.

Plugins não precisam ser grandes ou complexos: se você precisa adicionar um pouco de código ao arquivo functions.php em seu tema, crie um plugin simples para adicionar algumas linhas extras de código ao seu site. Um bom exemplo é registrar um tipo personalizado de artigo.

Pode ser tentador adicionar código ao arquivo functions.php do seu tema, mas adicionar um tipo de artigo é uma alteração funcional em seu site, não de design. Se quiser trocar de tema no futuro, você não perderá esse tipo de artigo e todos os artigos criados nessa categoria. É por isso que você deveria instalar ou criar um plugin em seu lugar.

Em alguns casos, é possível encontrar um plugin existente que faz o que é necessário, mas em outros você precisará fazer a codificação por conta própria.

Caso estiver em dúvida se deve criar um plugin ou personalizar seu tema (ou tema filho), faça a si mesmo a seguinte pergunta: se eu quiser fazer uma mudança de design em meu site no futuro e instalar um novo tema WordPress, vou querer que essa mudança continue válida? Caso a resposta for sim, significa que a mudança é funcional e não estética. Nesse caso, você deve optar por um plugin.

Criando um tema filho (Child Theme)

A terceira opção para personalizar um tema WordPress é criar um tema filho.

Aqui estão alguns casos nos quais você usaria um tema filho:

• Você deseja fazer alterações no design do seu site, não em sua funcionalidade.
• Seu site está usando um tema de terceiros ou um tema que você deseja usar novamente em seu estado atual.
• Você não deseja editar diretamente seu tema caso ele apresente problemas (talvez você não seja um desenvolvedor experiente).
• Seu site está usando um tema projetado para ser um tema principal, como um framework. Esses são temas com muitas opções de personalização, como hooks, criadas para que você as adicione com seu próprio tema filho.

Temas filhos são uma forma eficiente e segura de adicionar personalizações ao seu site. Por isso, vamos nos aprofundar neles.

O que é um tema filho no WordPress?

Então, o que exatamente é um tema filho no WordPress? Como ele funciona?

Um tema filho é um tema que funciona em conjunto com outro tema, chamado de tema principal.

Ele contém algumas instruções específicas que informam ao WordPress que se trata de um tema filho e qual é seu tema principal. Assim, o WordPress usa o código do tema principal na maioria das situações, mas o substitui com o código do tema filho quando necessário. Se você se deparar com um site usando um tema filho (child theme) que você gosta, use nossa ferramenta de detecção de temas para descobrir qual é o tema principal (parent theme).

Arquivos do tema filho no WordPress

Todo tema filho no WordPress precisa ter, no mínimo, dois arquivos: uma folha de estilos e um Arquivo Functions. A folha de estilos contém comentários de texto em seu topo que informam ao WordPress que se trata de um tema filho e qual é seu tema principal. O Arquivo Functions inclui a função que consulta a folha de estilos do tema principal.

Observação: Você poderá se deparar com guias que te dirão para fazer a consulta da folha de estilos do tema principal a partir da folha de estilos do tema filho. Essa não é mais a forma correta de fazer isso e você deve usar a consulta no Arquivo Functions. Mostrarei como fazer isso mais adiante.

Seu tema filho não precisa incluir mais nenhum arquivo. Ao contrário do tema principal, ele não precisa de um arquivo index.php como suporte se não houver mais nenhum arquivo específico no tema. Isso ocorre porque se um arquivo de template não existe no tema filho, o WordPress usará o arquivo do próprio tema principal.

Portanto, dependendo do que você deseja que seu tema filho faça, precisará adicionar código extra na folha de estilos, no Arquivo Functions ou criar arquivos extras no tema filho que se substituam àqueles do tema principal. Isso pode incluir um ou mais:

• Arquivos de template para substituir o mesmo arquivo no tema principal, como o page.php, quando quiser personalizar a exibição das páginas estáticas.
• Partes do template, como header.php ou footer.php, quando você deseja personalizar essas partes no design do site.
• Partes extras do template consultadas a partir dos arquivos de template em seu tema filho. Por isso, se você deseja personalizar o cabeçalho quando as páginas estáticas são exibidas, pode criar um arquivo em seu tema filho chamado header-page.php e um arquivo de template chamado page.php, que seria substituída para page.php do tema principal. Este arquivo de template seria idêntico ao do tema principal, com exceção da consulta presente no arquivo do cabeçalho (header), que seria feita a partir do arquivo header-page.php, ao invés do header.php.
• Arquivos extras de inclusão para adicionar funcionalidades. Se você deseja adicionar muito código funcional e organizá-lo, pode criar arquivos de inclusão para cada conjunto de funções e, em seguida, consultá-los a partir do arquivo functions.php do tema filho. Por exemplo, se você deseja adicionar opções extras ao Customizer, pode adicionar um arquivo de inclusão chamado customizer.php em seu tema filho e consultá-lo a partir do Arquivo Functions do próprio tema filho.

Mas se você adicionar arquivos e funções, como o WordPress, sabe qual deve usar? Os do tema principal ou do tema filho? É sobre isso que falaremos na sequência.

Como o WordPress escolhe os arquivos de template

A forma como o WordPress escolhe os arquivos de template do seu site ao exibir o conteúdo é através de uma consulta da hierarquia do template.

O WordPress usa essa hierarquia para trabalhar com os arquivos de template em seu tema e encontrar a opção correta para usar ao exibir determinado tipo de conteúdo. Ele começa pelo topo (no lado esquerdo da imagem acima) e olha para cada um dos arquivos de determinado tipo de conteúdo por vez. Quando encontra um arquivo que exibirá tal conteúdo, ele o utilizará.

Imagine que seu tema tem um arquivo archive.php e outro category.php, mas nenhuma tag.php. Ao exibir um arquivo de categoria, o WordPress usará o category.php, pois é mais específico para esse tipo de conteúdo. Ao exibir um arquivo de tags, ele usará o archive.php.

Se o WordPress não encontra um arquivo de template para determinado tipo de conteúdo, por padrão ele se voltará ao arquivo index.php, o motivo pelo qual todos os temas individuais (ou seja, que não são um tema filho), precisam ter um arquivo index.php.

O mesmo se aplica a artigos e páginas individuais. Digamos que seu tema tenha um arquivo singular.php, usado para artigos individuais em qualquer tipo de publicação (incluindo páginas e tipos personalizados de artigo). Ele também tem um arquivo page.php. Ao exibir uma página individual, ele usará o page.php. Ao exibir um artigo, usará singular.php. E se você registrar um tipo de artigo personalizado e não adicionar um arquivo de template para ele, usará novamente o singular.php.

Quando você usa um tema filho, o WordPress ainda assim utiliza a hierarquia de template para decidir qual arquivo deve ser considerado para exibir o conteúdo em seu site. Ele observa os arquivos tanto no tema principal quanto no tema filho e usa o primeiro arquivo que aparecer na ordem hierárquica.

Então, imagine que seu tema filho tem um arquivo singular.php e um post.php, enquanto o tema principal possui um page.php e o index.php. Ao exibir um artigo individual, o WordPress usa o post.php do tema filho. Ao exibir uma página, ele usa o page.php do tema principal. E ao exibir um artigo individual de um tipo personalizado, ele usará o singular.php do tema filho.

Mas e se o tema filho quanto o tema principal possuírem instâncias do mesmo arquivo?

Vamos imaginar que você adicionou um arquivo page.php ao tema filho do exemplo anterior. Como se trata de um tema filho, ele substituirá para o mesmo arquivo do tema principal. Assim, ao exibir uma página individual, o WordPress usaria o novo arquivo page.php do tema filho.

Por isso que criar um tema filho permite personalizar o tema principal. Se você adiciona uma cópia do arquivo de template a partir do seu tema principal para seu tema filho e o edita para incluir as personalizações que deseja fazer, o WordPress usará esse novo arquivo de template ao invés daquele que faz parte do tema principal. Isso significa que suas personalizações serão usadas quando o conteúdo for exibido, sem que você tenha editado o tema principal. Excelente!

Como o WordPress executa as funções dos temas principais e temas filhos

E se você não quiser fazer personalizações nos arquivos de template do seu tema, mas sim nas funções?

Também é possível fazer isso. Primeiro, você precisa se convencer que a melhor forma de fazer isso é através do tema filho, não de um plugin. Por exemplo, talvez queira editar uma função que já esteja presente no tema principal, como a função que gera o cólofon (nota final) no rodapé.

Então, você adiciona a nova função ao arquivo de funções do seu tema filho ou em um arquivo de inclusão que é consultado a partir do arquivo de funções.

Para garantir que sua nova função se aplique à funcionalidade do seu tema principal, é necessário entender como isso funciona. Existem três formas de fazê-lo:

• Escrever uma nova função com o mesmo nome como se fosse uma função conectável em seu tema principal.
• Desativar a função em seu tema principal no hook ao qual ela foi anexada e escrever uma nova função para substituí-la.
• Escrever uma nova função com uma prioridade mais alta que a original e consultá-la através do mesmo hook, o que significa que ela será chamada após sua versão original e, assim, poderá se aplicar a ela ou ampliá-la.

Vamos examinar como você pode fazer tudo isso mais adiante no artigo. Mas primeiro, vejamos os cenários em que você deveria ou não usar um tema filho.

Quando usar um tema filho no WordPress (vantagens)

Agora você sabe o que é tema filho e como pode usá-los para que se substituam os arquivos de template ou funções em seu tema principal.

Para recapitularmos rapidamente, você deve usar um tema filho se estiver utilizando um tema em seu site e deseja realizar uma ou mais das seguintes ações:

• Editar um ou mais arquivos de template.
• Adicionar funções extras que são relacionadas à exibição e não à funcionalidade.
• Substitua uma ou mais funções do tema principal.
• Adicionar arquivos extras de template.

Algumas vantagens incluem:

• Extensão e personalização facilitadas: Obviamente, um tema filho estende as funcionalidades do seu tema principal. Você já tem um template pronto para usar através do tema principal e tudo o que precisa fazer é criar um arquivo style.css para seu tema filho e adicionar ajustes de personalização conforme suas necessidades.
• Atualizações sem complicações: À medida que o WordPress evolui, os temas e plugins precisam ser atualizados em determinados momentos. Se você fizer ajustes personalizados e alterações em seu tema primário, poderá acabar perdendo todas essas mudanças se atualizá-lo. Assim, o mais recomendado é fazer tais alterações no tema filho, de forma que se algum dia você precise atualizar o tema principal, não arriscará perder suas personalizações.

E quando você não deve usar um tema filho?

Quando não usar um tema filho (desvantagens)

Existem situações em que você não precisa usar um tema filho e deve utilizar um método diferente para personalizar seu site. São elas:

• Caso seu tema foi desenvolvido por você mesmo (ou alguém o criou para você) e não será usado em nenhum outro lugar. Apenas edite o tema, certificando-se de usar o controle de versão.
• Se as personalizações que você deseja fazer são funcionais, como adicionar um tipo personalizado de artigo, e deseja mantê-las caso mude de tema futuramente. Nesse caso, use um plugin.

Algumas desvantagens do tema filho incluem:

• Escolher o tema principal ideal: Nem todos os temas funcionam bem como temas mãe. Alguns deles, por exemplo, podem não ser atualizados regularmente e tendem a não apresentar as funcionalidades mais recentes. De forma similar, nem todos os temas WordPress são criados com tema filho em mente e, portanto, podem ser candidatos ruins para funcionar como um tema principal. Você precisa escolher o tema principal perfeito para expandi-lo da forma adequado e fazer com que funcione como a fundação para seu tema filho.
• Esforços de personalização: Um tema filho basicamente busca estender e personalizar um design de template existente. Assim, se você já criou um site em torno do seu tema principal, talvez precise reconsiderar a personalização de elementos, como menus, opções do tema, barras laterais, cabeçalho, entre outros, ao migrar para um tema filho.

Agora que você sabe quando usar (ou não) um tema filho, chegou a hora de trabalhar e aprender como criar um tema filho no WordPress.

Como criar um tema filho no WordPress

Configurar um tema filho básico no WordPress envolve a criação de dois arquivos: a folha de estilos e o arquivo de funções. Vamos falar sobre ambos.

A folha de estilo (Style Sheet)

Antes de criar seu arquivo, você precisa criar uma pasta para manter seu tema. Ela ficará localizada na pasta wp-content/themes da sua instalação WordPress.

Lembre-se: não faça isso em seu site de produção. Adicione o código em um site de desenvolvimento primeiro e, depois, teste-o em seu site de testes. Quando estiver satisfeito com o resultado, você pode fazer a transferência para seu site de produção. Todos os planos de hospedagem Kinsta incluem o ambiente de testes.

Na pasta do seu novo tema, crie um arquivo chamado style.css. Adicione as linhas a seguir neste arquivo:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Esse texto é formado por comentários. Ele não é um código que roda em seu site ou que fornece algum tipo de funcionalidade. Ao invés disso, ele informa ao WordPress sobre detalhes do tema. Você precisa desse tipo de texto em todos os temas, do contrário o WordPress não os reconhecerá como temas.

Vamos entender cada uma dessas linhas para identificar o que elas fazem:

• Theme Name: O nome exclusivo do tema.
• Theme URI: Onde os usuários podem encontrar o código ou a documentação do tema.
• Description: Texto descritivo para ajudar os usuários a entender o que o tema faz.
• Author: Seu nome.
• Textdomain: Usado para internalização. Utiliza o domínio de texto como o segundo parâmetro para quaisquer funções de internalização.
• Author URI: O site do autor.
• Template: A pasta onde o tema principal está armazenado. Use o nome da pasta e não o nome do tema em questão. Sem esta linha, seu tema não funcionará como um tema filho.
• Version: O número da versão.
• License: A licença, que deve ser GNU. [link]
• License URI: O link com informações sobre a licença.

A linha mais importante para um tema filho é a “Template”. Sem ela, o tema não funcionará como um tema filho. Apenas tema filho incluem esta linha.

Adicione esse texto à folha de estilos do seu tema, fazendo as edições necessárias com suas próprias informações. Você precisará editar a linha “Template” para adicionar a pasta em que seu tema existente está armazenado, uma vez que ele será o tema principal.

Em seguida, salve o arquivo. Se estiver vendo a tela de detalhes do tema em seu site, observará as seguintes informações sendo exibidas:

Não parece nada de especial, porque não contém uma captura de tela. Essa é uma imagem que transmite a ideia do visual do tema. A menos que seu tema se torne muito diferente do tema principal, apenas copie o arquivo screenshot.png do seu tema principal para a pasta do tema filho.

O arquivo Functions (File Functions)

O próximo passo é adicionar um Arquivo Functions ao seu tema filho. Você precisa fazer isso para que seja capaz de consultar a folha de estilos do tema principal. Sem ela, seu site não teria nenhum estilo e ficaria semelhante a este:

Horrível. Tenho certeza que você concorda comigo! Portanto, vamos adicionar o estilo para que ele fique com a aparência correta.

Na pasta do seu tema filho, adicione um arquivo chamado functions.php. Abra-o e adicione o seguinte código:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Ele usa a função wp_enqueue_style() para consultar a folha de estilos do tema principal, enquanto a função get_template_directory_uri() localiza onde o arquivo está armazenado. A função está dentro de uma função que criei, chamada de kinsta_parent_styles(), que está atrelada ao hook wp_enqueue_scripts.

Talvez você esteja se perguntando por que ele use uma função chamada wp_enqueue_scripts ao invés de wp_enqueue_styles. Isso ocorre porque wp_enqueue_scripts é usado tanto para scripts quanto para estilos e não é um hook como wp_enqueue_styles.

Sinta-se à vontade para editar meu código e adicionar seu próprio prefixo para nomear sua função. Usei “childtheme” como meu prefixo, para assegurar que minha função não entre em conflito com outras funções do tema principal ou de algum plugin.

Depois, salve seu arquivo.

Como ativar seu tema filho no WordPress

Quando seu tema filho estiver pronto, você precisará ativá-lo. Se estiver preocupado de que a ativação do tema filho desativará o tema principal, não se aflija: o WordPress saberá usar os arquivos do tema principal, a menos que você adicione novos arquivos ao tema filho que se substituam a eles. Até o momento, você não adicionou nenhum artigo ou função extra ao tema filho, portanto seu site funcionará exatamente da mesma forma que funcionaria com o tema principal ativado.

Lembre-se: faça isso em seu site de desenvolvimento ou de testes primeiro. Não ative seu tema filho no site de produção até que o tenha testado.

No painel de controle do WordPress, vá até Aparência > Temas. Lá, você encontrará seu tema filho listado entre os temas instalados para seu site.

Selecione o tema e clique no botão Ativar. Isso fará com que seu tema filho seja ativado. Agora, ao visitar seu site, ele terá o mesmo visual de antes:

Ele tem a mesma aparência, porque você ainda não adicionou nenhuma personalização. Mas agora há um tema filho em funcionamento. Muito bem!

Como personalizar seu tema filho no WordPress

Agora que você tem um tema filho em funcionamento em seu site WordPress, chegou a hora de adicionar suas personalizações. Mostrarei como é possível adicionar arquivos de template para eles substituírem às suas versões equivalentes do tema principal, como adicionar estilo ao seu tema filho e como adicionar novas funções.

Vamos começar pelos arquivos de template.

Como adicionar arquivos de template ao seu tema filho no WordPress

Já vimos como o WordPress escolhe qual arquivo de template deve ser usado quando o conteúdo é exibido em seu site. Existem dois fatores a serem lembrados:

• O WordPress usará o arquivo que aparece primeiro na hierarquia, seja ele do tema filho ou pai.
• Se um arquivo de template (ou uma parte do template, como header.php) com o mesmo nome existe tanto no tema principal quanto no tema filho, o WordPress usará a versão do tema filho.

Para adicionar personalização, acredito que seja mais fácil começar com a criação de uma cópia de um arquivo relevante a partir do tema principal, adicioná-la ao tema filho e só então começar a editá-la.

Isso varia de acordo com o fato de que o arquivo no tema filho terá o mesmo nome do arquivo do tema principal, se será um novo arquivo exibindo um tipo de conteúdo diferente ou ainda se está mais alto na hierarquia.

Por isso, se eu estiver adicionando uma nova versão do page.php ao meu tema filho, que será substituída para page.php do meu tema principal, copio o page.php do meu tema principal para o tema filho e começo a editá-lo. Certifique-se de copiar apenas o arquivo: não o mova, pois você não deseja que nenhuma mudança seja realizada no tema principal.

E se, por exemplo, eu quiser ter um template de página personalizada no meu tema filho, simplesmente copio o page.php para meu tema filho, o renomeio e depois o edito.

Dessa forma, você garante que todos os aspectos do arquivo que não precisam ser personalizados continuarão funcionando corretamente. O mesmo se aplica às demais partes do template.

Como adicionar estilos ao seu tema filho no WordPress

Você também pode adicionar estilos ao arquivo style.css do seu tema filho, o que expandirá ou substituirá o estilo definido na página de estilos do tema principal.

O WordPress consultará a folha de estilos do tema principal primeiro e, depois, a folha de estilos do tema filho. Isso significa que se você adiciona estilização ao tema filho que vise os mesmos elementos que o tema principal, será substituída ao estilo do tema principal, desde que utilize os mesmos seletores.

Imagine que você deseja alterar a cor do título do site. No tema principal, ele pode ser estilizado da seguinte forma:

h1.site-title {
 color: #000;
}

Para substituir o seu tema filho, você adicionaria o seguinte:

h1.site-title {
 color: #303030;
}

Como o navegador o encontrará após o estilo do tema principal, ele o substituirá e será usado em seu lugar.

Como adicionar funções ao seu tema filho no WordPress

Então, você criou um tema filho no WordPress sem o intuito de editar qualquer arquivo de template, mas para adicionar funcionalidades extras ou substituir uma, ou mais funções do tema principal.

Escrever funções em seu tema filho é um pouco mais complicado que adicionar arquivos de template, mas ainda assim é algo possível.

Se quiser adicionar uma nova função que não interaja com qualquer uma das funções em seu tema principal, você pode ir em frente para fazer isso. Apenas adicione a função no arquivo functions.php em seu tema filho, anexe-o ao hook relevante de ação ou filtro e estará pronto.

Mas se você planeja substituir ou editar uma função no tema principal, precisará entender os métodos que podem ser usados para fazer isso. Existem três formas como você pode substituir a função de um tema principal em seu tema filho:

• Se seu tema principal for conectável, simplesmente escreva outra função em seu tema filho com o mesmo nome e o WordPress rodará essa função, ao invés daquela que está em seu tema principal.
• Se você deseja impedir que uma função do tema principal rode, pode escrever uma função em seu tema filho que a desvincule do hook ao qual está anexada.
• Se deseja expandir uma função, você pode adicionar outra função (com um nome diferente) em seu tema filho e se certificar de que ele rodará após sua versão equivalente no tema principal.

Vejamos como é possível fazer cada uma dessas ações.

Substituir uma função conectável

Uma função conectável é identificada por uma verificação condicional. Ela confere se outra função com o mesmo nome já foi ativada. Em caso positivo, ela não roda a função.

O WordPress ativará funções do tema filho antes daquelas que estão presentes no tema principal. Se ele se depara com uma função conectável no tema principal e você adicionou uma função ao tema filho com o mesmo nome, a função conectável não rodará.

Um exemplo é a função que gera o cólofon do tema Storefront para sites WooCommerce. Aqui está a função sem seus conteúdos:

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Se você quisesse substituí-la, escreveria outra função com o mesmo nome (storefront_credit()) e a vincularia com o mesmo hook que o tema principal.

Desvinculando uma função do tema principal

Se a função do tema principal não for conectável, você ainda poderá impedir que ela rode. Imagine que seu tema principal tem uma função chamada parent_function(), vinculada ao hook init com uma prioridade 20. Você deseja impedir que ela rode, portanto, pode substituí-la com uma função que criou.

Aqui está como a função do tema principal se pareceria:

function parent_function() {
 //conteúdo da função aqui
}
add_action( ‘init’, ‘parent_function’, 20 );

Para desvinculá-la, você adicionaria este código ao seu tema filho:

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

Perceba que você vincula sua segunda função ao hook wp_head, que roda no topo de cada página, sendo necessário incluir o mesmo valor para o parâmetro de prioridade como na função original. Se a função original add_action() não tem uma prioridade, você pode omiti-la da função remove_action() do seu tema filho.

Observação: se a função original foi vinculada a um hook de filtro ao invés de um hook de ação, você usaria o remove_filter()da mesma forma.

Ampliando uma função com outra função

Ao invés de substituir ou remover uma função, em algumas ocasiões você poderá desejar ampliá-la. Neste caso, você escreveria uma nova função com um nome diferente e a anexaria ao mesmo hook.

Vamos imaginar que existe um hook de ação para o rodapé do seu tema principal, chamado parent_footer. Qualquer função que você anexa a tal hook rodará no local onde ele está situado.

No tema principal, já existe uma função chamada parent_footer_content() que povoa o rodapé. Mas e se você quisesse adicionar um pouco de código nele?

Aqui está como a função parent_footer_content() ficaria no tema principal:

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

Se você quisesse adicionar conteúdo na sequência, precisaria criar uma função em seu tema filho que fosse anexada ao mesmo hook de ação, com uma prioridade que a faria rodar após a primeira função. Como a prioridade não está definida para a função do tema principal, sabemos que seu padrão é 10. Portanto, você precisa usar um número mais alto para que ela seja ativada após a versão original.

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

Isso faria com que o código da função do seu tema filho fosse adicionado após o código da função do tema principal.

Como solucionar problemas em temas principais e temas filhos

Agora você sabe como criar um tema filho no WordPress e como usá-lo para substituir arquivos de template, adicionar estilos extras e novas funcionalidades ao seu site.

Mas e se seu tema filho não estiver funcionando como o esperado? E se o conteúdo não for exibido da maneira que você queria ou a função não estiver sendo ativada?

Use essa lista para solucionas problemas em seu tema filho:

1. Verifique se ativou o tema filho e se não é o tema que está rodando. É incrivelmente fácil esquecer desta etapa!
2. Atualize o cache do seu navegador e o cache criado por quaisquer plugins em seu site.
3. Defina o wp-debug para verdadeiro (“true”) no arquivo wp-config.php do tema filho. Se estiver se deparando com uma tela em branco, deverá observar uma mensagem que dirá qual código causou o problema e em qual arquivo ele está localizado. Isso te ajudará a identificar o bug e em qual arquivo ele está sendo usado.
4. Verifique o código de resultado de sua página, post ou arquivo. Encontre os elementos e veja a qual classe pertencem. Isso permitirá que você saiba com qual tipo de conteúdo está lidando e te ajudará a identificar, qual arquivo de template está sendo usado. Em algumas ocasiões, não será o que você espera. Por exemplo, a página principal do blog nunca usa o archive.php, mesmo que esteja exibindo um arquivo dos seus posts.
5. Verifique se nomeou seus arquivos corretamente. Consulte a hierarquia do template para se certificar de que usou a sintaxe certa.
6. Se você duplicou um arquivo em um tema principal e o adicionou ao seu tema filho, verifique se salvou suas alterações.
7. Se uma função para substituir uma função conectável não está funcionando, verifique se você atribuiu o mesmo nome a ela e que a função no tema principal é realmente conectável.
8. Se uma função que você removeu continua sendo ativada, verifique se adicionou a prioridade correta e que sua escrita é idêntica à da função e do hook no tema principal.
9. Se você usou prioridades para substituir ou ampliar uma função, tente aumentar o valor da prioridade, para ter certeza de que ela será a última a ser ativada. Verifique se não há outras funções vinculadas àquele hook que estejam interferindo com seu código.

Espero que uma ou mais etapas ajudem você a identificar o problema e a corrigi-lo em seu tema filho. Lembre-se: não edite o tema principal diretamente.

Dicas úteis para trabalhar com tema filho no WordPress

Ufa! Tema filho é um tópico extenso e são recursos incrivelmente valiosos do WordPress. Eu os utilizei em todos os sites que desenvolvi até hoje.

Para ajudá-lo a encontrar os métodos que precisa para se aproveitar ao máximo do tema filho, aqui estão minhas dicas:

• Se você precisa editar um tema terceirizado, sempre use um tema filho em seu lugar. Dessa forma, suas alterações não são perdidas quando você atualiza o tema.
• Todo tema filho precisa de uma folha de estilos e um Arquivo Functions.
• O WordPress usará a hierarquia do template para determinar qual arquivo de template deverá ser usado ao exibir o conteúdo. Se ele encontrar dois arquivos com o mesmo nome, usará aquele que estiver no tema filho.
• Você pode substituir uma função conectável em seu tema principal, escrevendo uma função com o mesmo nome em seu tema filho.
• Você pode desvincular a função de um tema principal usando remove_action() ou remove_filter() em seu tema filho e escrevendo uma nova função.
• Você pode expandir uma função em seu tema principal, escrevendo uma função em seu tema filho e vinculando-a ao mesmo hook de ação ou de filtro.
• Não se esqueça de ativar seu tema filho após fazer seu upload. E certifique-se de que ninguém remova o tema principal da sua instalação do WordPress. Sem ele, o tema filho não funcionará.

Resumo

Um tema filho (Child Theme) é um recurso útil do WordPress, que permite que você personalize um tema sem editar seu código diretamente. Você pode usá-lo para adicionar uma funcionalidade a um tema, personalizar seu estilo ou criar/editar arquivos de template.

Se você seguir as orientações acima, será capaz de criar tema filho no WordPress de acordo com as melhores práticas e se beneficiar com eles em diversas tarefas. Tudo isso sem perder suas alterações e personalizações cada vez que atualiza o tema principal.

Rachel McCollin

Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.