Thème enfant dans WordPress - Le Blog de Mélusine

Pour simplifier la création d’un thème, vous pouvez opter pour la création d’un thème enfant (child theme en anglais), basé sur un thème parent.

Le principe est simple et efficace : vous partez avec un thème contenant les fonctionnalités essentielles que vous souhaitez utiliser, avec une architecture et un design globalement adéquat vis-à-vis de votre projet. Vous prenez donc comme base ce thème qualifié de thème parent. Vous créez ensuite un thème enfant basé sur le thème parent en y ajoutant les fonctionnalités qui vous manquent et en adaptant les styles CSS pour que le design soit en accord avec votre projet.

Ainsi vous n’avez pas à tout refaire, vous partez sur des bases saines d’un point de vue code, design, fonctionnalités et interface d’administration. De plus, autre avantage non négligeable, si le thème parent évolue avec les nouvelles versions de WordPress, la mise à jour sur le thème parent va automatiquement se répercuter sur le thème enfant.

Il est toujours conseillé de créer un thème enfant plutôt que de modifier le thème original. Si vous le transformez plus ou moins en profondeur, vous perdez tout le bénéfice des mises à jour correctives du thème. En créant un thème enfant, vous adaptez le thème à vos besoins, sans modifier l’intégrité du thème parent. C’est l’idéal.

Pour cet exemple, nous allons partir du thème par défaut « Twenty Twelve ».

Le dossier du thème enfant

Nous allons créer un nouveau dossier pour notre thème enfant, nommez-le twentytwelvechild.

Vous y placerez bien sûr les fichiers constitutifs. Puis vous créerez le package et vous installerez le thème dans votre site WordPress comme nous l’avons vu dans le chapitre Gérer les thèmes.

La feuille de style du thème enfant

1. Le fichier CSS

Dans le dossier de notre thème enfant, pour que le thème soit valide, il faut créer une feuille de style CSS. Nous la nommons simplement style.css.
La feuille de style commence par un commentaire où sont indiquées un certain nombre d’informations :

/*
Theme name: TwentyTwelve Child
Theme URI: URL du site
Author: Votre nom
Author URI: URL
Description: C'est un thème enfant du thème parent TwentyTwelve
Version: v0.1
Template: twentytwelve
*/

Voici les principaux éléments de ce commentaire :

Theme name : nom du thème qui apparaîtra dans la gestion des thèmes dans l’administration de WordPress.
Theme URI : accès à la page Web du thème.
Author : nom de l’auteur de ce thème.
Author URI : accès à la page Web de l’auteur de ce thème.
Description : description de ce thème.
Version : version du thème proposé.
Et le plus important : Template: twentytwelve. C’est ici que vous indiquez le nom du thème parent. Vous devez indiquer le nom du dossier du thème parent en respectant scrupuleusement la casse (majuscules et minuscules) du nom.

2. Importer les styles parents

Maintenant il faut récupérer les styles du thème parent dans la feuille de style du thème enfant. Nous allons tout simplement utiliser une règle d’importation.

@import url("../twentytwelve/style.css");

Nous utilisons la règle d’importation de feuille de style @import url().
Nous indiquons le chemin d’accès à cette feuille de style :
.. : nous remontons l’arborescence des fichiers d’un cran.
/tewtytwelve/ : nous entrons dans le dossier du thème parent nommé twentytwelve.
Nous importons la feuille de style nommée style.css.

3. Créer les styles enfants

Nous venons d’importer les styles du thème parent dans la feuille de style du thème enfant. Donc pour le moment il n’y a aucun changement. Le design reste le même. Il faut donc créer nos propres styles. Nos styles enfants seront prioritaires sur les styles parents.

Comme nous reprenons les styles parents, il faut reprendre les mêmes noms de sélecteur.

Par exemple nous souhaitons modifier la couleur du titre du site dans l’en-tête et le mettre en italique :

h1.site-title a{ color:purple; font-style:italic

Et il en va de même pour tous les styles que vous souhaitez adapter à vos besoins.

Les autres fichiers

Maintenant, imaginons que vous vouliez personnaliser le pied de page pour vous ou votre client. Nous l’avons vu précédemment, c’est le fichier footer.php qu’il faut modifier. Mais bien sûr ce n’est pas le fichier du thème parent qu’il faut travailler, mais bien celui du thème enfant.

Pour le moment il n’y a pas de fichier footer.php dans le dossier du thème enfant. Il nous suffit tout simplement d’en créer un ou de dupliquer celui du thème parent et de placer cette copie dans le dossier du thème enfant. Ensuite, vous y apportez les modifications voulues.

Voilà une simple modification apportée dans le fichier footer.php : nous ajoutons un texte après le lien vers WordPress.

Site basé sur le thème Twenty Twelve et personnalisé

Il en sera de même pour les autres fichiers de structure que vous souhaitez personnaliser. Voilà donc la solution la plus raisonnable et la plus sûre : dupliquez le fichier du thème parent dans le dossier du thème enfant.

Conséquence de cette duplication du fichier footer.php : la mise à jour du thème parent ne se fera pas sur le thème enfant. Pour bénéficier des nouveautés du thème parent, il faudra alors modifier le fichier footer.php du thème enfant.

Le fichier functions.php

1. L’ouverture des fichiers

Nous l’avons vu précédemment, le fichier functions.php permet de paramétrer le thème utilisé. Dans le cas de l’utilisation d’un thème enfant, c’est bien le fichier functions.php du thème parent qui est utilisé. Il ne faut pas faire une duplication du fichier parent dans le dossier du thème enfant, cela va provoquer une erreur, car le fichier functions.php de l’enfant ne va ni remplacer, ni écraser celui du parent. Les deux fichiers seront ouverts : d’abord celui de l’enfant, puis celui du parent.

2. Ajouter une fonction

Nous voulons ajouter une nouvelle fonction à notre thème WordPress : proposer des nouvelles tailles pour l’insertion des images. Cette fonctionnalité est faite pour notre thème enfant, c’est pourquoi nous créons un fichier functions.php dans le dossier de notre thème enfant. Cette nouvelle fonction va s’ajouter aux fonctions du thème parent.

Voici le code qu’il faut saisir (URL de la source du code) :

// Add new image sizes
function new_insert_custom_image_sizes($image_sizes){
	// get the custom image sizes
	global $_wp_additional_image_sizes;
	// if there are none, just return the built-in sizes
	if(empty($_wp_additional_image_sizes)) return $image_sizes; 
	// add all the custom sizes to the built-in sizes
	foreach($_wp_additional_image_sizes as $id => $data){
		// take the size ID (e.g., 'my-name'), replace hyphens with spaces, and capitalise the first letter of each word
		if(!isset($image_sizes[$id])) $image_sizes[$id] = ucfirst(str_replace( '-', ' ', $id));
	}
	return $image_sizes;
}
function new_custom_image_setup(){
	add_theme_support('post-thumbnails');
	add_image_size('Mini Square', 70, 70, TRUE);
	add_image_size('Square', 100, 100, TRUE);
	add_image_size('Featured Tabs', 150, 225, TRUE);
	add_image_size('Featured', 640, 220, TRUE);
	add_filter('image_size_names_choose', 'new_insert_custom_image_sizes');
}
add_action('after_setup_theme', 'new_custom_image_setup');

Source