WordPress: tema filho do básico ao avançado

Este post faz parte de um conjunto de artigos organizados em um Curso de WordPress. Acesse o link para outros conteúdos.

Índice

• O que são temas filhos?
• Quando NÃO é preciso usar um tema filho no WordPress
• Criando seu tema filho
  • Não faça bagunça
  • Fazendo do seu tema filho algo útil
• Coisas que você precisa saber antes de continuar
  • O functions.php do tema FILHO é carregado PRIMEIRO
  • Funções do WordPress para tema pai e para tema filho
  • Não altere o código do tema pai, mas entenda como ele funciona
• Incluindo arquivos CSS
  • Adicionando o style.css do tema pai
  • Incluindo um CSS no final da fila
• Temas filhos na vida real
  • O arquivo x.php do meu tema filho não sobrescreve o do pai
  • Quando posso instalar e criar um tema filho?

O que são temas filhos?

Um tema filho do WordPress é um tema que precisa de outro para funcionar. É uma espécie de subtema ou um complemento ao tema pai. Um dos recursos mais bacanas do WordPress, eles permitem que você estenda um tema sem alterar seu código. Dessa forma você consegue aplicar as personalizações necessárias para o projeto e continuar atualizando aquele tema que o cliente comprou no ThemeForest.

Outro uso interessante para os temas filhos são em instalações multisites. Se os sites forem ligeiramente parecidos, você pode desenvolver o tema do primeiro e apenas aplicar alterações nos demais, facilitando a manutenção e otimizando o tempo de desenvolvimento.

Quando NÃO é preciso usar um tema filho no WordPress

A partir da versão 4.7 não é mais preciso usar um tema filho se você só precisa alterar CSS. Para isso basta ir em Personalizar e acrescentar seu código no campo CSS adicional. Se você tiver certeza absoluta de que CSS serão as únicas alterações necessárias, você não precisa de um tema filho. Caso contrário, isto é, se você acha que existe uma possibilidade, mesmo que remota, que você precise alterar outra coisa no tema, crie desde o começo um tema filho e mexa a partir dele.

Criando seu tema filho

Para que seu tema filho seja listado, você só precisa criar uma pasta com qualquer nome e nela colocar um arquivo com nome style.css que comece da seguinte forma:

/*
 * Template:     twentyseventeen
 */

Substituindo twentyseventeen pelo nome da pasta do seu tema.

Não faça bagunça

Isso é só o que você precisa, mas seja caprichoso. Para o nome da pasta, por exemplo, o ideal é usar o mesmo nome do tema pai seguido de -child. O cabeçalho do style.css que eu passei aí em cima também é só o mínimo, mas o ideal é colocar mais do que isso. No codex vemos todas as opções possíveis:

/*
 * 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
 */

O tema de exemplo lá é o twentyfifteen.

Fazendo do seu tema filho algo útil

O WordPress tentará carregar o arquivo functions.php se seu tema filho tiver um, além do functions.php do tema pai. Além disso, ele tentará usar qualquer arquivo da hierarquia de templates que seu tema filho possua, ao invés de usar o arquivo do tema pai. Resumindo: se o tema filho possui um archive.php, ele usa o do filho, senão pega o do pai mesmo.

Coisas que você precisa saber antes de continuar

Entender como funcionam os hooks no WordPress é essencial para não fazer besteira. Corra lá no post que eu fiz sobre isso, dê uma lida e volte. É sério, entender como isso funciona vai fazer falta no futuro (vai fazer falta para qualquer coisa que você faça no WordPress).

O functions.php do tema FILHO é carregado PRIMEIRO

Sim, é isso mesmo. Dessa forma, se seu tema pai estiver preparado pra isso, você pode sobrescrever algumas funções. Por exemplo, se no tema filho você incluir

function theme_special_nav() {
    //  Faz alguma coisa de um jeito mais legal.
}

e no tema pai tiver

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Faz alguma coisa.
    }
}

a sua versão será usada. Sua função é definida primeiro, logo o php não entra no if do tema pai. Se o carregamento fosse invertido, isto é, o tema filho depois do tema pai, a execução passaria por dentro do if, já que a função ainda não existe e, no seu functions.php, ela causaria um erro de execução (Cannot redeclare nome_da_funcao()), por estar duplicada.
Repare na necessidade do tema pai usar a função function_exists, se ele não fizer isso você não pode declarar a função no seu functions.php ou causará o erro da mesma forma.

Mas se o functions.php do tema filho é carregado primeiro, como é que eu vou colocar minhas coisas para aparecerem depois???

Não leu o post que eu indiquei ali em cima, né? Através do mecanismo de hooks do WP você pode passar por parâmetro a prioridade da sua função: passe uma prioridade mais alta e sua função será executada depois. Vamos falar mais sobre isso mais para frente.

Funções do WordPress para tema pai e para tema filho

Em funções que se referem a temas, o WordPress segue a convenção de que template aponta para o tema pai e stylesheet para o tema filho. Se não houver tema filho os dois apontam para o mesmo lugar.

E assim segue. Uma outra função que pode ser útil é a is_child_theme().

A função get_template_part tentará sempre usar o arquivo do tema filho primeiro. Se ele não existir, o WordPress procura no tema pai.

Não altere o código do tema pai, mas entenda como ele funciona

Não é porque você não pode alterar o código que você não deve olhar para ele. Não faça do código uma caixa-preta, mas entenda como ele funciona e veja como ele inclui as coisas, isso vai ajudar muito a resolver todo o tipo de problema.

Incluindo arquivos CSS

Fazendo o teste com o tema Twenty Seventeen, nativo do WordPress, já vemos que precisamos atuar urgentemente: o site fica completamente sem estilo.

A razão disso é a forma como o style.css do tema é incluído. No tema pai, na função associada ao hook wp_enqueue_scripts, que tipicamente inclui os arquivos CSS e JS, temos:

wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );

Quando não há tema filho, a função get_stylesheet_uri() aponta para o style.css do tema ativo, lembra? Ao criarmos e ativarmos um tema filho, a função get_stylesheet_uri() passa a apontar para o style.css do tema filho e o estilo do tema pai não é mais adicionado.

Explicando de outra forma, o Twenty Seventeen inclui somente o style.css apontado pela função get_stylesheet_uri(). Quando não há tema filho esta função aponta para o style.css do tema ativo e tudo fica OK. Quando há um tema filho, a função get_stylesheet_uri() aponta para o style.css do tema filho e aí nada mais aponta para o style.css do Twenty Seventeen.

Se o código do Twenty Seventeen fosse como o a seguir, os dois style.css seriam incluídos:

wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
if ( is_child_theme() ) {
    wp_enqueue_style( 'twentyseventeen-style-child', get_stylesheet_uri() );
}

Ele não é dessa forma para não obrigar todo mundo a incluir o style.css dele e também para não ter mais um if ali à toa.

Adicionando o style.css do tema pai

No functions.php do tema filho temos então que adicionar novamente o style.css do tema pai, ou seja, no nosso caso temos que incluir o style.css do Twenty Seventeen através do nosso tema. Vamos usar o mesmo hook wp_enqueue_scripts, no nosso functions.php:

function twentyseventeen_child_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );

No nosso functions.php estamos dizendo para o WordPress então, que execute a nossa função twentyseventeen_child_enqueue_styles quando for acionada a action wp_enqueue_scripts. Nesta função adicionamos de volta o style.css do Twenty Seventeen e, assim, o estilo do site já parece certo novamente.

Neste momento temos o tema filho chamando o style.css do tema pai e o tema pai chamando o style.css do tema filho. Vamos lá, no tema filho, ou seja, o nosso, apontamos para get_template_directory_uri() . '/style.css', que está no tema pai. No Twenty Seventeen tem get_stylesheet_uri(), que aponta para o tema filho. O functions.php do nosso tema é carregado primeiro, ou seja, o style.css do Twenty Seventeen acaba sendo incluído primeiro. Assim, “por sorte”, temos a ordem ideal de inclusão, que é o style.css do Twenty Seventeen primeiro e o nosso vindo depois.

Respire fundo e releia o último parágrafo. Você verá que ele faz sentido.

Incluindo um CSS no final da fila

Agora vamos supor que queremos incluir um arquivo CSS diferente nisso tudo, o teste.css. Vamos supor ainda que ele precisa estar depois dos outros arquivos CSS, para sobrescrever algum atributo. Se alterarmos nossa função para

function twentyseventeen_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '/teste.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );

O arquivo será incluído, mas estará antes do style.css do nosso tema. Recapitulando, como nosso functions.php é carregado primeiro, na lista de CSS teremos o style.css do Twenty Seventeen, carregado com get_template_directory_uri() . '/style.css' na nossa função, logo depois o teste.css e mais pra frente o nosso style.css, incluído pelo próprio Twenty Seventeen.

Podemos usar duas soluções:

Incluir um parâmetro de dependência no wp_enqueue_style:

function twentyseventeen_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '/teste.css', array( 'twentyseventeen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );

Dessa forma o WordPress verifica se o arquivo tem alguma outra dependência e espera para imprimir a tag só depois que ela for resolvida. Com o array( 'twentyseventeen-style' ) ali, dizemos para o WordPress que o nosso estilo com nome 'teste' precisa estar depois do estilo com nome 'twentyseventeen-style', sendo “nome” o primeiro parâmetro que a função wp_enqueue_style recebe.

Alterar a prioridade da nossa função na action:

function twentyseventeen_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'teste', get_stylesheet_directory_uri() . '/teste.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles', 99 );

Repare no 99 ali. Dessa forma nossa função é executada depois da função do tema pai, que é incluída sem esse parâmetro e, por isso, recebe prioridade 10. Esta solução é muito útil, especialmente para inclusão de javascripts. Falei que ler aquele post sobre hooks ajudaria, né?

Temas filhos na vida real

Na vida real usamos tema filho para sobrescrever algum arquivo da hierarquia de templates. O single.php do seu tema pai precisa ser modificado? Copie para o tema filho e altere o que precisar. A página inicial do seu site precisa ser alterada? Copie e altere. E assim por diante. Infelizmente, nem sempre é tão fácil.

O arquivo x.php do meu tema filho não sobrescreve o do pai

O WordPress só cuida dos arquivos que estão na hierarquia de templates. Se seu tema pai não for bem estruturado, você terá problemas para sobrescrever o código.

Por exemplo, você comprou um tema que exibe a data e hora da publicação dos posts e você precisa sumir com isso. Achou que no tema pai este código está em includes/post-meta.php, copiou essa estrutura para o tema filho, alterou e nada aconteceu. Seu tema pai foi mal feito.

Lembra que eu falei que era preciso entender como seu tema pai funcionava? Então, esse é um bom momento. Você precisará encontrar como o arquivo post-meta.php é adicionado. O WordPress está chegando em qual arquivo da hierarquia de templates? O single.php, por exemplo? Se nosso arquivo hipotético post-meta.php estiver sendo chamado com um include do php, será preciso ter uma versão do single.php no tema filho também, para que você possa alterar essa chamada, usando get_template_part preferencialmente.

Algumas vezes o caminho acabará ficando longo. Será preciso copiar muitos arquivos para o tema filho, para alterar só uma besteirinha. Mesmo assim, não tome o caminho fácil, tome o caminho certo. Alterar o tema pai não é uma opção, lembra?

Quando posso instalar e criar um tema filho?

Preferencialmente no começo do projeto, mas nunca é tarde. O único conselho aqui é, se já estiver com alguma coisa configurada, faça um backup. Alguns temas simplesmente apagam todas as suas configurações se são trocados por outros e, como a troca para o tema filho não deixa de ser uma troca de tema, você pode acabar perdendo algumas horas de trabalho.

Gostou do texto? Tem alguma sugestão? Comente aqui embaixo e assine a newsletter aqui do lado para receber os textos novos!