Créer un thème enfant pour WordPress

Lorsqu’on utilise un thème, que nous n’avons pas développé, on a parfois besoin d’adapter les CSS, un comportement, ou une de ces représentations à nos besoins. Certes il est toujours possible de modifier le code source (le back office le permet grâce à l’éditeur, et les options de thèmes également) mais certaines de ces modifications risquent fort d’être écrasées lors de la prochaine mise à jour du thème.

Pour éviter cela, il existe la possibilité de créer un Thème enfant (Child Theme) et ainsi de pouvoir adapter le thème ‘parent’ et l’enrichir tout en s’affranchissant des problèmes de mises à jour ultérieures. Si vous ne souhaitez pas suivre toutes les étapes qui suivent, notez qu’il existe des plugin qui permettent justement de prendre en charge la gestion et la création de ces thèmes enfants.

Thème parent vs thème enfant

Mise en place d’un thème enfant

Pour mettre en place un thème enfant, il suffit de créer un dossier que l’on nomme de manière libre, mais notez qu’il est préférable de nommer ce dossier comme le thème référent en y ajoutant la chaîne ‘-child‘. Cela nous permettra d’une part de garder ces deux dossiers groupés et de comprendre rapidement qui est qui et qui fait quoi.

Pour exemple, basons nous sur le thème WordPress ‘twentyseventeen‘ et créons un dossier qui va contenir le thème enfant et nommons le ‘twentyseventeen-child‘

Une fois créé, ce dossier doit contenir un, voir deux, fichiers.

Le premier fichier, style.css (qui est obligatoire) va contenir d’une part des commentaires permettant de décrire le thème enfant et préciser sa liaison vers le fichier CSS d’origine.

Le second fichier functions.php a pour objectifs d’étendre certaines fonctionnalités du thème parent, ou, si besoin de charger les styles CSS du thème parent. (vous comprendrez mieux cette dernière possibilité en poursuivant la lecture de cet article… enfin je l’espère).

Bien sur, le contenu du thème enfant ne se limite pas à ces deux fichiers, il est tout à fait possible d’ajouter d’autres fichiers (et ce, sans limite). Il faut savoir que tous fichiers placés dans ce dossier écrasera celui placé dans le dossier parent (s’il existe) sauf pour pour le fichier functions.php, qui lui sera simplement chargé en priorité.

Donc, pour l’instant ces trois premières opérations suffisent, à savoir, création d’un dossier, ajout d’un fichier styles.css et mise en place facultative, si nécessaire, du fichier functions.php.

Le fichier styles.css du thème enfant

Il s’agit d’un simple fichier CSS contenant obligatoirement un entête, commentée de manière spécifique, pour être reconnu en tant que tel par WordPress.

/*!
  Theme Name: Twenty Seventeen Enfant
  Template: twentyseventeen
*/

Juste un petit détail, il est important si vous employez un préprocesseur SASS d’ajouter un point d’exclamation juste après l’ouverture du commentaire afin de préserver ce bloc commenté lors de la compilation.

Les commentaires sont en fait un ensemble de propriétés / valeur qui vont venir définir et préciser certaines informations. Les deux propriétés obligatoires sont Theme Name qui contient le nom du thème enfant et Template qui cible le nom du dossier du thème parent auquel se rattacher (Attention, les chemins sont sensibles à la casse, et donc, il faut bien écrire le nom du dossier tel qu’il l’est sur le serveur). Si vous le souhaitez, ou si cela est nécessaire pour la distribution de ce thème enfant,  vous pouvez renseigner d’autres propriétés complémentaires comme : Theme URI, Description, Author, Author URI, Version, License, License URI, Tags, Status, Domain Path et Text Domain.

Toutes ces propriétés parlent d’elles mêmes, excepté peut être les deux dernières, qui, en fait permettent de définir; pour la première le chemin d’accès de la traduction (attention de faire précéder le chemin par un slash) et pour le second le slug du thème (par exemple: un-nom-a-particules pour ‘Un Nom à particules’), tout ceci dans un objectif de localisation, ou de portabilité, de votre thème (vous trouverez plus d’informations concernant ces deux propriétés sur How to Internationalize Your Plugin).

Attention, à ne pas placer d’espace entre le nom de la propriété et les deux points… par exemple Template: et non Template :

Activons le nouveau thème

Depuis wp-admin>Apparence>Thèmes, nous pouvons maintenant sélectionner le thème enfant en tant que thème et choisir Activer. Une fois activé, le thème se charge, et, du fait que pour l’instant son fichier styles.css ne contient aucun CSS, aucun style ne sera appliqué à la page. On risque fortement obtenir un HTML brut de décoffrage qui cependant reste utilisable et fonctionnel. Je dis fortement, car certains thèmes comme hueman par exemple, chargent leurs styles de manière optimisée et donc préservent leur rendu de base malgré l’emploi d’une thème enfant.

Dans notre cas, en employant le thème Twenty Seventeen nous devons charger les styles CSS, du thème principal, et ce, de manière explicite et directe. Alors là, plusieurs écoles se présentent.

Commençons par une première méthode utilisée par le passé mais qui est devenue non recommandée. Cette méthode consiste à employer au tout début du fichier styles.css enfant une instruction d’importation @import qui charge le fichier styles.css parent. Toutes les règles qui suivent viennent écraser les précédentes par simple phénomène de cascades:

@import url('../twentyseventeen/style.css');

Une fois cette ligne ajoutée, rechargez la page et hop… nickel tout s’affiche visuellement comme escompté.

Parfait, mais pas optimal. Pas optimal, pour de multiples raisons, d’une part car @import risque très souvent de ne pas charger les diverses feuilles de styles CSS dans l’ordre attendu et d’autre part cet usage risque d’augmenter considérablement le temps d’affichage global de la page, ou encore de ne pas permettre de contrôler combien de fois cette même feuille de style CSS sera chargée. Voir à ce sujet l’excellent article de Steve Souders, Don’t use @import.

Décortiquons le processus

Revenons un peu en arrière. Il y a quelques années quand WordPress n’était qu’un outil de blog, il était courant d’intégrer les feuilles de styles depuis le fichier header.php au travers d’une balise <link>, jusque là rien de bien anormal… mais bon, depuis cette époque WordPress à fait du chemin et de multiples librairies, plugin et autres outils sont venus enrichir les palettes à disposition.

Imaginons, donc, que le thème principal utilise bootstrap, et charge donc les CSS propres à Bootstrap. Ajoutons maintenant un plugin, qui lui aussi s’appui sur Bootstrap, et donc nécessite également de charger les CSS propre à Bootstrap. Si le thème parent use de la balise <link> rien ne nous indique que cette feuille CSS est déjà prise en compte par le thème lors de l’ajout du plugin. Vous avez compris le problème… Il nous faut donc employer un outil de chargement qui soit adapté à cette problématique.

Et c’est là que WordPress, dans son évolution, prend en compte ces besoins et nous propose des fonctions de prise en charge plus abouties en ce qui concerne le chargement aussi bien de nos scripts que de nos styles.

Donc que fait on ?

La question qu’il faut alors se poser, est:

Comment notre thème parent importe-t-il lui même ses propres styles ?… utilise-t-il une balise <link> dans le fichier header.php ou bien charge-t-il ses style au travers des méthodes vues au chapitre précédent ?

Commençons déjà par commenter la ligne /*@import url() */ que nous avions ajouté précédemment et ensuite en fonction du contexte et des méthodes présentes dans le fichier parent adaptons la prise en charge adaptée.

Au cas où nous trouvions une balise <link> au sein de la page header.php du thème parent, et que cette balise pointe vers le fichier styles.css  parent, il va nous falloir dupliquer la page et placer cette copie dans le dossier enfant. Nous pouvons modifier le fichier et retirer en toute tranquillité cette balise du thème enfant.

Ensuite et quelque soit le contexte, nous pouvons importer le styles.css du dossier parent depuis une fonction placée dans le fichier functions.php du thème enfant.

<?php
  function lancer_chargement_css() {
      wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
  }
  add_action( 'wp_enqueue_scripts', 'lancer_chargement_css' );
?>

Revenons quelques instants sur cette fonction

Un simple hook, ajoute la fonction lancer_chargement_css à la liste de chargement. De là, nous remarquons deux choses; un, l’emploi de get_template_directory_uri() qui renvoie le chemin d’accès du dossier du thème, et donc celui du thème parent qui reste référent dans le cas de l’emploi d’un thème enfant. Et deux, l’utilisation de la chaîne style-parent qui deviens l’identifiant Id de la balise <link> qui va être générée de manière dynamique pour importer le style, à ceci prêt que le mot -css a été ajouté à la chaîne d’identification.

Ouvrez le code source de la page, au sein du navigateur, pour vérifier la bonne prise en compte de cet identifiant.

Améliorons la prise en charge générale

Le style enfant peut également être chargé en usant de la même fonction. De même, et si besoin était, d’autres feuilles de styles CSS peuvent être ainsi ajoutées et chargées… L’ordre de chargement sera alors respecté en fonction de l’ordre des lignes ajoutées dans la fonction. Vous pouvez également ajouter une règle dans la feuille de style enfant. Par exemple :

#content {
  color: #993300;
  font-size: 1.6em;
  font-weight: 700;
}

puis adaptons la fonction de chargement pour prendre en compte aussi bien les feuilles de styles enfant et parent.

<?php
  function lancer_chargement_css() {
      wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'style-enfant', get_stylesheet_directory_uri() . '/style.css', array( 'style-parent' ) );
  }
  add_action( 'wp_enqueue_scripts', 'lancer_chargement_css' );
?>

Notez au passage que le style enfant invoque cette fois-ci la fonction get_stylesheet_directory_uri() qui récupère le chemin du dossier de la feuille de style courante. De plus, ce chargement emploie une instruction supplémentaire, array(‘style-parent’). Il s’agit là en fait d’une directive qui assure que le chargement du style parent soit bien effectué avant le chargement du style enfant. Ce tableau (array) pourrait contenir d’autres feuilles de styles à charger en amont. Attention cependant à ne pas charger des feuilles de styles en double, voir l’article Child-Thème, gérer les dépendances.

Rechargeons la page… que se passe-t-il ? le texte principal de la page se colore en ocre et s’écrit de manière plus appuyée… fonctionnel non ? En fait en surface cela fonctionne, mais qu’en est il au niveau du code source. Inspectons le et assurons qu’il n’y ait pas de doublons ou tout autre type de désagréments dû à la multiplicité d’éventuelles autres requêtes. Il est bon de compléter ce présent article en se rapprochant de l’article Charger scripts et styles dans WordPress.

Quels sont les fichiers qu’il nous faut ajouter ?

À ce stade, il n’y aurait qu’un seul fichier qui pourrait être  utile d’ajouter, il s’agit d’une capture d’écran, ou de tout autre représentation visuelle, qui apporterait une information supplémentaire au moment du choix du thème sur la page wp-admin>Apparence>Thèmes. Pour l’instant, et par défaut, WordPress emploie un masque de transparence. Ajoutons simplement un fichier screenshot.png, qui peut être la copie du screenshot du thème parent à laquelle on superpose la mention thème enfant.