Come Creare un Tema Child e Perchè Utilizzarlo

Se hai avuto a che fare con WordPress ti sarai sicuramente imbattuto nei temi child. In questo articolo ti spieghiamo come crearli e perchè è importante utilizzarli.

Cos’è un Tema Child

Quando installi un tema, per quanto sia personalizzabile, potresti avere la necessità di fare modifiche particolari dove bisogna intervenire sul codice.

Prima di mettere mano, devi sapere che modificare direttamente i file del tema è una pratica scorretta. Infatti, se poi aggiorni il tema, tutti i file vengono sostituiti con i nuovi, di conseguenza perderai tutte le modifiche fatte precedentemente.

Per risolvere il problema puoi utilizzare i temi child che ti permettono di modificare il tema senza manomettere i file originali.

Come Creare un Tema Child

Molti template premium includono un tema child già pronto, ti basterà solamente attivarlo. Se non lo trovi e vuoi crearne uno manualmente ti basterà seguire questi semplici step.

Prima di cominciare devi accedere alle cartelle del server. Puoi farlo con FileZilla collegandoti tramite FTP.

Creare la cartella del tema child

All’interno della cartella /wp-content/themes/ risiedono i temi della tua installazione wordpress. Infatti se vuoi caricare un nuovo tema dovrai inserire i file in questa posizione.

Nell’esempio abbiamo un solo tema che è quello default di WordPress: “twentytwenty”.

Per creare un tema child dovrai creare una nuova cartella con il nome del tema originale (tema parent) seguito da -child. In questo caso la cartella sarà twentytwenty-child.

Creare il file style.css

All’interno della cartella dovrai creare un nuovo file e rinominarlo style.css.

Apri il file con un qualsiasi editor di testo per inserire i parametri del tuo child theme.

A titolo di esempio, per il tema Twenty Twenty puoi inserire queste righe di codice:

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       Il tuo nome
 Author URI:   http://example.com
 Template:     twentytwenty
 Version:      1.0.0
 Text Domain:  twentytwentychild
*/

Analizziamo tutte le voci.

• Theme Name: Il nome che vuoi dare al tema.
• Theme URI: Un link per avere maggiori informazioni sul tema.
• Description: Una breve descrizione sul tema.
• Author: Il nome dell’autore.
• Author URI: Link dell’autore.
• Template: Il nome della cartella del tema parent.
• Versione: La versione del tema.
• Text Domain: Una stringa da assegnare al tema che servirà per le traduzioni.

I parametri obbligatori sono Theme Name e Template, tutti gli altri sono facoltativi.

Finito di compilare il file style.css sarai già in grado di visualizzare il tema child sul backend di wordpress.

Creare il file functions.php

L’ultimo step è quello di creare il file functions.php che viene utilizzato per gestire le funzioni personalizzate o per modificare il comportamento del tema. Questo file è un’estensione di functions.php del tema parent. Significa che il codice non si sovrascrive al file originale ma lo estende.

Come per style.css, ti basterà creare un nuovo file, nominarlo functions.php e aprirlo con un qualsiasi editor di testo. Le funzioni che aggiungerai dipendono dalle tue esigenze, tuttavia c’è un blocco di codice che ti consiglio di inserire per includere il file style.css del tema parent:

<?php
function include_parent_style() {
   wp_enqueue_style( 'parent-theme-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'include_parent_style' );

Inserire un’immagine di anteprima

Se vuoi inserire un’immagine di anteprima da visualizzare sul backend di WordPress ti basterà inserire un png e rinominarlo screenshot.png. Le dimensioni da utilizzare sono 1200 x 900 px.

Perchè utilizzare un Tema Child

Come già detto in precedenza, il principale vantaggio nell’utilizzare un tema child è la possibilità di aggiungere modifiche al codice senza toccare i file originali del tema. In questo modo potrai inserire tutte le personalizzazioni che vuoi senza precoccuparti degli aggiornamenti futuri del tema parent.

Inoltre potrai disattivare e riattivare tutte le righe di codice che hai inserito in un solo clic. Ti basterà disattivare il tema child e attivare il tema parent.

Se vuoi approfondire l’argomento dei temi child ti lascio alla documentazione ufficiale di WordPress.