Comment installer un thème enfant sur votre site WordPress ?

Voilà, votre site WordPress est installé correctement, votre thème est choisi et le tout n’attend plus que vos petits soins pour se développer. Il est cependant vivement conseillé de configurer un thème enfant avant toute modification.

1. Qu’est-ce qu’un thème enfant WordPress ?
2. Installation du thème enfant
3. Codes PHP et CSS minimum
4. Ajouter des fichiers
5. Avantages de créer un thème enfant sur WordPress
6. L’utilisation d’un plugin bonus

Mais qu’est-ce qu’un thème enfant sur WordPress ? Définition

Rassurez-vous, aucun accouchement à l’horizon ni même rien de bien compliqué ! Un thème enfant est une sorte de copie de votre thème en cours sur lequel vous appliquerez toutes les modifications nécessaires à la personnalisation de votre site WP. Mais alors, pourquoi ne pas le faire directement sur les fichiers du thème que vous avez déjà installé ?

Pour une raison simple, à chaque mise à jour de WordPress, toute modification apportée aux fichiers PHP sur un thème parent sont écrasées et donc annulées. Si vous ne voulez pas perdre tout à chaque update, il va falloir passer par la case thème enfant. En effet les modifications que vous pourriez apporter resteront intactes même après le passage d’une mise à jour ! De plus, le thème enfant propose une plus grande visibilité pour vos futures customisations.

L’installation d’un thème enfant

Tout d’abord, il vous est nécessaire d’accéder au FTP de votre site. Vous pouvez le faire soit directement sur le site de votre hébergeur, soit le faire via un logiciel. Dans ce tuto nous allons opter pour la seconde option, bien plus confortable.

Une fois dans le dossier de votre site prenez le chemin suivant : /nom de votre site/wp-content/themes, si vous n’avez pas encore créé de thème, vous devriez avoir ceci :

C’est ici que tout se passe ! Créez directement dans ce dossier un nouveau dossier portant le nom de votre thème et entrez-y, nous allons maintenant créer les fichiers nécessaires à son fonctionnement.

De base, seulement deux fichiers à la création d’un thème enfant function.php et style.css, oui ce sont deux fichiers qui existent déjà dans le thème que vous utilisez pour le moment. Créez donc des deux fichiers et commencez par ouvrir function.php avec votre éditeur de texte et collez-y le code suivant :

Ensuite, ouvrez le fichier style.css, tout en modifiant les lignes pour que cela corresponde à votre thème enfant, appliquez ce code :

Voici à quoi correspondent ces quelques lignes :

• Theme Name: Le nom de votre thème enfant
• Description: Si vous le souhaitez, vous pouvez décrire ce thème
• Author: ça, c’est vous ! l’auteur de ce thème
• Author URI: le site de l’auteur, un petit coup de pub en somme
• Template: il s’agit du nom du thème parent, ici il s’agit de twentysixteen. Attention, WordPress est sensible à la casse respectez les majuscules s’il y en a.

Codes PHP et CSS minimum pour un thème enfant dans WordPress

Le fichier nommé styles.css que vous avez créé doit être complété avec un commentaire CSS. Une solution simple et largement pratiquée consiste à recopier l’en-tête du thème parent en ajoutant « child » au nom pour qu’aucune confusion se fasse dans les thèmes de l’administration. Exemple :

/*
Theme Name: Twenty Sixteen child
*/

A noter que si le nom n’est pas présent dans le fichier styles.css, celui affiché est celui du dossier. Cela dit, il vous faut faire une relation parent/enfant dans WordPress. Vous avez donc besoin d’ajouter dans le commentaire précédent le marqueur Template avec pour valeur le nom du dossier thème parent :

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/

Bien, à cette étape, le fichier existe bien si vous vous rendez dans les Apparences de WordPress. En pratique, vous ne verrez pas d’image relative à votre nouveau thème enfant. Il vous faut mettre un fichier intitulé screenshot.png dans votre dossier. Cela ne fonctionne pas ? C’est normal, il manque pour terminer l’installation du thème enfant de base l’import des feuilles de styles du parent. Ajoutez alors l’URI du fichier CSS parent comme ceci (son nom change en fonction des thèmes) :

*/
Theme Name : Twenty Sixteen Child
Template : twentysixteen
*/
@import url("../twentysixteen/styles.css")

Voilà, votre thème enfant est créé, vous pouvez d’ores et déjà modifier le css de votre site en toute tranquillité. Les modifications de ce présent fichier vont ainsi « écraser » le code du parent.

Ajouter des fichiers à votre thème enfant WordPress

Dernière étape de la création du votre thème enfant. Si vous désirez changer un modèle de page, le header ou le footer de votre site Worpdress, autant le faire directement depuis votre thème fraichement créé. Cette fois-ci, nul besoin de copier du code, il vous suffit simplement d’aller chercher le fichier qui vous intéresse dans le thème parent et de le coller dans le thème enfant. Allez, un petit exemple :

Je désire modifier le header de mon site pour par exemple y mettre un texte supplémentaire. Je vais donc chercher le fichier header.php dans le thème parent:

Il me suffit de le coller dans le thème enfant (pas de le déplacer) … et voilà. WordPress vérifiant en premier lieu les fichiers du thème enfant, c’est votre version du header.php qui sera prise en compte.

Vous pouvez donc désormais modifier et donner un style unique à votre site WordPress à volonté, sans craindre les mises à jour.

Avantages de créer un thème enfant

De nombreux Webmasters sont susceptibles d’intervenir dans la vie d’un site et l’exploitation de celui-ci. Lorsque vous utilisez un thème enfant, vous récupérez toutes les fonctionnalités du thème parent pour ce dernier, en toutes circonstances.Ce qui assure également de grands avantages en termes de maintenance. Des exceptions peuvent toutefois avoir lieu lorsque vous utilisez certains plugins intégrés dans les thèmes parents comme Woocommerce.

Ce type d’extension évoluant régulièrement, il vous faut parfois suivre non seulement la mise à jour du plugin mais également celle du parent (certains éditeurs traînant les pieds à faire évoluer leur thème Premium et les modèles de pages liés par exemple). Voir dans ce cas directement sur le support de votre vendeur de thème ou corriger par vos soins les fichiers obsolètes dans l’état du système.

Bonus : le plugin Child Theme Configurator

Si vous souhaitez éviter de toucher au code ou aller directement sur votre serveur FTP, vous avez la possibilité d’utiliser des extensions spécialisées et bien faites. Pour notre part, nous vous conseillons d’utiliser le plugin Child Theme Configurator. Ce dernier vous prépare la création du thème enfant sur la base d’un fichier styles.css et function.php ; Il vous permet ensuite de placer assez simplement via votre back-office WordPress les fichiers dont vous avez besoin. Nous l’utilisons assez régulièrement sur les mises à jour de thèmes premium récupérés, l’ajout et la customisation des champs « theme, description, auteur, thumbnail » est très rapide. Il est ensuite retiré de vos dossiers WordPress pour limiter les risques tant en termes de failles (bien que ce soit un plugin safe jusqu’à présent) et ne pas alourdir le système.