Cos’è un child theme? E perché dovresti crearne uno? Uno dei problemi più fastidiosi di WordPress è il fatto di perdere le modifiche effettuate quando viene rilasciato un aggiornamento.

Il child theme risolve questo problema, essendo un componente dipendente dal template usato dal blog ma il cui controllo è demandato allo sviluppatore. In questo modo possiamo lavorare su di esso, sovrascrivendo stile e funzioni.

Creare un child theme è molto semplice, abbiamo anche una procedura molto ben descritta nel Codex ufficiale di WordPress, ma vediamo insieme i passi da compiere per non perdere più le modifiche effettuate al nostro tema. Attraverso il child theme possiamo anche andare a modificare le funzionalità dei plugin, a patto che questi siano stati sviluppati seguendo le procedure standard di WordPress.

Da dove cominciare? Lavoriamo in locale, crea una nuova cartella sul tuo desktop e chiamala mychild. La scelta del nome è indifferente, puoi chiamare questa cartella come meglio credi. All’interno di essa, posizioniamo due nuovi files, che devono avere necessariamente le seguenti denominazioni :

functions.php
style.css

La creazione di un file functions.php è obbligatoria dalla nuova procedura per la creazione di un child theme. Prima si utilizzava la dichiarazione @import nel foglio di stile, ma questa soluzione rallenta il rendering e il css del tema genitore viene caricato due volte.

All’interno del file functions.php non dobbiamo fare altro che inserire questo codice:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

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

Con questa funzione, abbiamo semplicemente detto a WordPress di caricare il foglio di stile del tema genitore. Per indirizzarlo correttamente dobbiamo specificare il nome del template in uso. La dichiarazione va inserita all’interno del file syle.css del child theme, più precisamente nei commenti iniziali, in questo modo:

/*
Theme Name: My Child
Description: Child Theme del tema genitore
Author: Luca Terribili
Author URI: https://lucaterribili.it
Template: nome-cartella-tema-genitore
Version: 0.1
*/

Le uniche dichiarazioni obbligatorie sono Theme Name e Template. Facciamo particolare attenzione a quest’ultima riga, dove dobbiamo inserire come valore il nome della cartella del tema genitore.

Ora con Filezilla carichiamo la cartella mychild all’interno di wp-content/themes in remoto e se abbiamo fatto tutto correttamente, all’interno del modulo di amministrazione dei temi, dovremmo vedere il nostro child theme. Lo attiviamo come descritto nell’articolo sulla installazione dei temi di WordPress.

Se il tema genitore prevede la funzionalità di amministrazione tramite un apposito modulo, questo sarà ancora disponibile e funzionante, e tutte le personalizzazioni disponibili si potranno effettuare attraverso di esso.

Le modifiche aggiuntive, invece, andranno trattata attraverso il file style.css del child theme, che sarà caricato dopo quello del genitore, in modo che le sue direttive abbiano un peso maggiore e possano sovrascrivere correttamente quelle originali.

Possiamo fare l’override di un qualsiasi altro file che compone il template originale, come il footer o l’header, ma in questo caso si rischia d’incorrere nel rischio di qualche incompatibilità nel momento in cui viene rilasciato un aggiornamento del core di WordPress. Si può anche creare un file di template personalizzato per le pagine di WordPress, basterà creare un nuovo file in php con questa struttura :

<?php
/*
Template Name: Fullwidth
*/
?>
<?php get_header(); ?>
Qui il tuo codice
<?php get_footer(); ?>

In questo caso abbiamo creato un template con larghezza a tutta pagina, senza includere la colonna laterale, omettendo la dichiarazione get_sidebar(). Chiaramente bisogna fare attenzione alla struttura dell’HTML e aggiustare il CSS in modo da fare un lavoro preciso e ordinato.

Il file functions.php

La maggior parte delle funzionalità di WordPress vengono incluse nel codice attraverso dei “ganci” utilizzando due funzioni : add_action() e add_filter().

Senza entrare troppo nel merito, perché non è ancora il momento in questo nostro percorso su come utilizzare WordPress, vediamo solamente la differenza sostanziale tra questi due hooks; add_action inserisce una funzionalità in più senza andare ad alterare ciò che è già esistente, mentre add_filter sovrascrive letteralmente il contenuto già presente.

Facciamo un esempio pratico, andando ad inserire il codice di Google Analtyics, indispensabile per avere i dati sul traffico ricevuto, nel file functions.php del nostro child theme appena creato. Apriamo il file functions.php del child theme e inseriamo questa porzione di codice, in qualsiasi posizione, non è importante dove:

function analytics()
{
$code = "<script>";
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
"</script>";
echo $code;
}

add_action('wp_footer', 'analytics', 99);

Nella stringa che ho oscurato con delle X, dobbiamo avere cura d’inserire il nostro codice di monitoraggio esatto. Una volta fatto questo carichiamo il file sul server, aggiorniamo la pagina e andiamo ad esaminare il sorgente, per vedere se tutto ha funzionato a dovere.