Perché creare un Child Theme in WordPress

Spesso gli sviluppatori del web si affidano ai così detti template premium per la realizzazione dei loro progetti in WordPress. Molti temi per WordPress sono professionali, scritti con un codice pulito e degno di un bravissimo web developer, ma ci sono tante cose che devono essere cambiate per regalare un vestito idoneo al nostro progetto, insomma bisogna metterci del nostro e quindi “customizzare”, come si dice in gergo, il tema acquistato o scaricato; devi cambiare il colore, la dimensione di un carattere o rivedere la user experience dell’utente? Bene é l’ora di utilizzare un Child Theme! Se vuoi approfondire a dovere che cosa sia un tema figlio leggi il mio precedente articolo WordPress Child Theme.

La modifica, infatti, del tema originale, ci impedisce in futuro di aggiornare lo stesso, perché così facendo si perderebbero tutte le modifiche fino allora apportate. Proprio per questo sono nati i Child Theme, che ci consentono di utilizzare tutte le funzioni del template scelto, consentendoci di apportare innumerevoli modifiche e di personalizzare a nostro piacimento il tema originario.

Come funziona un Child Theme e perché usarlo

Un Child Theme per WordPress é un tema a se stante che si basa sulle funzioni del tema padre (principale), permettendoci di inserire al suo interno delle nuove funzionalità o, semplicemente, modificare solo quello che serve. Utilizzando un Child Theme é come si stesse dicendo ad WordPress di controllare le funzionalità del tema figlio e se non le trovi utilizza quelle del tema padre. In definitiva, se sei uno sviluppatore molto attento al codice, alle modifiche, alle customizzazioni e vuoi avere tutto sotto controllo, senza mai perdere un aggiornamento, la creazione di un Child Theme é fondamentale per la scrittura del tuo codice. Quindi posso ammettere che personalmente utilizzo un tema figlio di WordPress per motivi di aggiornamento e di organizzazione.

Aggiornamenti

Io amo avere sempre i miei temi aggiornati, quindi preferisco creare un Child Theme dove inserisco tutte le mie modifiche per poi avere dall’altra parte un tema padre sempre sul pezzo e aggiornato all’ultima versione di WordPress. Questo problema degli aggiornamenti si può estendere anche ai plugins utilizzati. Avere il proprio progetto di WordPress sempre aggiornato é fondamentale per non incorrere in incidenti di percorso (attacco hackers, in primis, e librerie obsolete).

Organizzazione

Per una maggiore organizzazione ed efficacia nello sviluppo reputo che un tema figlio sia fondamentale. Spesso mi trovo a mettere mano a temi già precedentemente modificati da altri sviluppatori e ammetto la mia difficoltà a rintracciare le modifiche fatte, perché spesso sparse in vari punti del foglio di stile o in function.php. Sono fortemente convinto che per avere una situazione chiara e semplice da implementare o riprendere in mano, anche in un secondo tempo, la costruzione di un tema figlio sia la soluzione migliore per ogni nerds, con cui in poche righe di codice riesce a personalizzare le funzioni del tema genitore.

Creazione di un Child Theme

Bene passiamo dalla teoria ai fatti. La creazione di un tema figlio é estremamente semplice, puoi copiare ed incollare il mio codice qui sotto.

I passi per creare un Child Theme in WordPress sono i seguenti:

• creare una cartella del tema nella cartella wp-content/themes/nome-del-tuo-tema
• creare un foglio di stile, ossia il file style.css da inserire nella suddetta cartella
• caricare i fogli di stile utilizzati nel nostro tema figlio all’interno del tema genitore

Una volta fatte queste tre semplici operazioni puoi attivare il tuo Child Theme nel tuo pannello amministrativo di WordPress (Aspetto->Temi).

Adesso provo a spiegarti meglio questi passaggi nel dettaglio. Prima di tutto, per questo esempio facciamo finta di voler creare il tema figlio di un tema di default di WordPress, ovvero di Twenty Fourteen.

1. Per prima cosa devi andare sulla directory wp-content/themes e creare una cartella, che per rigore di logica, io ho chiamato twentyfourteen-child;

2. Adesso crei un file style.css da inserire in questa cartella che all’inizio di tutto deve avere queste semplici linee di codice:

<pre><code class="language-css css">/* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite.com/twentyfourteen-child/ Description: My first WordPress child theme, based on Twenty Fourteen Author: Magoo Leonardo Author URI: http://iwebdesigner.it Template: twentyfourteen Version: beta 0.0.1 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */</code></pre>

Quelle linee di codice che vedi sono molto semplici. I due elementi fondamentali sono “Theme Name” e “Template”.

• THEME NAME -> ossia il nome che tu hai dato al tuo tema figlio e sarà anche il nome che vedrai nel pannello amministrativo della scelta dei temi in WordPress.
• TEMPLATE ->  con questo si indica a WordPress qual’é il tema genitore del nostro figlio, nel nostro caso Twenty Fourteen.

Tutte le altre linee di codice sono superflue ma servono per attribuzioni di paternità e di proprietà del tema appena creato.

3. A questo punto il tuo tema figlio é finito ed é pronto per essere attivato. Ovviamente se lo attivi e ricarichi il tuo sito non saranno ancora prese in considerazioni tutti gli stili che hai inserito nella creazione (al passo 2) del foglio di stile (style.css), perché, come detto in precedenza, WordPress cerca le funzionalità nel tema figlio e se non presenti ricarica quelle del tema genitore. Per fare si che WordPress carichi il nostro CSS e non quello del tema principale, creiamo, sempre all’interno della cartella del nostro Child Theme (twentyfourteen-child) un file denominato functions.php e scriviamoci il seguente codice:

<pre><code class="language-php php">add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }</code></pre>

Come funziona un Child Theme