Comment créer un child theme (thème enfant) WordPress

Comment créer un thème enfant (child theme) pour WordPress

Tutoriel pour apprendre comment créer un child theme (thème enfant) pour votre site WordPress.

Votre site WordPress est maintenant bien installé et vous souhaitez personnaliser son thème. Vous pouvez le customiser avec les options disponibles du thème, bien sûr, mais vous voudrez surement changer des petites choses non prise en compte dans les options en passant directement par son code source comme les CSS.

Attention, toutes vos modifications (code source) seront perdues lors d’une future mise à jour du thème ! La solution est de créer un child theme (thème enfant) à votre WordPress.

C’est quoi un thème enfant (child theme) ?

Avant de voir comment créer un child theme WP, il est bon de savoir ce qu’est un thème enfant WordPress. Un thème enfant (child theme) est basé sur le thème parent et reprend l’ensemble des fonctionnalités de celui-ci sans les modifier. Vous pourrez ainsi personnaliser votre thème à partir du thème enfant sans jamais perdre vos modifications lors d’une mise à jour du thème parent.

Tous les fichiers placés dans le thème enfant (child theme) WordPress ne seront jamais écrasés ou modifier par le thème parent.

Si vous achetez un thème premium il y a de forte chance qu’il possède son child theme dans le zip que vous aurez téléchargé. Il faut bien sûr installer les deux thèmes mais n’activer que le thème enfant via l’administrateur de WordPress.

Comment créer un child theme WordPress ?

Pour créer le thème enfant  (child theme) WordPress, vous aurez besoin, du thème d’origine (le thème parent) un accès FTP à votre serveur d’hébergement et la création d’un dossier et de 2 fichiers.

1 – Création du dossier thème enfant

Avec votre client FTP préféré, ici j’utilise Filezilla, connectez-vous à votre serveur d’hébergement et rendez-vous dans « wp-content > themes ». Faites un clic-droit puis cliquez sur « Créer un dossier ».

Création du dossier thème enfant

Donnez un nom à votre thème enfant. En général on prend le nom du thème parent suivi de « -child » ici nous prendrons comme parent le thème « twentyseventeen » le nom du dossier sera donc « twentyseventeen-child ».

Création du dossier thème enfant FTP

2 – Création du fichier « functions.php »

Pour que le « child theme » de WordPress fonctionne vous allez créer un fichier « functions.php » qui va indiquer au système de remplacer les réglages (CSS ; PHP ; etc.) du thème parent par ceux du thème enfant.

Avec votre éditeur de code préféré, moi j’utilise Notepad++ ; créez un fichier « functions.php » et copiez le code suivant :

<?php
/**
** activation theme
**/

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

Explication des lignes de code : ici vous indiquez à WordPress l’emplacement de fichier de style CSS que le système doit prendre en premier pour écraser les réglages CSS du thème parent.

3 – Création du fichier « style.css »

Vous allez maintenant créer le fichier CSS pour votre thème enfant. Avec votre éditeur de code créez un fichier que vous nommerez « style.css » et copiez lui le code suivant :

/*
Theme Name: twentyseventeen-child
Description: Une description de votre thème
Author: Votre prénom et Nom
Author URI: https://www.votre-domaine.fr
Template: twentyseventeen
Version: 1.0
*/
Fichier style.css

Explication des lignes de code :

  • Theme Name: Le nom de votre thème enfant
  • Description: La description de votre thème enfant qui apparaîtra dans le gestionnaire de thème WordPress
  • Author: L’auteur du thème enfant
  • Author URI: L’url du site de l’auteur
  • Template: Le nom du thème parent
  • Version: La version du thème enfant
Conseil :
– N’ajoutez pas d’espace avant les deux points de « Theme Name: » sinon ça ne marchera pas
– Pour « Template » respectez la case des caractères du nom du dossier du thème parent

Installation de votre thème enfant WordPress

Maintenant que vos fichiers du child theme sont créés, vous devez les copier dans le dossier du thème enfant que vous avez créez à l’étape 1 via votre client FTP (Filezilla).

Conseil :
– Pour voir la vignette du thème enfant dans WordPress, copier l’image « screenshot.png » du thème parent vers le dossier du child theme.

Installation de votre thème enfant WordPress

Maintenant vous allez activer ce nouveau thème enfant via l’administrateur de WordPress. Rendez-vous dans « Apparence > Thème », vous voyez que votre thème enfant récemment créé est disponible. En passant la souris dessus, vous voyez apparaître les boutons « Activer » et « Prévisualisation en direct », cliquez sur le bouton Activer.

Activation de votre child theme WordPress

Voilà, votre thème enfant (child theme) WordPress est créé et activé. Vous pouvez maintenant modifier les CSS ou ajoutez de nouvelles fonctions pour le personnaliser à votre guise sans risque de tout perdre à la prochaine mise à jour du thème parent.

Activation de votre thème enfant WordPress

y-a-t-il un plugin pour créer un thème enfant (child theme) à WordPress?

Comme vous venez de le voir, il est simple de créer un thème enfant (child theme) à votre WordPress, mais si vous ne vous sentez pas mettre les mains dans le code, il existe, bien sûr, des plugins pour le faire à votre place. En voici quelques-uns :

Ce tuto vous a plus ? Alors n’hésitez pas à le partager sur vos réseaux sociaux préférés et à laisser un commentaire sur ce site.

À propos de l'auteur...

J’aime ce métier de Formateur Web. Transmettre mon expérience aux apprenants dans un subtile mélange de cours web théorique et exercices pratiques, je les accompagne tout au long de leur formation pour qu’ils réalisent dans les meilleurs conditions tous leurs projets.

16 COMMENTAIRES

  1. Bonjour merci beaucoup pour cette superbe explication. J'ai suivi toutes vos étapes, je trouve bien le child thème dans mes thèmes wordpress mais je trouve une page blanche en arrière plan avec les éléments de mon blog mais sans le design de mon thème. Pourtant j'ai bien fait attention à l'espace entre le nom du thème et le ":" .. Qu'est ce que je peux faire ? Merci beaucoup pour votre aide

    • Bonjour
      Pouvez-vous copier le code que je regarde svp ?
      Au pire si vous n'y arrivez pas, essayez avec ce plugin pour la création de votre thème enfant https://wordpress.org/plugins/child-theme-configurator/
      A bientôt

  2. Bonjour,

    Merci pour cet article très clair

    Néanmoins, quand j'active mon thème enfant depuis le back-office de WordPress et que j'affiche le site, page blanche !

    J'ai créé les fichiers ici:

    root /www /wp-content /themes /focusblog-enfant

    Voici le contenu de functions.php
    <?php
    /**
    ** activation theme
    **/
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    }
    ?>

    et voici le contenu de style.css
    /*
    Theme Name: focusblog-enfant
    Description: Theme enfant de Osez Réaliser Vos Rêves
    Author: Pascal – Osez Réaliser Vos Rêves
    Author URI: https://osezrealiservosreves.com/
    Template: focusblog
    Version: 0.1.0
    */

    Tu as une idée ?
    Merci ! 🙂

      • Désolé de la réponse tardive, merci de prendre le soin de jeter un oeil 🙂

        http://www.screencast.com/t/rNkcCVeK
        http://www.screencast.com/t/8bXbbGc7Z

      • Le problème était de mon côté
        J'avais oublié cette ligne de code dans mon fichier wp-config.php

        define('TEMPLATEPATH', '/wp-content/themes/focusblog');

        Donc forcément, il chargeait au mauvais endroit

        Le thème enfant fonctionne bien, je réalise malheureusement que les widgets ne sont pas dupliqués et qu'il faut tout recréer, je vais chercher un plugin qui fait ça (ou si t'as des conseils pour automatiser le truc je suis preneur (fichier php à copier coller?)

        Merci 🙂

      • UPDATE (oui ça va vite^^)
        J'ai résolu mon problème de widget avec "Widget importer and exporter" avec 1 clic, génial

        Il me reste des problèmes liés au style
        J'ai mes réglages CSS personnalisés dans mon thème premium => OK

        Mais il reste qq réglages qui n'ont pas été retenues : ceux qui correspondent aux premiers réglages que j'ai fait avec "Personnaliser le thème"
        Comment copier coller ces réglages ? Un copier-coller d'un fichier en particulier ? Merci 🙂

      • UPDATE
        J'ai essayé de bouger theme-editor.php et customize.php dans le dossier du thème enfant, mais ça n'a pas fonctionné
        il s'agit peut-être d'un autre fichier.

      • Bonjour Pascal
        Essayer peut-être de créer votre thème enfant WordPress avec cette extension "Child Theme Configurator" (https://fr.wordpress.org/plugins/child-theme-configurator/) qui permet de copier menus, widgets et autres réglages de l'outil de personnalisation du thème parent pour le thème enfant.

  3. Bonjour
    J'ai suivi votre procédure mais j'obtiens le message d'erreur: Thèmes endommagés
    Les thèmes suivants sont installés mais incomplets.
    Nom Description
    appointment-blue-child Le thème « appointment-blue » n’est un thème parent valide.
    Est-il possible de créer un thème enfant d'un thème qui est déjà un thème enfant ?
    Quand faut-il créer un thème enfant ? Mon fichier de configuration CSS est intégré à mon thème appointment blue (Apparence/personnaliser/Réglages de l'entête/CSS personnalisé), peut-être que je n'ai pas besoin de créer de thème enfant ?
    Merci

  4. Bonjour
    et merci bcp pour ce tuto.
    J'ai cependant un souci : lorsque j'active le thème enfant je perds tous les styles du thème parent …. je comprends pas ? Et il possible d'avoir deux thèmes activés en même temps sur WP ?

    Merci pour votre réponse et belle journée !

    • Bonjour Sandrine
      Il faut créer dès le début le thème enfant car quand on change le thème (par le thème enfant par exemple) on perd tout ce qu'on à fait avant.
      Je crois qu'il existe des extensions qui peuvent sauvegarder l'ensemble des réglages du thème parent pour les importer sur le thème enfant, mais je ne les connais pas. Un petit tour sur Google 😉
      Regarde aussi dans les options de ton thème, quelque fois l'auteur du thème à ajouter une sauvegarde à exporter.
      @++

Laisser un commentaire