Développement Web

Comment créer un thème enfant dans WordPress ?

Tout savoir sur l'importance d'un thème enfant par rapport à son thème parent.

  • Marion Pasquet

  • 15 Février 2021
Header Comment créer un thème enfant WordPress ?

Vous avez créé votre site WordPress il y a peu avec un thème moderne mais ce dernier ne vous convient pas totalement ?

Il est rare de trouver un design correspondant parfaitement à nos envies. La plupart des thèmes, qu’ils soient gratuits ou payants, possèdent un lot de paramètres personnalisables : couleurs, typographies ou encore aspect de la navigation.


Lorsque l’on n’est pas webdesigner et que le code html/css ressemble à du chinois, il est difficile de modifier les éléments de son site sans prendre le risque d’endommager les fichiers du thème. C’est à ça que sert un thème enfant.



1. Qu'est-ce qu'un thème enfant ?


Tout d’abord, définissons le mot “Thème” (ou template en anglais).


Un thème WordPress est un modèle de site prêt à l’emploi : il propose un design de pages, des animations, et une charte graphique qui lui sont propres. En l’état, un thème sophistiqué (souvent payant), vous permet d’avoir un site moderne avec très peu de modifications structurelles ou design. Très pratique si vous ne souhaitez pas ajouter votre touche personnelle à l’aspect du site.
Il ne vous reste, pour ainsi dire, qu’à écrire vos contenus textuels, changer les images et le tour est joué.


Un thème enfant est un thème qui fonctionne en duo avec un autre, dit thème parent. Ce thème enfant va hériter de toutes les fonctionnalités, du style visuel et du modèle des pages de son thème parent, et sera mis à jour en même temps que ce dernier.
Beaucoup de webdesigner renomment leur thème enfant de la même manière que le thème parent avec la terminaison “-child”.

Par exemple, si vous utilisez le thème gratuit “Business Point”, votre thème enfant pourrait s’appeler “Business Point child”. Cette solution permet de retrouver plus facilement les thèmes liés dans l’onglet Apparence > Thèmes de WordPress.


Menu Apparence Thèmes de WordPress Position du menu "Apparences" > "Thèmes" dans Wordpress.

À noter qu’il n’y a pas d’obligation dans le nommage du thème enfant. Vous pouvez lui attribuer n’importe quel nom tant que vous suivez les étapes décrites dans la troisième partie de cet article.


Je vous recommande fortement d’utiliser des thèmes enfants pour modifier ou personnaliser les thèmes WordPress afin d’être sûr de ne pas endommager l’affichage de votre site.


2. Pourquoi utiliser un thème enfant dans WordPress ?


Il existe plusieurs méthodes pour personnaliser un thème WordPress :

  • Outil de personnalisation dans votre menu WordPress (Menu > Apparence > Personnaliser).
  • Installation de plugins (comme Yellow pencil).
  • Création d’un thème enfant.

  • Les deux premières méthodes sont accessibles à tous les niveaux et permettent de modifier un grand nombre d’éléments d’un thème. Cependant vous serez toujours plus ou moins restreint si vous souhaitez vous éloigner des réglages proposés par votre thème ou les plugins de personnalisation.
    Ces deux méthodes ne nécessitent pas l’installation d’un thème enfant (même si cela est toujours recommandé).


    Si vous avez des bases en code HTML/CSS et que vous souhaitez modifier directement les fichiers de votre thème afin d’ajouter ou de modifier les paramètres de votre choix, il vous faudra créer un thème enfant.


    Votre thème enfant est connecté à son parent, si bien qu’il a hérité du même design et des mêmes modèles de page. Ainsi lorsque vous allez ajouter vos modifications dans le fichier styles.css du thème enfant (le fichier qui gère une grande partie de l’esthétisme du site), ces dernières seront visibles sur votre site sans impacter les fichiers de votre thème parent.


    Comment cela est-il possible ?


    Les fichiers ajoutés dans le thème enfant servent à prendre le dessus sur les fichiers du thème parent. Le thème enfant n'a besoin que deux fichiers pour fonctionner, des fichiers de personnalisation qui vont prendre le dessus sur les mêmes fichiers du thème parent (chaque thème Wordpress a la même architecture de fichiers).
    Pour le design, Wordpress prendra en priorité les modifications de votre thème enfant. Pour tout ce qui est fonctionnel ou structurel (modèle de page, animations...) WordPress prendra les fichiers du thème Parent si vous n'avez pas ajouté de nouveaux éléments.

    Différence entre un thème parent et un thème enfant Différences entre un thème parent et un thème enfant WordPress.

    Si je devais simplifier, je dirais que votre corps est votre thème parent et vos vêtements votre thème enfant.

    Vous pouvez changer de tenue à volonté, changer de look, sans modifier votre corps (logique hein ?).

    De même que vous pouvez ajouter des éléments à votre corps comme des piercings ou changer la couleur de vos cheveux, sans changer de corps (ajout de fonctionnalités au thème parent).


    “Pourquoi ne pas directement modifier les fichiers du thème parent ?” me direz-vous.


    Deux raisons à cela :

  • Éviter d’endommager votre thème parent.
  • Les fautes dans le code css et html sont vite arrivées et peuvent engendrer des erreurs dans WordPress.
    La plupart du temps il suffit d’enlever ce que vous avez ajouté pour rectifier les erreurs.
    Dans quelques cas, vos actions sur les fichiers d’un thème peuvent l’endommager partiellement ou entièrement, et même un retour en arrière n’y changera rien.
    Si vous n’avez pas prévu de sauvegarde de votre site, vous risquez de ne pas pouvoir régler vos problèmes ou vos erreurs fatales.

  • Écraser vos modifications lors de mises à jour.
  • Les mises à jour de thème sont assez fréquentes et si vous modifiez directement les fichiers de votre thème parent, tout ce que vous aurez ajouté sera tout bonnement effacé.
    Il vous faudra refaire vos modifications à chaque mise à jour du thème ou ne plus mettre à jour votre thème à partir du moment où vous avez modifié le moindre fichier.
    Attention toutefois, ne pas mettre à jour son thème peut engendrer des failles de sécurité à la longue et laisser la porte ouverte aux hackers ou robots spammeurs qui s’attaquent à la moindre faiblesse d’un site WordPress.

    Dans quel cas utiliser un thème enfant ?

  • Modifier des éléments designs que vous ne pouvez pas changer via les options du thème (couleurs, typographie, taille de texte etc…).
  • Modifier/créer des modèles de page.
  • Ajouter des fonctions supplémentaires à votre thème.

  • Si vous utilisez un thème enfant, que vous réalisez des modifications mais que votre site crash (oops), vous n'aurez alors endommagé que le design et les fonctionnalités ajoutés à votre thème parent mais pas du tout la structure et le fonctionnement de celui-ci. C'est plus simple de corriger un thème enfant qui comporte très peu de fichiers plutôt que l'intégralité d'un thème parent qui comporte 98% des fichiers responsables du bon fonctionnement de votre site.


    À noter : si vous avez créé votre thème vous-même, il ne vous est pas nécessaire de créer un thème enfant, puisque c’est vous qui gérez l’évolution et les mises à jour de ce dernier.

    Quelques agences créent elles-mêmes le thème de leur client afin de leur proposer un site unique : Très alléchant et vendeur comme pratique.
    Les futures mises à jour de votre thème personnalisé pourraient être compromises si vous souhaitez arrêter votre contrat avec votre prestataire : chaque agence/développeur code à sa manière, si bien qu'un thème fait entièrement à la main pourra s'avérer compliqué à faire évoluer pour un autre prestataire.


    3. Comment créer un thème enfant dans WordPress ?


    Un thème enfant doit être obligatoirement composé de deux fichiers pour fonctionner : un fichier styles.css et un fichier functions.php.

    Le premier fichier sert à personnaliser le style graphique de votre site (typographie, couleurs, taille de texte etc…).

    Le deuxième fichier sert à faire le lien avec votre thème parent et également d’y ajouter les nouvelles fonctionnalités que vous désirez ajouter à votre site.



    a. Création du dossier du thème enfant


    Pour cela, il vous faudra vous connecter au serveur ftp de votre site internet (par exemple via le logiciel Filezilla).

    Créez un dossier pour votre thème enfant dans wp-content/themes. Vous pouvez l’appeler comme bon vous semble, mais je vous conseille de reprendre le modèle cité précédemment à savoir “NomDeVotreThemeParent + child”, pour l’identifier rapidement.

    Si vous ne souhaitez pas ce type de nomination, libre à vous de lui attribuer le nom de votre choix.

    Dans mon exemple, je souhaite créer un thème enfant au thème “business-point”. J’ai donc nommé mon dossier “business-point-child”.


    Création du dossier pour le thème enfant WordPress Création du dossier pour le thème enfant WordPress.

    b. Le fichier styles.css


    Dans le dossier que vous venez de créer, ajoutez un nouveau fichier que vous nommerez styles.css .

    Copiez collez le code ci-dessous à l'intérieur, puis enregistrez.


    /*
    Theme Name: Business Point Child.
    Theme URI: https://LeSiteDuTheme.com
    Description: Description du thème enfant.
    Author: Auteur du thème
    Author URI: https://siteDeLauteur.com/
    Template: business-point
    Version: 1.0
    */

    Pensez à changer dans ce code vos éléments : theme name, le nom de votre thème enfant et template, le nom du thème parent.


    Si vous connaissez les bases du code html/css, vous constatez que le code ci-dessus est commenté, il n'exécute donc pas de fonctionnalités. Ce code est obligatoire dans le styles.css du thème enfant car il indique à WordPress que ce dossier est un thème mais également que ce dernier est un thème enfant d’un thème parent.

    Certaines lignes sont facultatives (author, author URL, Version ou encore Description). La plus importante est “Template” car elle fait le lien entre le thème enfant et son thème parent. Faites très attention à ne pas faire de faute dans l’écriture du thème principal, sinon WordPress indiquera une erreur lors de l’activation de votre thème enfant.

    Pour trouver le nom exact de votre thème parent, regarder dans son fichier styles.css, et cherchez la ligne “Text Domain:”. Dans mon cas, le nom exact du thème principal était “business-point”.

    c. Le fichier functions.php


    L’étape suivante est de créer le fichier functions.php : Le code à l’intérieur de ce fichier sert à indiquer à WordPress où se situe votre css personnalisé. Sans celui-ci, votre site n’aura pas de design.
    WordPress fera passer votre fichier avant celui du thème Parent, puis, pour les éléments non modifiés, il prendra le style indiqué dans le styles.css du thème principal.


    Créez un fichier functions.php et insérez les lignes suivantes :


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

    Laissez la balise php ouverte : c'est dans ce fichier que vous allez mettre toutes les nouvelles fonctionnalités en php que vous souhaitez ajouter à votre thème.

    Puis enregistrez-le au même niveau que votre fichier styles.css dans le dossier de votre thème enfant.

    d. Activation du thème enfant


    Rendez-vous sur votre WordPress dans Apparence > Thèmes.

    Vous constatez l’apparition de votre thème Enfant sans photo. Afin de remédier à cela, il suffit de créer votre image en la nommant “screenshot.png” : c’est ce nom-là que WordPress cherchera afin d’afficher l’image en aperçu du thème.

    Une fois votre image créée et nommée, insérer la à la racine de votre dossier enfant wp-content/themes/ThemeEnfant au même niveau que les deux fichiers précédemment créés.

    Réactualisez la page Apparence > Thèmes. Votre thème enfant a désormais une photo d'aperçu.

    Activation du thème enfant WordPress Activation du thème enfant WordPress.

    Il ne vous reste plus qu'à l'activer et le tour est joué.


    Tags

    Intégration, Développement, WordPress, CMS, Web, Webdesign

    À propos

    Photo de profil Marion Pasquet

    Je suis une Webdesigner & Graphiste de 25 ans basée sur Aix-en-Provence & Avignon.

    Tags

    • Art
    • Inspiration
    • Design
    • Intégration
    • Développement
    • WordPress
    • CMS
    • Web
    • Webdesign
    • Adobe
    • Graphisme
    • UX/UI Design
    • Material Design

    Partager cet article