Categorias: WordPress

Como criar um Tema Filho no WordPress

O Tema Filho (Child Theme) no WordPress permite que você faça edições no tema pai sem perder as funcionalidades dele. E quando o tema pai tiver atualizações, você pode atualizar sem preocupação em perder as alterações que você fez.

O que é tema pai?

É o tema principal, com todos os arquivos necessários para que o tema funcione corretamente no WordPress.
Se você editar o código de um tema principal, e depois atualizar ele quando tiver uma atualização disponível, você perderá todas as alterações que fez.

Quando usar um Tema Filho?

Quando você comprar um tema pronto e quiser fazer mudanças nele, seja alterar cores do CSS ou alguma função em específico ou dar aquele seu toque no tema para diferenciar um pouco, o ideal é que você gere um tema filho e faça alterações nele.
Assim, quando o tema que você comprou tiver atualizações (que geralmente costumam ter), você pode atualizar e não vai perder as alterações que fez, e nem ficar com um tema desatualizado.

Também é ótimo para quando você quer usar um tema básico de base e fazer diversas mudanças nele. Por exemplo, você pode usar um dos temas padrões do WordPress como base, e então criar um tema filho e mudar tudo o que desejar.

A grande vantagem do tema filho é poder atualizar o tema principal sem perder as alterações que foram feitas.

Como criar o Tema Filho

Vamos usar como exemplo o tema Twenty Twenty-One, padrão do WordPress.

Quando você faz download do tema e descompacta o arquivo zipado, o nome da pasta dele é twentytwentyone

Então o nome da pasta do tema filho será twentytwentyone-child

No FTP do seu site, na pasta de temas do WordPress (wp-content/themes), deverá ter o tema twentytwentyone e twentytwentyone-child que você criou.
Sempre o tema filho será em uma pasta de mesmo nome do tema pai, seguido de -child.

Se a pasta do tema pai tiver o nome simples, o tema filho será simples-child.
Se a pasta do tema pai for medico, o tema filho será medico-child.

E precisa ter o tema pai e tema filho na pasta de temas (wp-content/themes), para que o tema filho funcione corretamente.
Se tiver só o tema filho, não irá funcionar.

Arquivos que o tema filho precisa ter

No tema filho tem 1 arquivo que é necessário, para que o tema funcione.
O style.css.

Criando o arquivo style.css do tema filho

No arquivo style.css você adiciona no início esse código:

/*
Theme Name:   Twenty Twentyone Child
Theme URI:    http://example.com/twentytwentyone-child/
Description:  Twenty Twentyone Child Theme
Author:       John Doe
Author URI:   http://example.com/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

É obrigatório que no código acima não falte o Theme Name e Template.
No campo Template, no código acima, é adicionado o nome da pasta do tema pai.

Abaixo desse código no arquivo style.css, você pode adicionar o CSS que quiser para editar seu tema.
Após fazer isso, é só ativar o tema filho, indo no painel do WordPress em Aparência.

Criando o arquivo functions.php no tema filho

Dependendo do tema pai, pode ser necessário que você crie no tema filho o arquivo functions.php e adicione o código que irá carregar o style.css do tema filho.
O ideal é que o tema pai já tenha essa função, para carregar o css quando for o caso, mas dependendo do tema pode ser que não tenha sido criado pensando nisso.

Se você tentar ativar o tema filho e aparecer erro no painel, pode ser esse o problema. O style.css não está sendo carregado.
Nesse caso, crie um arquivo functions.php e dentro dele adicione o código abaixo:

function twentytwentyonechild_enqueue_styles() {
    //child style version
    $child_version = wp_get_theme()->get('Version');

    //parent style handle
    $parent_style = 'twentytwentyone-style';

    //load child theme style
    wp_enqueue_style( 'twentytwentyonechild-style', get_stylesheet_uri(), array( $parent_style ), $child_version );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyonechild_enqueue_styles' );

Feito isso, adicione o arquivo functions.php dentro da pasta do tema filho.
E então vá no painel do WordPress em Aparência e tente novamente, ativar o tema.

Editando o tema, no tema filho

Agora que o tema filho está criado e funcionando, você faz as alterações nele.
Você pode editar o style.css a vontade, também pode adicionar funções diversas no arquivo functions.php.

Além disso, você pode copiar os outros arquivos do tema pai, para o tema filho, e editar eles no tema filho.

Então se você quiser editar o arquivo da página do post por exemplo, você copia do tema pai o arquivo single.php, para a pasta do tema filho, e então faça as alterações nesse arquivo, no tema filho.

E quando tiver atualizações para o tema pai, é só atualizar que não deletará as alterações que você fez no tema filho.
Mas ainda assim é sempre bom fazer um backup do site antes de fazer atualizações, para evitar outros problemas.