Crea un Child Theme WordPress e scopri come ti sarà utile

Ti è mai capitato di voler modificare una piccola cosa di un tema installato per poi vedere le tue modifiche inesorabilmente perse all’aggiornamento? Oppure sei più un tipo da NON AGGIORNARE MAI?

Qualunque sia stata la tua risposta, oggi scoprirai come potrai risolverti un sacco di problemi grazie alla creazione di un child theme!

Fino a non troppo tempo fa tutto il mio interesse era rivolto verso i temi WordPress. Non mi sono mai perso un loro aggiornamento, ti ho consigliato quali starter theme ritengo migliori e ho anche pubblicato un corso dedicato per aiutarti a scoprire come crearne uno tutto tuo.

Per dare un po’ di varietà abbiamo anche iniziato a parlare dei plugin e del loro sviluppo, ma c’è qualcos’altro che non abbiamo ancora trattato e che ritengo incredibilmente interessante per velocizzare i tempi di sviluppo; soprattutto se sei interessato alla compatibilità con i futuri aggiornamenti.

Bada bene, in questo contesto non sto affrontando l’argomento aggiornamenti dal punto di vista del core WordPress, mi aspetto che tu ormai sappia molto bene che non devi modificare direttamente il cuore di questa piattaforma e che piuttosto ti dedichi allo sviluppo utilizzando i suoi potenti Hook.

L’aggiornamento al quale faccio riferimento è proprio quello relativo ai temi perché, nel caso questo ti fosse sfuggito, anche i temi si aggiornano 😉 Ma entriamo nel vivo della questione prima di proseguire con altri esempi…

Se non ti è mai capitato di installare un tema dal repository WordPress.org, di utilizzare un tema acquistato da ThemeForest o altri marketplace, molto probabilmente non sei neanche a conoscenza del fatto che i temi hanno un sistema di aggiornamento. Tranquillo che è una cosa successa a tutti, anche io non lo sapevo fino a qualche anno fa 😉

Anzi, se proprio devo dirti tutto, ho sempre snobbato un pochino i Child Theme perché li vedevo come i fratelli minori dei temi se confrontati alle possibilità che avevo a disposizione sviluppando un tema tutto mio da zero. Sai che c’è?

Mi sono sempre sbagliato, e di brutto!

Mi sbagliavo perché nella mia ignoranza non avevo ancora capito la loro importanza strategica, non ne avevo capito le potenzialità e soprattutto non mi ero mai trovato di fronte ad un sistema di sviluppo intelligente e che richiedesse proprio l’uso di un child theme per applicare delle personalizzazioni…

Che cosa sono i Child Theme?

Rispondiamo subito a questa domanda: che cosa è un child theme? È un tema completo? È un tema che presenta soltanto uno schema colore diverso dall’originale?

Niente di tutto questo. O per dirla meglio, i precedenti punti non rappresentano una descrizione completa ma soltanto una parte della magia.

Un child theme è un tema che prende in eredità gli stili e le funzionalità del tema padre e che ci permette di poter applicare le nostre modifiche senza dover metter mano a nessun file del tema principale, tutto quello che dobbiamo fare è sovrascriverli in maniera intelligente.

Il concetto è molto semplice a dir e la verità, ricordi che fino a qualche tempo fa ti ho consigliato di selezionare il tuo starter theme preferito e di iniziare a modificarlo a seconda delle tue esigenze? Ebbene in questo contesto si parte sempre da un tema principale (il tema padre o parente), ma al posto di distruggere tutto si inizia modificando soltanto le pagine e le sezioni che necessitiamo per portare a termine il progetto sul quale stiamo lavorando.

Sia ben chiara una cosa, se sei alle prime armi, il mio consiglio rimane sempre quello di iniziare da uno starter theme perché, grazie a questi strumenti, sarai in grado di approfondire le tue conoscenze in maniera incredibile! Avere uno starter theme a propria disposizione ci permette di confrontarsi con le strutture e le logiche base di WordPress, di capirne la logica e di diventare dei veri sviluppatori di questa piattaforma.

Come vedremo a breve, i child theme sono ottimi strumenti che aiutano la vita di uno sviluppatore esperto mentre molto spesso limitano la fantasia di quelli che stanno muovendo i primi passi perché con la grande mole di action e filter hook non si entra a contatto diretto con il codice WordPress, piuttosto con quello sviluppato ad hoc dallo sviluppatore di turno.

Insomma, spero che adesso sia chiara la differenza e che tu abbia scoperto i motivi per i quali, in certi contesti, è meglio utilizzare uno starter theme mentre in altri un child.

Perché sono utili i Child Theme?

C’è poco da dire su questo aspetto, i child theme sono utili!

Come descritto precedentemente, grazie a queste strutture puoi prendere gli elementi di un tema di partenza e modificarli come meglio credi. Facciamo un esempio basandoci proprio sul tema Twenty Fifteen che troviamo ancora installato nelle ultime versioni WordPress.

Questo è sicuramente un tema pulito che si focalizza sui contenuti ma se decidi di modificarlo, magari per creare una homepage personalizzata, sono sicuro che la prima cosa che ti è venuta in mente di fare è creare una pagina front-page.php, in fin dei conti è proprio quello che abbiamo imparato nella lezione dedicata di Crea un il tuo primo tema WordPress…

La cosa brutta è che faresti un grande errore!

Anche se stai seguendo la gerarchia dei file WordPress, in questo contesto stai modificando un tema che non è di tua proprietà, un tema il cui creatore potrebbe decidere di aggiornare per applicare dei bugfix o aggiungere nuove funzionalità. Sai che cosa accadrebbe se decidi di premere il pulsante aggiorna?

Perderesti tutte le tue modifiche!

Anche se ti ho sempre consigliato di fare un backup completo del tuo sistema, anche se sai come ripristinarlo correttamente, sono sicuro che non desideri perdere delle ore a ripristinare la tua installazione per un semplice aggiornamento, vero? E cosa succede se invece è il tuo cliente ad aggiornare il tema senza un sistema di backup? Quelli sì che sarebbero dolori…

Modificare i file principali di un tema ci assicura di avere dei problemi al prossimo aggiornamento.

Ebbene in questo contesto i child theme ci vengono in aiuto perché ci permettono di aggiornare il tema principale (in questo esempio il Twenty Fifteen) senza preoccuparci delle conseguenze. Magari lo sviluppatore del tema avrà cambiato qualche funzione, qualche regola nel CSS che modifica leggermente il nostro child theme, ma quello che è sicuro è che non perderemo le nostre modifiche!

Ecco la prima caratteristica che ha decretato il successo dei child theme, possiamo modificare qualsiasi tema WordPress senza preoccuparsi di perdere le nostre modifiche!

Come creo un Child Theme

Come ti dicevo all’inizio di questo articolo articolo, non sono mai stato un grande utilizzatore di questa soluzione ma mi è sempre piaciuto approfondire le mie conoscenze WordPress, e iniziare con uno starter theme è sempre stata per me la via più facile. A breve ti spieghero come mai ho fatto questo cambio di direzione ma prima di questo voglio confessarti che da quando ho preso questa scelta la mia vita da sviluppatore si è enormemente semplificata.

È mio dovere spiegarti come sia possibile creare un child theme tutto tuo, in fin dei conti siamo all’interno di un blog dedicato agli sviluppatori web, giusto?!? E allora scopriramo come sia possibile creare un child theme! A parte preparare le solite cose come un ambiente di sviluppo, un editor di testo e magari un preprocessore ci sarebbe qualcos’altro che ci potrebbe servire, hai mica idea cosa possa essere?

Un semplice foglio di stile!

Eh sì, una volta creata la cartella per il nostro child theme non sarà necessario ricreare l’intera struttura del tema perché tutto quello che ti serve per creare il tuo nuovo child theme è soltanto un file con estensione .css, strutturato in un modo un po’ particolare, ma pur sempre di CSS si tratta.

Facciamo un esempio pratico. Come detto prima, stiamo usando il tema Twenty Fifteen ed abbiamo bisogno di cambiare il font e il colore dei nostri titoli. Fino a poco tempo fa, ovvero prima di conoscere l’esistenza dei child theme, quello di cui avrei avuto bisogno era scoprire il selettore CSS per il titolo e modificare direttamente il file CSS del tema di partenza.

Per i motivi affrontati precedentemente abbiamo scoperto essere una pratica sbagliata, quindi per seguire la strada giusta tutto quello che bisogna fare è creare una nuova cartella (che nel mio esempio chiamata child-fifteen) ed aggiungere un file style.css inserendo il seguente codice:

/* 
Theme Name: Child Twenty 
Theme URI: https://skillsandmore.org/child-theme 
Author: Andrea Barghigiani 
Author URI: http://andreabarghigiani.info 
Description: Un child theme di Twenty Twenty con un font diverso 
Template: twentyfifteen 
Version: 1.0 
License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready 
Text Domain: twentyfifteen 
*/ 

/* Importo il CSS del tema parente */ 
@import url("../twentytwenty/style.css"); 

/* Cambio font e colore al Titolo */ 
.entry-title{     
	font-family: Arial; 
} 
.entry-title a{ 
	color: red; 
}

Ecco il nostro semplice file CSS che ci ha permesso di modificare il tema di partenza applicando le modifiche di nostro interesse. Come puoi notare le cose importanti da aggiungere sono principalmente 2:

• aggiungere il tema parente – bisogna indicare il nome del tema parente per il child che stiamo creando, per assicurarci di selezionare il nome giusto tutto quello che devi fare è prendere il nome della cartella del tema parente. Nel blocco di codice precedente puoi vedere la presenza di Template: twentyfifteen e grazie a questa dichiarazione stiamo dicendo a WordPress che il tema che stiamo costruendo è un figlio di Twenty Fifteen.
• importa il foglio di stile originale – anche se stiamo dicendo a WordPress che stiamo creando un tema figlio di Twenty Fifteen allo stesso tempo la nostra piattaforma ha bisogno di conoscere quali sono le regole CSS originali. Per fare questo non bisogna far altro che utilizzare @import per collegarsi al foglio di stile originale.

Se adesso provi ad aggiornare il tuo browser, ovviamente dopo aver attivato il tuo nuovo tema nella Dashboard di WordPress, scoprirai che tutti i titoli dei tuoi articoli (quelli con la classe .entry-title) sono di colore rosso e il font utilizzato è proprio Arial.

Complimenti, hai appena creato il tuo primo child theme!

Visto così può non sembrare un grande risultato, in fin dei conti abbiamo semplicemente cambiato il colore e il font di un titolo, ma prima di andare a vedere come un child theme può essere veramente utile vorrei mettere in chiaro due cose:

• queste modifiche sono compatibili con i futuri aggiornamenti di Twenty Fifteen, questo vuol dire che se un domani uscirà un aggiornamento di questo tema (e succederà sicuramente) non dovremo preoccuparci della sovrascrittura delle nostre modifiche. Il tema parente potrà aggiornarsi senza alcun problema perché sarà il child appena creato ad applicare le nuove regole;
• anche se tutto funziona correttamente, non abbiamo incluso il foglio di stile principale nel modo corretto. Prima ti ho invitato a usare @import nel tuo codice CSS ma bisogna dire che questo non rispetta le best practice consigliate dalla stessa WordPress e dal Web in generale.

Ebbene sì la regola @import non è la scelta migliore perché crea una nuova chiamata HTTP che purtroppo non fa altro che rallentare le prestazioni del sito. Oltre a questo viene considerata comunque una pratica sbagliata e se vuoi approfondire questo argomento ti consiglio di consultare questo studio (in inglese) di Steve Souders.

Ma allora quale sarebbe la soluzione migliore da utilizzare?

Speravo che tu mi facessi questa domanda! (Anche se in fin dei conti me la sono fatta da solo 😉 ).

Ebbene WordPress ci mette a disposizione una funzione PHP che permette sia di caricare questi file nel modo corretto che di indicare un rapporto di parentela tra i file che andiamo a caricare, ti ricorda niente? Strano eppure è una funzione che avresti dovuto usare nella creazione dei tuoi temi, vediamo di darti un aiutino: prende il nome di wp_enqueue_style()…

Suona nessun campanello?

Vebbé dai, in fin dei conti siamo tutti qua per imparare 😀

In modo molto simile alla funzione wp_enqueue_script(), la funzione che abbiamo appena visto ci permette di dichiarare i fogli di stile e va inserita all’interno del file functions.php. Ecco una cosa nuova che puoi imparare da questo articolo, anche se precedentemente ti ho detto che per creare un child theme avrai bisogno soltanto di un foglio di stile, ti svelo subito che potrai sovrascrivere qualsiasi file di un tema semplicemente replicando il suo nome all’interno della cartella del child theme.

add_action( 'wp_enqueue_scripts', 'carico_stili' );   
function carico_stili(){     
	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' ) );   
}

Ecco fatto, adesso sei in grado di caricare i tuoi fogli di stile nel modo corretto seguendo gli stessi consigli forniti dalla nostra piattaforma preferita 😀 Altra cosa interessante che vorrei farti notare è la presenza di array('parent-style') all’interno della seconda chiamata a wp_enqueue_style().

Se ti ricordi, con la funzione wp_enqueue_script() è possibile passare un parametro array che permette di dichiarare le dipendenze dello script che stiamo includendo, ebbene la stessa cosa è valida per i nostri fogli di stile! In questo modo stiamo dicendo a WordPress che si dovrà impegnare a caricare prima del nostro foglio di stile quello dichiarato come parent-style e tutti gli altri stili che dipendono da questo.

Oltre a queste motivazioni bisogna anche mettere in luce che utilizzando wp_enqueue_style() siamo pronti a sfruttare la cache di WordPress senza troppo sforzo. Se hai installato un plugin per gestirla, questo sarà in grado di mettere in cache questi file e velocizzare ulteriormente il caricamento del tuo sito.

Quindi, adesso, al posto di avere un singolo foglio di stile puoi già iniziare da functions.php e utilizzare i vari hook per personalizzare il tuo tema 😀

Come usare i Child Theme con Genesis

Proprio nella scorsa frase ho usato un termine molto particolare, hook…

Mi immagino che tu lo conosca benissimo e che abbia già sfruttato la sua potenza per creare diversi temi ma forse, un po’ come me, non li hai mai usati per modificare un tema esistente.

Ebbene, ti ricordi proprio qualche articolo fa quando ti ho invitato ad aprire una discussione su Genesis?

Il fatto è che al sottoscritto è bastata semplicemente la stesura di quell’articolo per convincersi ad acquistare un pacchetto completo di tutti i child theme e degli aggiornamenti futuri.

Gli sviluppatori più sfaticati possono usare il sistema di widget che questo framework mette a disposizione per personalizzare le home page dei child theme offerti, ma i più intrepidi dovrebbero già sapere che grazie al gran numero di hook che il framework ci mette a disposizione possiamo veramente rivoluzionare le cose!

Questo giusto per farti capire che cosa significa partire da uno dei child theme già presenti in un framework professionale come Genesis piuttosto che svilupparsi tutto da soli.

Nei prossimi mesi ti mostrerò diversi progetti realizzati con questo framework, alcuni sviluppati nel giro di qualche giorno mentre altri che hanno subito una personalizzazione talmente profonda che difficilmente ti permetterà di capirne la provenienza. Se hai già realizzato qualcosa con questo framework non esitare a farcelo sapere, siamo estremamente curiosi 😉

Giusto per mettere nero su bianco alcune confessioni lo stesso tema che stai vedendo di SkillsAndMore è un child theme di Genesis che io e il resto del team di <codeat/> abbiamo sviluppato da zero prendendo come partenza soltanto il file CSS del Genesis Sample Theme e trasformandolo in una serie di file Sass per aiutarci ulteriormente nello sviluppo.

Conclusioni

Con questo articolo spero di averti incuriosito abbastanza da averti fatto creare il tuo primo child theme usando e personalizzando il tema Twenty Fifteen, di averti fatto capire perché usare i child theme potrebbe essere una mossa veramente intelligente e anche perché dovresti tenere in considerazione la possibilità di modificare dei child theme già preconfigurati che ti permetteranno di velocizzare il tuo sviluppo.

Sarò onesto con te, parlo di Genesis anche perché ho una affiliazione e potrei guadagnare qualcosa se decidi di acquistare questo prodotto. Ma ne parlo soprattutto perché il sottoscritto ed Eugenio non vedono l’ora di mostrarti come sia possibile agire sui temi che questo framework ci mette a disposizione!

Intanto resto in ascolto per qualsiasi commento o suggerimento. Ti è piaciuto questo articolo? Che ne dici, andiamo avanti a proseguire nella scoperta di un framework come Genesis o ti interessa altro?

Noi stiamo pensando di realizzarne un corso completo da aggiungere alla nostra libreria, facci sapere se ritieni questa cosa interessante aggiungendo il tuo commento proprio qua sotto!