Creare un GrandChild Theme con un plugin

Nelle ultime settimane ho lavorato ad un progetto nuovo che consisteva nell’effettuare grandi modifiche ad un child theme. L’unico modo per farlo, senza toccare i file originali, è stato quello di creare un Grandchild theme via plugin.

Tornando un attimo indietro, per far capire meglio di cosa sto parlando a coloro che non ne sanno ancora nulla e che dunque vorrebbero approfondire, il child theme è un tema figlio che modifica il Parent theme cioè il tema genitore. Il Grandchild theme va a modificare il child theme che a sua volta sta già modificando il tema principale.

Perchè creare un tema secondario, o terziario come in questo caso, e non modificare direttamente quello principale? Una delle ragioni in assoluto da tenere in considerazione è che quando il tema principale subisce un aggiornamento, probabilmente perdi tutte le modifiche che hai fatto, per tale motivo è meglio creare un child theme che nel tempo conservi le modifiche.

Cos’è il Grandchild theme

Il Grandchild theme è come se fosse il nipote del Parent theme ed il figlio del Child theme! Per spiegarti meglio ti faccio una scaletta (interpretala come un albero genealogico):

1. Parent theme
2. Child theme
3. Grandchild theme

Mentre il parent theme ed il child theme vanno creati dentro la directory /themes/ del blog WordPress, il Grandchild theme non può essere trattato come un vero e proprio tema ed è per questo che va creato tramite plugin.

Si può fare un Grandchild theme senza plugin?

Ad oggi non è possibile creare un “tema nipote” (tipo di terza generazione!) come se fosse un normale tema; puoi crearlo ed attivarlo soltanto via plugin. Questo implica non pochi grattacapi, perchè non ha le stesse possibilità del child theme, vedremo più avanti di cosa si tratta.

[social type=”googleplus” text=”Fino a questo momento l’articolo ti sembra utile? Allora potresti per favore cliccare sul tasto +1 prima di arrivare a fine pagina? ;)”][/social]

Scriviamo il plugin

Dopo tante chiacchiere, arriviamo ai fatti 😛
Ecco l’indice di tutti gli argomenti che tratterò in questo lungo articolo.

1. La base del plugin
2. CSS e Javascript
3. Templates
4. Archive
5. Header e Footer
6. get_template_part() e include()

01. La base del plugin

La base per creare un Grandchild theme è uguale a qualunque altro plugin di WordPress:

1. Per prima cosa creiamo una cartella (che alla fine del lavoro sposteremo all’interno della directory /plugins/ del blog WordPress). Nel mio esempio l’ho rinominata grandchild-theme, ma tu puoi rinominarla a tuo piacimento;
2. Al suo interno creiamo un file: puoi chiamarlo come ti pare, in questo caso l’ho salvato come gct_functions.php (dove “gct” è l’acronimo di GrandChild Theme” e “.php” è l’estensione del file).
3. All’interno di gct_functions.php inseriamo le seguenti linee di codice:

/**
* Plugin Name: Grandchild theme plugin
* Description: Grandchild theme by Gloria Ingrassia
* Version: 1.0
* Author URI: http://www.gloriaingrassia.com
* Version: 1.0
*/

02. CSS e file javascript

Siamo pronti per animare il nostro plugin aggiungendo un foglio di stile ed un file javascript.

// Aggiungi un foglio di stile
function gct_add_styles() {
    wp_register_style( 'gct-style', plugins_url( 'gct-styles.css', __FILE__ ), array(), '1.0' );
    wp_enqueue_style( 'gct-style' );
}
add_action( 'wp_enqueue_scripts', 'gct_add_styles' );

// Aggiungi un file javascript
function gct_add_scripts() {
    wp_register_script( 'gct-script', plugins_url( 'gct-scripts.js', __FILE__ ), array( 'jquery' ), '1.0' );
    wp_enqueue_script( 'gct-script' );
}
add_action( 'wp_enqueue_scripts', 'gct_add_scripts' );

I file gct-style.css e gct-script.js possono essere inseriti all’interno della cartella principale del plugin /plugins/gct/.

03. Templates

Ecco una lista di tutti i file che puoi rimpiazzare od aggiungere qualora non fosse presente nè nel tema principale nè nel tema secondario:

• 404
• archive
• attachment
• author
• category
• date
• front_page
• home
• index
• page
• paged
• search
• single
• tag
• taxonomy

Per rimpiazzare od aggiungere i templates dobbiamo utilizzare il filtro template_include:

function gct_grandchild_template_include( $template ) {
    $file = untrailingslashit( plugin_dir_path( __FILE__ )  )  .  '/templates/' . basename( $template );

    if ( file_exists( $file ) )
    $template = untrailingslashit( plugin_dir_path( __FILE__ ) )  .  '/templates/' . basename( $template );
    return $template;
}
add_filter( 'template_include', 'gct_grandchild_template_include', 11 );

Come puoi vedere, nella variabile $template ho richiamato tutti i file presenti all’interno della cartella. A questo punto devi creare la cartella /templates/ all’interno della cartella del nostro plugin: /plugins/grandchild-theme/templates/

04. Archive

Oltre al filtro template_include() puoi utilizzarne anche un altro che si chiama archive_template(). e come si capisce dal nome è possibile rimpiazzare/aggiungere un nuovo template per gli archivi (come ad esempio le categorie ed i tag).

add_filter ( 'archive_template', create_function ( '', 'return plugin_dir_path(__FILE__) . "archive.php";' ) );

Al posto di archive.php puoi aggiungere l’archivio che più ti interessa modificare, per esempio puoi mettere tag.php, category.php, ecc…

05. Header e Footer

Al momento non esiste un modo modificare le funzioni get_header() e get_footer(). Non è possibile rimpiazzare nemmeno i file header.php e footer.php presenti in tutti i temi wordpress. In un Grandchild theme puoi solamente rimpiazzare od aggiungere i template e gli archivi, per tale motivo non puoi modificare una parte del template come lo possono essere la testata ed il piè di pagina.

L’unico modo attuale per cambiarli è quello di creare delle nuove funzioni e richiamarle all’interno dei templates:

function gct_header() {
    // qui dentro il tuo codice da mostrare nell'header
}

function gct_footer() {
    // qui dentro il tuo codice da mostrare nel footer
}

In questo modo però dovrai andare a modificare tutti i template presenti nel child theme ed anche nel parent theme, quindi se questi due temi hanno i file single.php, archive.php, 404.php, o comunque tutti quei file che di base esistono in quasi tutti i temi (compresa la lista che ti ho fornito al punto 03 di questo articolo), devi copiarli nella cartella /templates/ che abbiamo già creato all’interno del nostro plugin (vedi punto 03), e successivamente modificarli rimpiazzando get_header() e get_footer() con le nostre nuove funzioni come nell’esempio qui sotto.

Prendiamo l’esempio del file single.php e facciamo finta di voler mostrare l’header, il titolo della pagina, il contenuto ed il footer, possiamo scrivere:

<?php gct_header(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>

<?php gct_footer(); ?>

Ovviamente poi metterai più informazioni, questo codice base è per farti capire come bisognerà richiamare i nostri nuovi header e footer.

06. get_template_part() e include()

La funzione di WordPress get_template_part() di per sè in un plugin non funziona come dovrebbe. Cioè… Se stai creando un Grandchild theme come in questo caso, allora puoi utilizzare la funzione per richiamare i file che sono presenti all’interno del tema in uso (quindi il child theme), ma non puoi utilizzare questa funzione per richiamare un file presente all’interno della cartella del plugin.

Per tale motivo puoi utilizzare la funzione include() in questo modo:

include "file.php";

Conclusioni

Spero che questo articolo sia il più completo possibile, che ti possa aiutare a creare un Grandchild theme e che quindi risponda a tutte le tue domande e perplessità. Se non fosse così, puoi sempre lasciare un commento 😉