Un thème enfant wordpress, kezako ?


D’abord, à quoi ça sert ?

Ca sert tout simplement à garder intactes les modifications que vous pouvez apporter à un thème le jour où vous le mettez à jour. Si au contraire vous avez fait les modifications CSS ou dans les fichiers PHP directement dans le thème, tout sera perdu. Alors qu’en créant un thème enfant (dont le parent est le thème que vous avez installé), les modifications apportées seront conservées lors de la mise à jour du parent.

Comment faire un thème enfant ? (child theme en anglais)

1. Dans wp-content > themes, créer un dossier du nom du parent suivi de -child, par exemple :

child

 

 

 

 

 

 

Dans cet exemple, j’ai donc installé le thème Enigma et créé un thème enfant enigma-child. Bien sûr vous pouvez le nommer comme vous voulez votre thème enfant, vous n’êtes pas obligés de le nommer « xxx-child » mais c’est juste plus simple de s’y retrouver comme cela. 

2. Ensuite, on va créer 2 fichiers dans ce dossier :

  • style.css (dont les propriétés s’ajouteront à celle du style.css parent)
  • functions.php
  • voire même un 3ème fichier qui sera la capture d’écran de votre thème si vous faites bien les choses ^^ (screenshot.png de 600 px X 450 px conseillé)

Dans le functions.php, insérez ce code :

Mis à jour (l’ancien code posait parfois des soucis)

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    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 ) );
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}

Source : http://docs.themeisle.com/article/14-how-to-create-a-child-theme

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

}
?>

Cela permet de faire appel à votre nouvelle feuille de style.

Dans le fichier style.css, insérez ce code : 

/*
Theme Name: Nom de mon thème enfant
Description: Thème enfant de DB Communication
Author: DB Communication
Author URI: http://www.db-communication.fr
Template: enigma 
Version: 0.0.1
*/

Quelques explications :

Attention, il ne faut pas mettre d’espace avant les : sinon cela ne fonctionnera plus.

Theme Name : Le nom que vous donnez à votre thème enfant
Description : La description de votre thème enfant (apparaîtra dans le back-office là où vous changez de thème)
Author : L’auteur du thème enfant (donc vous)
Author URI : L’url du site de l’auteur, donc le vôtre
Template : Le nom du thème parent (plus précisément le nom du répertoire tel qu’il est écrit sur le FTP, en respectant bien les éventuelles majuscules)
Version : La version de votre thème enfant

Une fois tout cela fait, n’oubliez pas de changer de thème dans le back-office en choisissant le thème enfant (c’est là que vous verrez votre capture d’écran screenshot si vous l’avez bien mise ^^).

Vous pouvez maintenant modifier les styles ou les fichiers .php de votre choix en les copiant dans votre répertoire -child.

Exporter/Importer les paramétrages d’un thème dans Customizer

Le problème lorsqu’on change de thème, c’est qu’on ne conserve pas les paramétrages fait avec Customizer. Pour y remédier, utilisez le plugin Customizer Export/Import : https://wordpress.org/plugins/customizer-export-import/