Créer un thème enfant

Dernière mise à jour le 10 avril 2018 par LMD

Pour adapter un thème WordPress à vos besoins et le personnaliser, n’allez surtout pas en modifier directement le contenu. À chaque mise à jour du thème, qu’il faut absolument faire pour des raisons de sécurité, vous perdriez toutes vos modifications. En effet, les mises à jour écrasent les anciens fichiers du thème et donc détruisent tout votre travail.

Pour éviter ce problème, il faut faire un thème enfant (Child Theme).

Les fichiers du thème enfant

Il faut commencer par créer le dossier et les fichiers du thème enfant. Dans le dossier « wp-content > themes »,  créer un nouveau dossier et le nommer du nom du thème parent, auquel on ajoute « -child ». Ce n’est pas obligatoire et il serait possible de choisir un autre nom, mais c’est une convention très courante.
Dans l’exemple ci-dessous, le thème parent s’appelle « fukasawa ». Il faut créer au même niveau un dossier nommé « fukasawa-child ».

child01

Ensuite, dans le dossier enfant, à partir de votre éditeur de texte, il faut créer les fichiers « style.css » et « functions.php ». Il faut obligatoirement respecter les noms et les formats de fichier (un fichier CSS et un fichier PHP).
Enfin, une copie d’écran du résultat du thème doit être préparée et ajoutée au dossier sous le nom obligatoire « screenshot.png ». L’image doit être au format PNG et mesurer 650 x 400 pixels.
Ces trois fichiers constituent le strict minimum pour faire fonctionner un thème enfant.

child02

Le fichier style.css

Dans le fichier CSS, il faut commencer par indiquer en commentaire les informations essentielles du thème enfant comme ci-dessous (surtout ne pas mettre d’espace avant les deux points).

Les deux premières lignes sont obligatoires :
– le nom du thème enfant (Theme Name:). Le nom est libre et vous pouvez choisir de l’appeler comme vous voulez,
– le nom du thème parent (Template:). Il faut absolument utiliser le nom du dossier du thème parent, écrit exactement à l’identique, en respectant les capitales.

Les lignes suivantes sont facultatives, mais l’ensemble des informations saisies seront affichées dans le Dashboard.

[pcsh lang= »css » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

/*
Theme Name: Fukasawa Child
Template: fukasawa 

Description: Theme enfant de Fukasawa, créé pour la session WordPress avancé
Author: Gilles
Author URI: https://www.monsite.fr
Version: 0.1
*/

h1 {color:red;}

[/pcsh]

Afin qu’elles soient reconnues, il faut importer les règles CSS du thème parent. Initialement, cela se faisait par une règle CSS « @import » située juste après le bloc de commentaire initial. Vous trouverez cette méthode dans de nombreux liens sur internet. Depuis peu, il faut utiliser une autre méthode et importer les CSS du thème parent par une fonction PHP (voir chapitre suivant) placée dans le fichier « functions.php ». C’est ce que préconise le codex WordPress (voir lien en fin de page).

Il ne reste plus qu’à rajouter au fichier « style.css » du thème enfant, de nouvelles règles CSS pour modifier l’aspect du site. Elles seront lues après celles du thème parent et les remplaceront automatiquement. Ici, en tant qu’exemple, une règle pour colorer les titres H1 en rouge a été rajoutée, après le commentaire initial.

Le fichier functions.php

Commençons par créer une fonction pour importer les CSS du thème parent. Pour cela, taper la balise PHP <?php  ?> mais contrairement à l’habitude, il est recommandé de ne placer que le début de la balise, soit <?php , au tout début du fichier « functions.php ». Il ne doit absolument rien y avoir avant, même pas un espace ou un commentaire. Si on laisse la fin de la balise php, soit ?>  après tout le code, il arrive que cela génère une erreur et que le site ne s’affiche pas correctement.
Puis copier à la suite le code ci-dessous :

[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

/**
	** 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' );
}

[/pcsh]

Ce fichier n’écrase pas celui du thème parent, mais les fonctions qui s’y trouvent s’ajoutent à celles du thème parent. Le plus gros risque est qu’une fonction qui existe déjà dans le thème parent y soit définie, ce qui génère une erreur PHP. Il faut absolument ajouter à toute nouvelle fonction du thème enfant une ligne de code permettant de prévenir ce problème.

Bien évidemment, dans le Dashboard, il faut activer le thème enfant pour en bénéficier. Vous pouvez alors faire toutes les modifications que vous souhaitez. Attention cependant, si vous êtes amenés à faire trop de modifications, il vaut sans doute mieux créer un thème complet de A à Z.

Pour aller plus loin, le codex relatif aux thèmes enfants :
https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant

 

 

Design collaboratif