Temas Filho

Temas Filho

Um tema filho (Child Theme), nada mais é do que um sub-tema que pode ser criado por você ou por outras pessoas, cuja principal função é herda estilos e funcionalidade existentes no tema pai (parent theme).

Uma das principais razões em se criar temas filho, é que podemos ter a capacidade de fazer modificações em um tema principal, sem precisar alterar diretamente seus arquivos principais.

Isso faz com que as alterações realizadas no tema pai não sejam perdidas quando houverem atualizações nesse tema.

Existem algumas vantagens em se criar temas filho, vejamos:

Talvez a necessidade de criação de um tema filho, não esteja fazendo muito sentido para você neste primeiro momento diante de tudo aquilo que vimos desde o início desta jornada.

Pois você como desenvolvedor de temas, se quiser fazer alterações, você pode fazer backups das versões antigas e atuais, evitando assim que você perca suas alterações, não é verdade?

Sim, totalmente verdade. Sendo assim, para quem é indicado a criação de temas filho?

A criação desses tipos de temas, é muito comum com pessoas que baixam ou compram um determinado tema, e não ficam satisfeitos com alguma coisa, ou acreditam que novos layouts ou funcionalidades poderiam ser implementados.

De modo que essas pessoas, se aventuram em modificar o código fonte da aplicação, de modo a criar uma versão alternativa do tema principal.

Antigamente, essas pessoas faziam isso diretamente no código principal do tema, mas com as novas atualizações do WordPress, a funcionalidade de temas filho foi adicionada ao jogo, facilitando um pouco esses tipos de modificações.

Pois a partir de agora, os usuários poderiam modificar um tema em questão, sem precisar modificar o tema principal.

Você como desenvolvedor de temas do WordPress, já tem habilidades o suficiente para modificar temas de terceiros, sabia disso? 

E com os conhecimentos que você vai adquirir nesta lição, já será capaz de criar temas filhos 😆

Além disso, caso desejar, você pode disponibilizar e até mesmo vender novos layouts e funcionalidades que acoplam seu tema principal, por meio de temas filho.

É o caso dos desenvolvedores de temas que criam um tema pai, e que também oferecem novos layouts e funcionalidaes por meio de temas filho.

Observação: Por razões óbvias, o tema que você está criando deste o início desta jornada, não precisa de um tema filho, pois é você mesmo que está gerenciando e criando ele.

Criando um Tema Filho

Nesta lição eu usarei o nosso tema pai (wp-micilini) que estamos criando desde o início da nossa jornada.

Criando a pasta do tema filho

Para criar um tema filho, você vai precisar criar uma nova pasta dentro de wp-content > themes, seguindo a estrutura: textdomain-child (no meu caso eu criei a pasta com o nome de wp-micilini-child, uma vez que meu textdomain é wp-micilini).

Como convenção, criamos uma pasta com o mesmo nome do tema principal adicionando o -child no final.

Adicionando o arquivo style.css

Assim como fizemos na pasta do tema pai, você vai precisar criar um arquivo chamado style.css dentro da pasta filho (wp-micilini-child):

Veja o conteúdo que foi criado dentro do style.css:

/*
Theme Name: WP Micilini Child
Template: wp-micilini
Version: 1.0
*/

Theme Name: é o nome do tema filho que acabamos de criar.

Template: é o nome do Text Domain do tema pai. Aqui você deve informar o nome da pasta referente ao tema que vamos modificar. (wp-micilini).

Version: é a versão do tema filho que estamos criando.

Só com o argumento Template, o WordPress já é capaz de reconhecer e fazer uma ligação entre esses dois temas.

No painel administrativo do WordPress, já seremos capazes de visualizar o tema filho em questão:

Ativando ele, a página principal do tema será carregada, a única diferença é que não será carregado nenhum estilos css.

Para corrigir esse problema, temos que importar o style.css do tema pai para dentro do tema filho, e para isso precisamos do functions.php.

Criando o functions.php

Ainda dentro da pasta raiz do seu tema filho, você vai precisar criar um novo arquivo chamado functions.php:

Que contenha o seguinte código:

<?php

function wpmicilini_child_scripts(){
 wp_enqueue_style('wpmicilini-style', get_template_directory_uri(). '/style.css');//Style.css do tema pai
 wp_enqueue_style('wpmicilini-child-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));//Style.css do tema filho
}

add_action('wp_enqueue_scripts', 'wpmicilini_child_scripts');

Observe que seguimos quase a mesma estrutura do functions.php do tema pai, a diferença se dá na troca de alguns nomes de funções e identificadores.

Observação: O primeiro wp_enqueue_style() precisa conter o mesmo identificador do tema pai como primeiro argumento.

Observação: O segundo wp_enqueue_style() vai carregar o style.css do tema filho, de modo que ela possa sobrescrever alguns estilos existentes no tema pai.

É importante ressaltar que o tema filho é considerado um outro tema para o WordPress, logo, suas configurações feitas no Theme Customizer serão perdidas, fazendo com que você precise configura-las novamente no functions.php do tema filho.

Não é uma obrigação importar o style.css do tema pai dentro do tema filho, só fizemos isso porque queríamos reaproveitar algunss estilos do tema pai, evitando assim repetição de código.

Criando os modelos de template

Além das modificações de estilo que você pode fazer no tema filho, você ainda pode criar os modelos de template que você deseja modificar dentro da pasta raiz do tema filho.

Para isso, você pode fazer uma copia de um dos modelos de template existentes no tema pai, a fim de modifica-los dentro do tema filho.

Por exemplo, vamos pegar o arquivo 404.php do tema pai:

<?php
/**
 * O template para a página 404
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

get_header(); 

?>

<h1><?php _e('Página não encontrada!', 'wp-micilini') ?></h1>
<p><a href="esc_url(home_url('/'))"></a></p>

<h2><?php _e('Que tal fazer uma busca?', 'wp-micilini') ?></h2>
<?php get_search_form(); ?>

<?php the_widget('WP_Widget_Recent_Posts', array('title' => 'Latest Posts', 'number' => 4)); ?>

<?php
get_footer();
?>

Dentro da pasta raiz do tema filho, vamos criar um novo arquivo chamado 404.php:

E dentro do conteúdo, vamos inserir os mesmos códigos do arquivo 404.php do tema pai, a diferença é que não iremos importar o cabeçalho, nem o rodapé:

<?php
/**
 * O template para a página 404
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

?>

<h1><?php _e('Página não encontrada!', 'wp-micilini') ?></h1>
<p><a href="esc_url(home_url('/'))"></a></p>

<h2><?php _e('Que tal fazer uma busca?', 'wp-micilini') ?></h2>
<?php get_search_form(); ?>

<?php the_widget('WP_Widget_Recent_Posts', array('title' => 'Latest Posts', 'number' => 4)); ?>

A partir de agora, a página 404 do tema filho carregará sem cabeçalho e sem rodapé 😅

Observação: Como o tema filho está conectado com o tema pai, caso o WordPress não encontre o modelo de template necessário para abrir uma URL no tema filho, ele vai procurar por esse arquivo dentro da pasta raiz do tema pai.

Para entender um pouco mais sobre temas filho, consulte a documentação do WordPress.

Fora isso, é só usar a sua criatividade para fazer modificações no tema filho.

Conclusão

Nesta lição você aprendeu a como criar temas filho, e como fazer modificações neles 🙃

Até a próxima!