Personnaliser un Thème WordPress avec un Child Theme

Personnaliser un thème WordPress peut être assez facile selon le thème installé. En effet, de nombreux thèmes offrent la possibilité de le modifier directement à partir du Tableau de bord dans la section Apparence sous le lien Theme Options.

Dans cette section, le développeur du thème nous met à disposition plusieurs onglets allant des options générales (insertion du logo, favicon, texte du copyright, etc.) à la customisation du style CSS du thème, passant par quelques éventuels réglages de sliders s’il y en a, ou la modification des menus. Cela dépend complètement de ce qui est proposé dans le thème installé.

Mais que fait-on si l’on souhaite apporter des modifications au thème et qu’il n’existe pas d’options facilitant ces modifications ?

Il existe deux solutions à ce problème. La première est de modifier directement les fichiers du thème afin d’améliorer son style dans le fichier style.css ou d’ajouter quelques fonctions utiles au fichier functions.php, par exemple. Cependant, cette solution est fortement déconseillée. En effet, les thèmes sont généralement mis à jour par leur concepteur, donc si avant de mettre à jour notre thème, celui-ci a subi des modifications dans ses fichiers, celles-ci seront simplement  écrasées par les nouveaux fichiers de la mise à jour!

Arrive donc la deuxième solution qui est la personnalisation du thème WordPress avec un child theme.

Qu’est-ce qu’un Child Theme?

Un child theme, thème enfant en français, est, à la base, le même que le thème parent. Il s’agit en fait de créer une sorte de copie du thème parent dans le dossier wp-content/themes/ contenant les autres thèmes, et ce sera donc à cette copie que l’on apportera les modifications souhaitées. En d’autres termes, le thème parent que l’on voulait modifier au début sera modifié à travers les fichiers créés dans le child theme.

Voyons de plus près comment se fait la création du child theme.

Création du Child Theme

Tout d’abord, on retrouve le thème parent dans le dossier wp-content/themes/<nom du thème à personnaliser>. A priori on ne touchera pas à ce dossier. Afin de personnaliser ce thème, nous créerons le dossier du child theme : wp-content/themes/<nom du child theme>. C’est dans ce dossier qu’on créera les fichiers nécessaires à la personnalisation du thème.

Prenons l’exemple du thème Twenty Twelve que l’on retrouve avec l’installation WordPress. Nous personnaliserons ce thème en créant un child theme que l’on nommera Twenty Twelve Child, par exemple. Le dossier de ce thème sera alors à l’adresse relative suivante : wp-content/themes/twentytwelvechild. Afin de créer notre child theme, on a juste besoin de créer un fichier style.css dans ce dossier, en ajoutant le code suivant au début du fichier :

/*
Theme Name: Twenty Twelve Child
Description: Child theme de Twenty Twelve
Author: WPScouts
Author URI: https://wpscouts.com
Version: 0.1.0
Template: twentytwelve
*/

Ici, il faut au minimum indiquer le nom du thème parent et celui du thème enfant.

Une fois ce fichier créé et enregistré, on peut à présent se rendre à la liste des thèmes dans le Tableau de bord dans Apparence > Thèmes, et vérifier que le child theme a bien été créé comme dans l’image suivante :

En appuyant sur Activer, on obtient une interface du site semblable à celle du thème parent car nous n’avons a priori apporté aucune modification au thème. Afin d’apporter les changements souhaités, il faut importer la feuille de styles du thème parent et l’inclure dans notre child theme en insérant la ligne de code suivante à la suite du fichier style.css :

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

On peut désormais modifier le style du thème enfant en définissant les règles que l’on souhaite. On peut par exemple modifier la police et sa taille en insérant la ligne de code suivante à la suite :

 body{ font: 14px Arial, Helvetica, Sans-serif;}

Les autres fichiers du child theme

Le child theme doit obligatoirement contenir le fichier style.css. Cependant, on peut très bien modifier les différents templates du thème en copiant le fichier correspondant dans le child theme. Par exemple, on peut modifier le footer en copiant le fichier footer.php du thème parent.

Un autre fichier important mais qui n’est pas un template est le fameux functions.php. Contrairement au  style.css qui permet de changer l’apparence du thème, celui-ci quant à lui, il permet de modifier la structure. Nous étudierons plus en détail le fonctionnement de ce fichier dans un prochain tutoriel.

Conclusion

Nous avons vu que la personnalisation d’un thème se fait en créant une copie du dossier de ce thème dans lequel nous créons un fichier style.css qui personnalisera l’apparence du thème. Un nouveau thème s’ajoute alors à la liste des thèmes dans le Tableau de bord. Partant de cette base, on peut modifier le thème parent tant au niveau design qu’au niveau algorithmique.

Nous avons donc posé les bases du concept du child theme, et nous verrons dans de prochains tutoriels comment s’approprier les différents fichiers et notamment comment ajouter de nouvelles fonctions à notre child theme. En attendant, la discussion reste ouverte dans la partie commentaire pour vos questions et remarques!