Anche se WordPress non lo richiede, personalmente ritengo sia fondamentale creare un tema child ogni volta che si attiva un nuovo tema su WordPress.

Non sai cos’è o come si crea un tema child? In questo post vedremo come crearne uno, da zero, in modo da poter personalizzare il nostro sito web in maniera ultra-leggera.

Che cos’è un tema child?

Uno dei requisiti fondamentali per far funzionare un sito web WordPress, è quello di avere un tema attivo.

Nonostante ci siano centinaia di migliaia di temi disponibili, sarà molto difficile trovarne uno che soddisfi TUTTE le nostre necessità, soprattutto se il sito che vogliamo realizzare richiedere delle funzioni particolari.

Per poter integrare queste funzioni, possiamo scegliere se installare un plugin (appesantendo quindi il sito) oppure scrivere del codice direttamente nei file del nostro tema.

Facendo così, però, quando lo sviluppatore del nostro tema rilascerà un nuovo aggiornamento, tutti i file che abbiamo modificato verranno sovrascritti. Questo significa che tutte le modifiche che abbiamo fatto a quei file, verranno perse.

Per evitare questo problema, possiamo pensare di installare un tema child (in italiano “figlio”), ovvero un tema che eredita tutte le proprietà dal proprio tema parent (in italiano “genitore”) e ne modifica o aggiunge delle funzionalità.

In questo modo, quando andremo a fare gli aggiornamenti del nostro tema genitore, tutte le modifiche fatte al tema child non verranno perse, ma le nuove funzioni del tema genitore verranno comunque ereditate.

Come creare un tema child

Creare un tema Child è molto facile e, detto brevemente, consiste in soli 4 step, ovvero:

1. Creazione della cartella del tema
2. Creazione del file style.css
3. Creazione del file functions.php
4. Installazione e attivazione

Ma iniziamo subito! Vediamo gli step nel dettaglio…

1) Creazione della cartella del tema

Per fare questa operazione, dovremo andare a modificare dei file sul server, quindi avremo bisogno di un modo per accedervi.

Solitamente, gli hosting mettono a disposizione degli utenti dei tool chiamati “File Manager” che permettono di navigare i file presenti all’interno del proprio tramite un’interfaccia grafica molto intuitiva. In altri casi, invece, forniscono un accesso FTP che va configurato con un client FTP (se non sai come usare un client FTP, c’è un mio collega che lo spiega).

Se il tuo hosting non fornisce nessuna di queste due opzioni, puoi tranquillamente seguire questo procedimento e, una volta terminato, comprimere il tutto in un archivio .zip e caricarlo su WordPress come un semplice tema.

Una volta fatto l’accesso al nostro server, dovremo vedere delle cartelle chiamate “wp-admin”, “wp-content”, “wp-includes”, ecc.

Se queste cartelle non sono presenti, probabilmente l’installazione di WordPress non è stata fatta nella cartella “root” (principale) del server, ma in una sotto-cartella.

Solitamente, in questi casi, è presente una cartella chiamata “public_html” o “www“. Dopo esservi entrati, dovremo vedere le cartelle elencate prima. In caso contrario, bisognerà provare ad accedere a tutte le cartelle presenti sul server finché non troveremo quelle elencate in precedenza.

Una volta trovata l’installazione WordPress, accediamo alla cartella “wp-content” e poi alla cartella “themes”.

Qui dentro, dovremo trovare un elenco di file e cartelle chiamate come i temi attualmente installati sul sito.

Possiamo quindi procedere a creare, qui dentro, una nuova cartella che si chiamerà “XXX-child”, dove dovremo sostituire ad “XXX” il nome del tema attualmente attivo, tutto in minuscolo e senza spazi. Ad esempio, nel mio caso, si chiamerà “divi-child”.

2) Creazione del file style.css

All’interno della cartella creata, dovremo andare a creare il file CSS.

Dentro questo file, solitamente, vengono inseriti degli stili CSS che vanno a modificare il modo in cui i contenuti della pagina vengono visualizzati (dimensione del testo, bordi delle immagini, spazi, ecc).

In questa situazione specifica, il file, oltre a contenere i nuovi stili per le pagine, dovrà contenere delle informazioni generali riguardo il tema, come ad esempio il nome del tema, l’autore, la versione e, soprattutto, il nome del tema padre da cui ereditare tutte le proprietà.

Quindi, nella cartella appena creata, andiamo a creare un file chiamato “style.css”. Durante questa operazione bisogna fare attenzione a NON creare il file con estensione “.txt”, in quanto solitamente, su alcuni server, le estensioni, vengono nascoste.

All’interno di questo file andremo ad inserire le seguenti righe di codice:

/*
 Theme Name:   Divi Child
 Theme URI:    http://francescoschettino.it/tema-child-wordpress/
 Description:  Tema Child di Divi dove potrò personalizzare il codice
 Author:       Francesco Schettino
 Author URI:   http://francescoschettino.it/
 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
 Tags:         child, theme, wordpress, custom, woocommerce, product, lazy, load
 Text Domain:  Divi
*/

Le uniche 2 informazioni fondamentali da modificare sono il “Theme Name” (il nome che vogliamo dare al tema child) ed il “Template“, ovvero il tema padre da cui questo tema dovrà ereditare tutte le proprietà. Il nome del tema che andremo a specificare qui dentro, dovrà essere il nome di un tema già installato sul nostro sito.

Ricorda che queste informazioni dovranno sempre essere posizionate all’inizio del file “style.css”, anche quando andremo ad aggiungere altro codice.

3) Creazione del file functions.php

Sempre all’interno della cartella creata allo step 1, dovremo andare a creare il file “functions.php”, dove andranno inserite tutte le funzioni “lato server” del nostro tema child.

Le funzioni “lato server” sono quelle funzioni che WordPress esegue sul server prima di generare il codice da inviare all’utente finale. Ad esempio, se sulla pagina dovrà essere scritta la data attuale, una funzione “lato server” genererà questa data, sotto forma di testo, e la inserirà nel codice che poi l’utente visualizzerà sullo schermo.

Queste funzioni, in WordPress, sono scritte in un linguaggio chiamato PHP.

La funzione “principale” che dovremo andare ad inserire, è quella che permetterà a WordPress di caricare il nostro file CSS personalizzato, che abbiamo creato allo step precedente. Per farlo, incolliamo il codice seguente dentro il file:

<?php
    add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles', 11);
    function my_theme_enqueue_styles() {
        wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
        wp_enqueue_style('child-style', get_stylesheet_directory_uri().'/style.css');
    }

4) Attivazione del tema su WordPress

Arrivati a questo punto, gran parte del lavoro è stato fatto.

L’unica cosa che resta da fare è attivare il tema child, direttamente dalla Dashboard di WordPress, andando su “Aspetto”, su “Temi” e cliccando poi “Attiva” in corrispondenza del tema Child.

Per dare un tocco di stile in più al tema child, potresti voler personalizzare l’immagine di anteprima del tema; in questo caso, ho scritto un articolo dedicato a questo 😉

Se invece dovessi avere problemi, sono sempre a tua disposizione!