Come creare un child theme WordPress

Per creare un child theme WordPress bastano 2 file: un functions.php e style.css rispettivamente per funzionalità e formattazione grafica. Nella sua semplicità, il tema child permette di personalizzare un template acquistato o di base ed espanderne funzioni e grafica.

Il child theme è la soluzione migliore – anzi, direi imprescindibile – per sviluppare temi WordPress personalizzati a partire da quelli gratuiti della directory ufficiale WordPress o dai temi premium di Envato Themeforest e altri marketplace online.

Se sei arrivato fino a questa parte del corso WordPress significa che sai già come installare WordPress, quali sono le configurazioni principali o come installare un tema. Ora tocca allo step successivo, il tema child, ottimo perché permette di:

• espandere le funzionalità (custom post type, settings, page, etc) di qualunque tema WordPress
• correggere eventuali bug in attesa di aggiornamenti ufficiali
• aggiornare il tema WordPress in sicurezza, senza perdere modifiche e parti custom
• personalizzare la grafica a piacimento

Vediamo allora come si crea un child theme WordPress in pochi minuti.

File per creare child theme WordPress

Come detto in apertura, per creare il tema child serve:

• il tema padre (il tema di partenza che vuoi utilizzare)
• un file functions.php a cui delegheremo il codice delle funzionalità
• (opzionale) un file screenshot.png come immagine di preview nella schermata Aspetto > Temi

Il child theme è speculare al tema padre di cui eredita file e cartelle nell’esatta posizione di partenza. Per modificare un qualunque file, si crea il suo perfetto duplicato nella cartella del tema figlio.

Esempio pratico: se volessi personalizzare una parte del mio tema chiamata widget-area.php che è presente nel tema padre a questo percorso

/wp-content/themes/astra/footer/widget-area.php

Andrò nel tema child a copiare e incollare quella cartella e quel file per poi modificarlo (solo nel mio child theme, ovviamente)

/wp-content/themes/astra-child/footer/widget-area.php

E avanti così per qualunque altra feature del tema padre che si intende personalizzare e, pertanto, sovrascrivere. Per funzionalità ex novo, hai carta bianca. Puoi organizzare il codice come meglio credi.

Potrebbe interessarti: come usare Studio by WordPress

Cartella del child theme

Il nome da dare alla cartella del child theme è assolutamente libero ma, in generale, per convenzione può avere molto senso aggiungere la parola child partendo dal nome del tema padre. Rimanendo nell’esempio di partenza con il tema Astra, se la cartella del tema padre è astra, mi aspetto la cartella del tema child con nome astra-child.

Codice e intestazione in style.css

Creata la cartella del tema child, passiamo al file style.css che contiene non solo tutte le regole di formattazione grafica del tema in ogni sua parte ma, prima di tutto, il codice di intestazione che permette al child theme di funzionare correttamente.

/*
Theme Name: Nome del tuo Child Theme
Theme URI: http://esempio.com (facoltativo)
Description: Una descrizione del tema figlio (facoltativo)
Author: Il tuo nome o la tua azienda (facoltativo)
Author URI: http://esempio.com (facoltativo)
Template: nome-del-parent-theme
Version: 1.0.0
*/

Alla voce Template nel blocco di intestazione specifica il nome delle cartella del tema padre. Questo permette a WordPress di capire da quale tema padre ereditare tutti i file, grafica e funzionalità. Per includere lo stile del tema padre è sufficiente aggiungere questa riga al file style.css del tuo tema child:

@import url("../nome-del-parent-theme/style.css");

Codice del file functions.php

Altrimenti puoi passare dal file functions.php per un import più moderno e ben fatto. Questo è un esempio di codice da inserire nel file functions.php del WordPress child theme:

add_action( 'wp_enqueue_scripts', 'gt_import_parent_style' );

function gt_import_parent_style() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Se hai impostato tutto correttamente, attiva il child theme come faresti un qualunque altro tema e verifica che sia uguale al tema padre. Insomma, che non vi sia nulla di rotto 😏

Screenshot del tema

Se vuoi un’immagine di anteprima per il tuo tema, aggiungi un’immagine con nome screenshot.jpg o screenshot.png con dimensioni ideali 1200×900 pixel. Il file deve essere caricato nella root del tuo tema. Esattamente come in quello padre.

Child theme per temi comprati su Themeforest

Come anticipato nel tutorial su come installare un tema su WordPress, nel caso di temi comprati su Themeforest o markeplace simili, al download viene fornito un file zip unico con al suo interno tutto il necessario per installazione e configurazione del tema WordPress.

Quindi anche:

• contenuti demo
• plugin necessari
• documentazione
• licenze, etc

All’interno dello zip troverai anche i due file da decomprimere per il tema padre e il tema child già pronto all’uso. Devi sono installare i due temi dal backoffice di WordPress o come meglio preferisci e attivare il tema child per completare il tutto.

Child theme e aggiornamenti del tema WordPress

Due parole su child theme e aggiornamenti. Come puoi notare, la struttura del tema child è perfettamente speculare a quella del tema padre da cui eredita tutte le funzionalità e le specifiche grafiche. Invece di modificare il codice del tema direttamente, vai a sovrascrivere l’esatta copia a specchio nel tuo tema child.

Questa impostazione permette sempre di sapere dove e come mettere mano al codice anche quando sia il caso di tornare sui propri passi ma, soprattutto, di effettuare gli aggiornamenti e la manutenzione WordPress in totale sicurezza. Di fatto, non tocchi mai il codice originale del tema padre.

Conclusioni

Fine dello spiegone. Qui c’è tutto quello che devi sapere per creare un child theme a partire dal tema WordPress che hai comprato o scaricato. Se questa guida ti è stata utile ti invito a condividerla e, se avessi bisogno di ulteriore supporto per chiarire qualche dubbio, contattarmi dal form di seguito.