Dopo aver scelto con cura il tema più adatto al tuo sito WordPress ed averlo installato, il passo successivo che dovresti fare è quello di creare un child theme.

Che cos’è un child theme?

Un child theme è un tema che eredita le funzionalità del parent theme, ovvero del tema che hai acquistato (o scaricato dal repository WordPress) ed installato. Il child theme ti permette di integrare e personalizzare tali funzionalità ed è consigliato crearlo se intendi apportare delle modifiche al tuo sito.

Perchè devo creare un child theme?

Per non perdere tutte le personalizzazioni che hai apportato al tuo sito quando esegui un aggiornamento del tema. Utilizzando un child theme puoi, infatti, cambiare lo stile e il layout di un parent theme senza modificare il codice originale di quest’ultimo. In questo modo, quando verrà rilasciato un aggiornamento per il parent theme non perderai le modifiche effettuate. L’aggiornamento di un tema WordPress comporta infatti la sostituzione di tutti i file che compongono il tema e il conseguente annullamento di tutte le eventuali personalizzazioni effettuate nel foglio di style (style.css) e nei file .php.

È sempre necessario creare un child theme?

No. Sebbene venga spesso considerato indispensabile, in realtà il child theme non è necessario in ogni caso, pur avendo innegabili vantaggi. Se le tue esigenze si limitano a piccole personalizzazioni tramite css (modifiche alla palette colori, dimensioni font, aumento dei margini o dei padding…) la maggior parte dei temi prevede già nel loro pannello uno spazio per il custom css. Inoltre, recentemente WordPress ha aggiunto proprio nel personalizzatore la possibilità di inserire CSS Aggiuntivo senza quindi dover ricorrere alla creazione di un child theme.
Attenzione però: questo codice css personalizzato non verrà inserito in un foglio di stile ma sarà salvato nel database del tuo sito. In ogni caso, sia che utilizzi lo spazio messo a disposizione dal tuo tema che quello presente nel personalizzatore di WordPress, non perderai nessuna modifica quando aggiornerai il tema.
Ricorda però di non modificare mail il foglio di stile (style.css) del tema originale.

Lo spazio per il CSS Aggiuntivo nel personalizzatore di WordPress

Se invece, oltre al css, intendi apportare modifiche strutturali al tuo tema e andare ad agire sui file php, allora non potrai fare a meno del child theme.

Non è necessario, infine, creare un child theme in tutti quei casi in cui esso ti venga già fornito dagli sviluppatori del tema che hai installato oppure se hai acquistato un vero e proprio child theme (per esempio tutti i child theme di Genesis).

Come creare un child theme

Per creare un child theme al tuo tema WordPress esistono due modalità: una molto semplice (base) ma meno efficiente e una più articolata (avanzata) che garantisce un minore tempo di caricamento dei tuoi fogli di stile. Vediamole entrambe.

Metodo 1 – Base

Il metodo più semplice, sempre funzionante, ma superato perché meno efficiente nei tempi di caricamento, è quello che prevede che il tuo child theme sia composto da un unico semplice file: style.css.

Decidi il nome che vuoi dare al tuo child theme (può essere quello del tuo brand, purché sia breve) e crea sul tuo pc una cartella con questo nome.  All’interno di questa cartella crea un file di testo e incolla il seguente codice:

/*
 Theme Name: NewYork
 Description: Tema Child di Divi
 Author: Il tuo nome e cognome
 Author URI: http://iltuosito.com/
 Template: Divi
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 */ @import url("../Divi/style.css"); 
/* Theme customization starts here– */ 

Questo esempio mostra la creazione di un child theme che ho chiamato NewYork per il tema Divi, ma vale per qualunque tema, premium o free, che hai installato sul tuo sito. I campi davvero fondamentali sono Theme Name (il nome del child theme) e Template (il nome esatto, attenzione alle maiuscole, del parent theme: è il nome della directory in cui si trova il parent-theme). Infine la stringa @import url(“../Divi/style.css”); è quella che collega il tuo child theme al suo parent. Naturalmente dove io ho messo Divi tu dovrai inserire in nome del tuo parent theme.

Una volta creato questo file di testo salvalo come style.css (sì, l’estensione deve proprio essere .css, non sbagliarti e attenzione che il tuo editor di testo non aggiunga .txt alla fine!).

Ora comprimi la cartella ottenendo un file zip, per esempio newyork.zip

Vai nella bacheca del tuo sito, clicca su Aspetto -> Temi -> Aggiungi Nuovo. Carica il file zip. che hai appena creato e attivalo. Se tutto è stato fatto bene un messaggio ti avviserà che il child theme è stato correttamente installato.

Ora puoi apportare tutte le modifiche allo stile del tuo tema senza rischiare di perdere nulla né sovrascrivere il tema che hai acquistato. Se sarà necessario potrai sempre aggiungere nella cartella del tema child altri file, quali function.php, footer.php o qualunque file necessiti di personalizzare.

Metodo 2 – avanzato

Il metodo 1 per la creazione di un child theme è sicuramente il più semplice ma non quello più consigliato, poiché un po’ più lento nel caricamento dei fogli di stile e quindi del tuo sito in generale.

La creazione ottimale di un child theme richiede qualche passaggio un più e qualche riga di codice php. Se non te la senti, segui tranquillamente il metodo 1, ma non scoraggiarti: prova a seguire questa guida.

In questo caso per creare un child theme necessiti di:

• cartella child theme
• style.css
• functions.php

Crea quindi, come sopra, una cartella sul tuo pc con il nome del child theme: esempio newyork.

All’interno della cartella apri un file di testo, salvalo come style.css e incolla il seguente codice:

/*
 Theme Name: NewYork
 Description: Tema Child di Divi
 Author: Il tuo nome e cognome
 Author URI: http://iltuosito.com/
 Template: Divi
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Ora apri un nuovo file di testo, salvalo come functions.php e all’interno incolla il seguente codice:

<?php
function my_theme_enqueue_styles() {

  $parent_style = 'divi-style';
  $child_style = 'newyork-style';

  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' );

In questo codice ciò che devi modificare è:

• la variabile $parent_style inserendo, al posto di divi-style, nomedeltuotema-style (verifica sempre nel codice sorgente questa stringa, come nell’immagine sotto)
• la varibile $child_style sostituendo quello che si trova tra gli apici con nomedeltuochildtheme-style

A questo punto puoi salvare il tuo file functions.php e comprimere la cartella del tuo child-theme in formato .zip.

Come nel metodo 1, vai nella bacheca del tuo tema, clicca su Aspetto -> Temi -> Aggiungi Nuovo e carica la tua cartella zippata. Attiva il child theme al termine del caricamento e verifica che tutto funzioni correttamente.

Esempio di identificazione della variabile $parent_style tramite codice sorgente

Attenzione: La variabile $parent_style la puoi individuare quasi sempre in questo modo ma alcuni temi possono fare eccezione. In caso di problemi verifica la documentazione del tuo tema o contatta il supporto.

Come personalizzare l’anteprima del tuo child-theme?

Tutto quello che abbiamo detto finora è finalizzato esclusivamente alla creazione di un child theme funzionante e funzionale.

Ma anche il dettaglio grafico ha la sua importanza e se vuoi evitare di vedere nella tua bacheca un child theme con questo aspetto:

non devi far altro che creare una immagine con dimensioni 1200x900px e salvarla come screenshot.png o .jpg, quindi caricarla nella cartella del tuo child theme tramite FTP.

Ecco la differenza:

N.B. Tutto il procedimento che illustra con precisione come creare un child theme per WordPress lo puoi trovare nel Codex di WordPress.org.