Quando dobbiamo aggiornare un tema, tutti gli elementi che lo compongono (file CSS, PHP, immagini, ecc) vengono sovrascritti dalla nuova versione del tema.

In questo caso, ad ogni aggiornamento, perderemmo le personalizzazioni eventualmente apportate al tema.

Anche per questo, oltre che per avere un maggiore controllo sulle modifiche apportate al tema, può essere molto utile la creazione e l’utilizzo di un Child Theme o Tema Figlio: è un tema che eredita layout e funzionalità di un altro tema, chiamato Tema Principale o Tema Genitore (Parent Theme), e che consente appunto di modificare e personalizzare gli aspetti grafici del sito senza intaccare file e caratteristiche del Tema Principale.

Come creare un Child Theme?

Ipotizziamo di creare il Child Theme del tema Twenty Sixteen (deve essere il tema attivo sul sito).

Innanzitutto creiamo all’interno della cartella themes del sito (via FTP) la cartella del tema Child, nominandola con il "nome del tema Genitore"–child: nel nostro esempio twentysixteen-child .

All’interno di questa cartella l’unico file fondamentale è il foglio di stile del tema utilizzato. In genere questo file si chiama style.css, come anche nel caso del tema Twenty Sixteen (nell’immagine sottostante si può notare il file style.css all’interno della cartella del tema Twenty Sixteen: questo file definisce lo stile del tema).

Con un editor di testi, come NotePad++, occorre creare un file nel formato css e inserire innanzitutto una serie di righe che descrivono il tema Child e definiscono in particolare qual è il foglio di stile principale (del tema Genitore).

Nel caso del tema Child di Twenty Sixteen occorre inserire nel file le seguenti righe:

/*
Theme Name: Twenty Sixteen Child
Description: Child Theme del tema Twenty Sixteen
Author: wpcorsi
Author URI: http://www.tuosito.it/
Template: twentysixteen
Version: 0.1
*/

@import url("../twentysixteen/style.css");

Le righe obbligatorie sono:

• Theme Name => definiamo il nome del tema Child, che comparirà anche a livello amministrativo (nella sezione dei Temi);
• Template => dobbiamo indicare il nome del tema Genitore, riprendendolo in modo preciso dal nome della cartella (via FTP);
• @import url => dove definiamo il percorso del foglio di stile css del tema Genitore che deve essere caricato; occorre prestare attenzione ad inserire il percorso corretto, utilizzando gli apici dritti e non curvi e scrivendo dopo due puntini il percorso del file css partendo dalla cartella del tema Genitore.

Opzionalmente possiamo inserire:

• Description => si tratta di una breve descrizione del tema Child;
• Author => qui indichiamo il nome dell’autore del tema Child;
• Author URI => qui possiamo indicare il link del sito web dell’autore;
• Version: 0.1 => eventualmente possiamo indicare anche la versione del tema Child.

Salviamo quindi il file nominandolo style.css, quindi carichiamolo all’interno della cartella del tema Child (nell'esempio all'interno di twentysixteen-child).

Tornando nella sezione amministrativa dei Temi vedremo comparire anche il tema Child appena creato.

Come si nota dall’immagine sovrastante non è presente un’immagine in anteprima del tema Child. Per visualizzarla, inseriamo un’immagine (dimensioni 300x250 px e nome screenshot.jpg) all’interno della cartella del tema Child.

Aggiornando la pagina della sezione dei Temi vedremo così l’immagine in anteprima del tema.

Attiviamo quindi il tema Child, in modo da utilizzarlo come tema del sito WordPress.

Accedendo sul front-end del sito, se tutto è stato eseguito correttamente, non noteremo differenze rispetto al tema Genitore, perché il team Child carica il foglio di stile del tema Genitore.

Modifiche al foglio di stile CSS

Se volessimo apportare modifiche allo stile basterà aggiungere nel file style.css del tema Child le nuove regole di stile. In questo caso, a seguito di aggiornamenti del tema Genitore, le modifiche apportate non verranno resettate.

Inserendo ad esempio la regole di stile mostrata nell’immagine sovrastante i link del menu principale saranno blu e non più neri. Lo stesso varrà ovviamente per altre regole di stile.

Modifiche ai file PHP

Discorso simile vale per i file php del tema. Se volessimo modificare un determinato file php dobbiamo innanzitutto copiare quel file presente nella cartella del tema Genitore e inserirlo all’interno della cartella del Child Theme.

Ipotizziamo ad esempio di voler personalizzare la testata del tema: dovremo intervenire sul file header.php. Copiamo il file presente nella cartella twentysixteen e incolliamolo nella cartella twentysixteen-child.

Intervenendo sulle righe di codice del file header.php del Child Theme apporteremo le personalizzazioni al layout grafico del sito, nello specifico alla cosiddetta testata, e tali modifiche non verranno resettate a seguito dei normali aggiornamenti del tema Genitore.