Come creare un WordPress Child theme

Oggi vogliamo svelarvi un trucchetto che in molti alle prime armi ci chiedono: Cos’è e come creare un child-theme in WordPress (in italiano è semplicemente un “tema figlio”).

Attenzione: non è “come creare tema WordPress”

Questa è un’operazione molto semplice che va fatta (di solito) nel momento in cui si installa un tema. Se lo facciamo in un secondo momento, tutte le modifiche fatte fino a quel momento possono essere perse fin tanto che il child-theme è attivo.

Cos’è un Child theme?

Un wordpress child theme è letteralmente un “tema figlio” e come tale, prende tutte le caratteristiche del tema principale.

A cosa serve un child theme WordPress?

Un child theme viene utilizzato per molteplici motivi tra cui:

• Creare nuove sezioni custom all’interno di pagine esistenti, nel sito web.
• Modificare pagine esistenti ( come index.php, single.php ecc ) per dare una graficizzazione custom andando ad aggiungere o rimuovere nuovi elementi o modificare elementi esistenti senza perdere tali customizzazioni ad ogni aggiornamento del tema padre.
• Modificare a proprio piacimento gli stili di un sito, senza compromettere il tema originale
• Aggiungere del codice css senza passare dalla sezione nativa di Wp che permette di andare ad inserire css

Come si creano i temi child WordPress?

Fondamentalmente le vie percorribili sono 3: Già preconfezionato dal produttore del tema, metodo manuale e metodo automatico con un plugin.
Per chi già mi conosce, sa benissimo che preferisco la versione manuale senza l’uso di plugin che andranno ad appesantire il sito, ma in questa guida vi mostrerò entrambe le vie.

Nel codex di WordPress, si può trovare la documentazione ufficiale (Temi Child)

Attivare il child theme già pronto insieme al tema acquistato

Per chi avesse acquistato un tema premium (vedi la mia guida per Scegliere tema WordPress), in molti casi, chi ha sviluppato il tema, ha anche creato in modo automatico il proprio child theme che va a fare i richiami dovuti ai file giusti e settato in modo che funzioni nel migliore dei modi..

In questo caso è sufficiente andare a caricare il file .zip del tema child (ad esempio enfold-child-theme.zip) nella sezione di WordPress “aspetto>temi>upload” e successivamente attivarlo.

Nel caso che il file.zip sia troppo grande e vi appaia un errore di Upload_max_file_size, allora vi consiglio di passare dal metodo tramite FTP.

Per prima cosa aprite il vostro file .zip ed estraete i file ed eventuali cartelle contenuti al suo interno. Create una cartella come “nome-tema-child” e spostate tutti i file al suo interno.

Aprite il vostro client FTP (per esempio con Filezilla) e aprite la root del vostro sito web (molte volte la root del vostro sito web, se avete acquistato un hosting come Register.it, siteground.com, seeoux.it, hualma.org ecc, è /public_html/).

Adesso cercate le cartelle per arrivare al percorso: /wp-content/theme/ e spostate la cartella precedente creata con tutti i file e cartelle al suo interno.

Adesso se avete fatto tutto correttamente ed andate nuovamente nella sezione “aspetto>temi” troverete il tema child pronto per essere attivato.

É sempre bene andare prima in modalità anteprima e controllare il corretto funzionamento, per evitare errori eventuali di accesso al sito web.

Metodo manuale di creazione di un tema child WordPress.

Accedendo con i vostri dati tramite Ftp, aprite la cartella wp-content>>themes>> troverete una serie di cartelle come twentyfourteen twentyfifteen twentynine ecc che sono temi base di Wp, tra queste troverete anche la cartella del vostro tema (Es: Twentyfourteen).

Nella cartella “themes” create voi stessi una cartella dal nome twentyfourteen-child e dentro create un file style.css; è l’unico file che vi servirà per attivare il child-theme.

Apritelo e inserite questo codice stando attenti a sostituire il nome del vostro template

NB: questi codici sono stati reperiti dal codex originale di WordPress.

 /*
   Theme   Name: Twenty Fourteen Child
   Theme   URI: http://example.com/twenty-fourteen-child/
   Description:   Twenty Fourteen Child Theme
   Author:   Tuo Nome
   Author   URI: https://www.tuosito.ext
   Template:   twentyfourteen
   Version:   1.0.0
   Tags:   grid view post, category grid, light, responsive
   */
    
   @import   url("../twentyfourteen/style.css");
    
   /*   Impostazioni Personalizzate */    

Adesso dovrete creare il file function.php nella cartella del vostro tema child, in modo da specificare, tramite il php, che il tema appena creato deve ereditare tutti gli stili da quello principale..

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' ) );
}

Utilizzando questo metodo, potrete togliere la riga in style.css che inizia con @import, in quanto utilizzando il php nel function, si vanno a ridurre le chiamate http che è sempre un bene.

Eventualmente non dovesse funzionarvi il codice sopra definito, potete provare con questo:

<?php

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

Salvate e se andrete nella sezione Temi di Wp troverete il vostro child theme bello pronto.

Attivatelo e iniziate pure a smanettare.

Metodo automatico con un plugin per creare un wp child theme

WordPress Child Theme Generator

In alternativa alla soluzione sopra mostrata, c’è sempre l’opzione “plugin” che appesantisce in generale il sito web, ma è comunque adatta per chi non si sentisse adatto a mettere le mani con un po’ di codice o per chi semplicemente non avesse voglia di perdere tempo.

Il plugin in questione è Child theme generator semplice ed intuitivo da utilizzare.

Basta installarlo tramite la sezione “plugin” di WordPress, ed attivarlo.
Appena attivato, entrate all’interno del plugin > Create New

Inserite i dati richiesti tra cui il parent theme in cui dovrete selezionare il tema da cui creare quello child, autore e versione ed il resto dei campi.

Riempiti tutti i campi, cliccate su Create new child theme ed il gioco è fatto.

Nella schermata successiva create su Attiva child theme e potrete iniziare a fare le vostre modifiche.

Conclusioni

Se non utilizzate temi custom creati da voi, ma avete necessità di fare delle modifiche al layout del sito, o semplicemente aggiungere-togliere modificare ecc, il metodo di creare un tema child WordPress è fortemente consigliato.

È una guida molto semplice sia per chi si avvicina adesso al mondo di WordPress, sia per chi è giù molto più navigato e vuole espandere le sue conoscenze.