Comment créer un thème enfant et pourquoi l’utiliser ?

Nombreuses sont les personnes qui customisent leur thème WordPress. Cependant, il semblerait qu’une minorité d’utilisateurs de WordPress utilise un thème enfant. Serait ce dû à un manque de compréhension à ce qu’est un thème enfant dans WordPress ? Ou peu-être est-ce l’impression qu’il est difficile d’en créer un ? Dans ce tutoriel je vous propose de voir comment en créer un simplement. Nous allons voir aussi pourquoi créer un thème enfant WordPress peut se révéler très pratique et vous faire gagner du temps, notamment lors des mises à jours de votre thème principal, le thème « parent ».

Pourquoi devriez vous utiliser un thème enfant ?

Créer un thème enfant lorsque vous opérez des modifications de code dans votre thème peut vous épargner de futurs mots de tête. Les thèmes enfants vous permettent de modifier et d’adapter le code de votre thème d’origine. Ainsi, les futures mises à jour de votre thème parent n’effaceront pas vos modifications et ne modifieront donc pas l’apparence de votre site que vous aurez paramétrée dans votre thème enfant. En créant un thème enfant, vous créez un ensemble de fichiers séparés qui seront utilisés pour personnaliser votre thème sans que cela n’affecte le thème d’origine. Non seulement cela permet de rendre les mises à jours plus faciles, mais cela vous assure aussi de ne jamais rendre votre thème d’origine (thème parent) inutilisable du fait que vous ne modifierez jamais ses fichiers. Vous pourrez toujours désactiver votre thème enfant WordPress et ainsi revenir à l’original.

Pour commencer

Dans cet exemple, nous allons créer un thème enfant pour le thème Twentytwelve, qui fut le thème WordPress par défaut en 2012. Le thème par défaut en 2014 est appelé Twentyfourteen. Avant toutes choses nous avons besoin de créer un nouveau dossier pour votre thème enfant. Nommons le de la manière la plus conventionnelle, c’est à dire /twentytwelve-child/. Dans ce nouveau dossier de thème, créez un fichier appelé style.css et remplissez-le avec les informations ci-dessous. Le nom du thème (Theme Name), son adresse (Theme URL), sa description et son auteur (Author) sont à remplir selon votre cas et votre inspiration.

Les parties les plus importantes de ce fichier sont « Template : » et « @import » qui identifient les sources CSS du thème parent. Assurez vous que l’adresse vers votre thème parent est bien la bonne et que le nom du « Template : » correspond bien au nom du thème parent. Si vous utilisez un autre thème modifiez ces paramètres en conséquence. Veillez à bien respecter la casse, c’est à dire qu’une lettre majuscule est reconnue différemment de la même lettre en minuscule. Ici, dans notre exemple, le thème twentytwelve est tout attaché et en minuscule.

Activez votre thème enfant

Une fois que vous avez créé votre dossier de thème enfant contenant le fichier style.css, vous pouvez transférer et activer votre nouveau thème enfant. Transférer et activer un thème enfant se fait de la même façon que pour un thème « normal ». Depuis votre tableau de bord WordPress, transférez votre thème enfant via Apparences>Thèmes>Ajouter>Mettre un thème en ligne>Parcourir puis sélectionnez votre thème sur votre ordinateur. L’upload débutera et vous n’aurez plus qu’à l’activer. Au préalable, vous devrez compacter votre fichier au format zip. Bien sûr, pour que cela fonctionne le thème parent devra être présent. Il est aussi possible de transférer tous ces éléments par FTP, avec FileZilla, par exemple, sans avoir à les zipper au préalable.

Modifiez le style CSS de votre site

Nous avons donc créé notre thème enfant et nous l’avons téléchargé sur notre serveur distant. Bien. Vous ne verrez pour l’instant aucune incidence sur l’apparence de votre thème. En effet, tout ce que nous avons fait est d’importer le thème parent mais nous n’avons pas encore appliqué d’ajout de CSS. Tous les ajouts de CSS que nous ferons dans le thème enfant seront chargés après le thème parent. Tous les nouveaux styles CSS viendront remplacer ceux du thème parent. Par exemple, disons que nous voulons changer la couleur des titres de notre site. D’origine la couleur hexadécimale est #515151 ce qui correspond à un gris. Admettons que nous voulions plutôt une couleur rose qui est en hexa #FD6C9E. Il suffit d’ajouter le code css comme sur l’image ci-dessous :

Une fois la modification effectuée et votre page rafraîchie, le CSS de votre thème enfant va remplacer celui du thème parent, ici, twentytwelve. Dans notre exemple le titre de notre site sera rose, comme le montre les deux images ci-dessous :

Éditez le fichier functions.php

Functions.php est le fichier php où sont habituellement stockées les fonctionnalités principales d’un thème WordPress. Les fonctionnalités d’un thème parent sont toujours chargées avec le thème enfant, mais si vous avez besoin d’ajouter des fonctionnalités particulières à votre thème alors vous pouvez le faire en créant un nouveau fichier functions.php au sein de votre dossier de thème enfant, ici twentytwelve-child. Ce nouveau fichier functions sera chargé juste avant celui du thème parent. Votre fichier functions de votre thème enfant doit commencer par la balise d’ouverture php <?php et se terminer par la balise de fermeture php ?>. Entre les deux vous pouvez ajouter le code php requis.

Editez d’autres fichiers du template

Au delà du fichier CSS et du fichier functions.php, vous pourrez opérez des modifications structurant votre site en modifiant d’autres fichiers php constituant votre thème. Ceci est à réaliser avec précaution , mais de la sorte vous pourrez intervenir sur n’importe quel aspect de votre site. Contrairement au fichier functions.php qui est chargé automatiquement par le thème parent, les autres fichiers php devront être entièrement copiés dans votre dossier de thème enfant puisqu’ils remplaceront complètement ceux du thème parent. Ils pourront alors être édités et modifiés comme souhaité. Les fichiers php du thème parent seront alors complètement ignorés. La première chose dont nous avons donc besoin est de dupliquer le fichier du thème parent pour pouvoir, ensuite, l’éditer. Pour ce faire, il suffira de copier / coller le fichier concerné dans votre dossier de thème enfant en vous assurant bien de conserver le même nom et le même emplacement hiérarchique que dans le dossier du thème parent. Par exemple, si nous voulons modifier twentytwelve/page-template/front-page.php alors nous copierons et collerons ce fichier à l’emplacement twentytwelve-child/page-template/front-page.php. WordPress saura utiliser ce nouveau fichier php en lieu et place de l’original car son nom et son emplacement sont identiques. Vous pourrez ensuite ouvrir ce fichier et y apporter vos modifications.

Trouvez d’autres ressources concernant les thèmes enfants

Si, malgré ce tutoriel, vous éprouvez des difficultés pour réaliser un thème enfant il existe des plug-ins qui permettent de créer un thème enfant en 1 clic (ou presque). Vous avez par exemple :
One-Click Child Theme
Child Themify

Si vous avez besoin de précisions par rapport à cet article, le codex de WordPress est une ressource toujours intéressante.