Come creare un tema child (child theme) per WordPress

WordPress lo sappiamo funziona con i template, i clienti sono sempre più esigenti e molto spesso è necessario fare delle personalizzazioni al tema, magari al CSS o addirittura al PHP, se le modifiche venissero fatte sul tema nativo, al primo aggiornamento del tema verrebbero completamente sovrascritte con i nuovi file aggiornati; qualcuno potrebbe dire “ma io non aggiorno il tema e sono apposto!”, male! pessima idea, fare SEMPRE gli aggiornamenti, certo prima vanno valutati per capire cosa comportano, in particolare sui siti già in produzione, ma mai trascurare un CMS, sarebbe come non fare mai il tagliando alla nostra auto, prima o poi qualche magagna salterebbe fuori… predica finita 🙂

Che cos’è un template child di WordPress

WordPress ha una funzionalità a mio parere molto utile che è quelle di potere creare un template child (altrimenti detto “tema figlio”) di un tema già esistente, in sostanza è una sorta di duplicazione del tema installato ma con la possibilità di andare a modificare i file, il CSS, il PHP o aggiungere delle funzionalità ulteriori senza compromettere il tema di default; infatti nel caso in cui si dovesse eseguire un aggiornamento del tema principale, le modifiche apportate al template child non andrebbero perdute, bella notizia no ?

Come fare un override di un template WordPress

La tecnica della creazione di un template child viene anche chiamata “override” che è un pò quello che succede con le estensioni di Joomla, per esempio scrissi un articolo su come fare un override di un template di K2.

Fare un ovveride di un tema WordPress signfica sovrascrivere dei file già presenti nel tema di default, vediamo alcuni esempi pratici.

Come creare un template child

Nel mio caso ho creato un child del tema gratuito “genereate press“, ma voi potete creare un child del vostro template.

  1. portarsi nella cartella di installazione dei templates di WordPress che si trova in wp-content/themes/
  2. creare una cartella chiamandola “generatepress-child

    Ora dovreste ritrovarvi questa situazione

    struttura di un tema child di wordpress

  3. all’interno della cartella generate-child creare un file con nome style.css ed incollarci esattamente quanto segue

    Vediamo un pò il contenuto del file

    Theme Name : è il nome del tema child, in realtà potete scrivere ciò che volete, per mantenere un ordine consiglio di scrivere il nome del tema principale aggiungendo la dicitura Child
    Theme URI : è l’URL di download del tema, se il tema lo rendete pubblico ha senso mettere un indirizzo di download, diversamente mettete l’indirizzo del vostro sito e per assurdo quello del cliente per cui lo state realizzando
    Descritption :
    una descrizione del tema, per esempio se avete aggiunto nuove funzionalità potete scriverle qui, non scrivete però un papiro nè !
    Author :
    il nome dell’autore del tema
    Author URI :
    l’indirizzo del sito dello sviluppatore del tema
    Template :
    questo deve essere necessariamente il nome della cartella del template di default, altrimenti il tema child non funzionerà
    Licence / License URI :
    potete lasciarle invariate
    Tags :
    in realtà questi sono utili se il tema è pubblico perchè aiutano a farlo trovare quando viene effettuato la ricerca con i criteri interni alla dashboard di WordPress, siccome nel mio caso il tema non è pubblico mi sono limitato ad inserire la lista delle nuove funzionalità che ho implementato
    Text Domain :
    altra parte importante, infatti deve riportare il nome della cartella del template child

    Queste informazioni verrano mostrate nei dettagli del tema

    dettaglio informazioni tema

  4. Bene, ora sempre all’interno della cartella generate-child create un file con nome function.php ed al suo interno incollate questo :

    questa stringa comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css)

  5. Ora volendo, ma è del tutto facoltativo, potete creare un file di 800×660 con nome screenshot.png ed inserire una preview del tema child, oppure potete limitarvi semplicemente a fare un copia e incolla del file che trovate nel template di default.
    Se non viene creato il file, nella gestione dei temi di Worpdress si troverà un quadrato vuoto in corrispondenza del tema child.

    gestione temi con wordpress child theme

  6. A questo punto per ogni file che vogliamo modificare eseguiamo una copia dal template di default al tema child.

Programmatore WordPress e Joomla, PHP/MySQL.
Sono freelance mi trovi come Professionista Joomla e articolista nella lista ufficiale di joomla.it, e come Professionista WordPress nella lista ufficiale di WUG Italia.
Dal 2006 sono titolare di Web Synapse, una Web Agency di Milano.
Pratico Kung Fu Wing Chun e mi piacciono le tagliatelle al ragù ! :-)

22 commenti su “Come creare un tema child (child theme) per WordPress

    • Ciao Alberto,

      nella cartella del tema child devi avere due file (style.css e functions.php), il file css in cui apportare le modifiche è style.css contenuto nella cartella del tema child.

      Nel file functions.php hai incollato questo ? :

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

  1. Facendo ricerche, mi sono scontrato con 2 metodi che hanno a che fare con functions.php.

    inserendo questo codice, richiama il css originale, ma poi se si apportano modifiche al css child, non sovrascrive l’originale:

    // Importa il css originale
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
    function enqueue_parent_theme_style() {
    wp_enqueue_style( ‘semicolon’, get_template_directory_uri().’/style.css’ );
    }

    Mentre inserendo il tuo, comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css) che in questo caso invece sovrascrive l’originale.

    // Comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css)
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’);
    }

    2 cose completamente diverse.

    Perciò se ho ben capito, usando il tuo codice, nel css child si deve inserire L’INTERO css originale e modificarlo li nel child.

    Altra cosa: devo modificare anche il file css/colors.css che ci metto nel functions.php?

    • Ti sconsiglio di copiare l’intero css, scrivi invece solo le regole che ti interessano, altrimenti carichi 2 fogli identici per nulla.
      Per modificare il file colors.css invece fai la stessa cosa, ossia scrivi le regole che ti interessano nel file style.css del tema child.

  2. Ok, i css dei Media ho dovuto inserirli nel css cclld anche se non l’ho modificata, perché altrimenti mi dava problemi di ridimensionamento.

    Il colors.css modificato l’ho inserito nel child style.css ma non sovrascrive l’originale.

  3. Bene, per i css adesso funziona. Fra tutte le guide che ho trovato in rete, la tua funziona, però nel tuo post, se permetti, dovresti essere più esplicito, es. le modifiche dei file css extra (quelle che non sono di style.css) vanno messe anch’esse in style.css child con la dicitura !important.

    Un ultima cosa: ho notato che nel functions.php non si possono mettere tutte le modifiche dei file php (o sbaglio?).
    Mi spiego: per le traduzioni inglese-italiano ho messo in function.php solo il codice php tradotto (non tutta la pagina), ma per altri codici ho dovuto mettere nella cartella child tutto il file originale e modificarlo nel child.

  4. Intendevo dire che !important l’ho messo solo ai css modificati che non appartengono al file style.css originale. Nel mio caso l’ho messo solo ai css modificati di colors.css

  5. Ciao Alessio, complimenti per la guida.
    Purtroppo ho un problema che non riesco a risolvere da diversi giorni. Dovrei implementare i 2 codici di Google Tag Manager all’interno di header.php, nella sezione Aspetto –> Editor. Il punto è che nell’editor, sulla colonna di destra, non trovo tutte le voci che compongono il mio sito (tipo “header.php” etc), ma solo style.css. Credo che questo sia un errore vero?
    Come posso risolvere? O se non c’è un errore, dove posso implementare il codice di Google Tag Manager?
    Grazie in anticipo

Commenta l'articolo

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?