Tuto WordPress : créer votre thème enfant

par | Mis à jour le 15/08/2020 | Publié le 21/08/2014 | WordPress | 11 commentaires

Résumé : Pourquoi et comment créer un thème-enfant (child theme) Wordpress ? Modifier style.css, template, les balises de données structurées et ...
Cet article comporte 518 mots.

2

Si vous êtes fatigué de refaire toutes les modifications de votre thème à chacune de ses mises-à-jour, il n’est pas nécessaire de vous vanter l’intérêt d’avoir un thème-enfant. Sinon, tout vous a été expliqué dans la phrase précédente.

Article mis à jour le 9 novembre 2015

Le principe du thème-parent et le thème-enfant

Principe du thème parent et du thème enfant
Lorsqu’une requête est envoyée au serveur (demande d’affichage d’une page), celui-ci renvoie en réponse les instructions du thème-parent, puis celles du thème-enfant. En clair, la page affichée est celle du modèle-parent avec celles contenues dans le modèle-enfant.
Ainsi, vous pouvez modifier le thème-parent (mises à jour), sans écraser les personnalisations que vous avez effectuées à l’aide du thème-enfant.

Comment créer un thème-enfant ?

Dans le dossier racine du site>wp-content>themes, créez un nouveau dossier. Le titre de ce dossier doit reprendre l’intitulé du thème-parent auquel vous allez ajouter -child.
Pour exemple : le nom du dossier de mon thème-enfant montemplate est montemplate-child.
Il n’est pas obligatoire de nommer le thème-enfant de ce manière. Vous pouvez aussi le nommer par le nom de votre entreprise si vous le souhaitez tant que vous ne laissez pas d’espace dans l’intitulé. Pour ma part, c’est que je fais : je le renomme avec le nom de l’entreprise du commanditaire ou de son produit, selon le type de site.

Créer le fichier style.css

Dans ce dossier, créez un fichier style.css et recopiez les lignes suivantes :

/*
 Theme Name:
 Theme URI:
 Description:
 Author:
 Author URI:
 Template:
 Version:
 License:
 License URI:
 Tags:
 Text Domain:
*/

Vous n’êtes pas obligé de tout conserver. Les lignes obligatoires sont :

/*
 Theme Name: NomDeMonThemeEnfant
 Template:   NomDuThemeParent
*/

Reprenons ensemble ces lignes.
Les lignes obligatoires (pour que le thème-enfant fonctionne) sont le nom de votre thème et celui du modèle (thème-parent)
Auparavant, il fallait aussi ajouter l’Url de la feuille de style.css (@import url(« ../intituleDossierParent/style.css »)) du modèle (thème parent). Aujourd’hui, la pratique a changé :

Créer le fichier functions.php du thème-enfant

Ce fichier n’est pas obligatoire, mais il améliore le fonctionnement du thème-enfant par la mise en file d’attente des styles. Certains thèmes ne peuvent avoir un thème-enfant fonctionnant qu’avec ce fichier. Créez dans le dossier du thème-enfant, un fichier intitulé functions.php. Collez dans ce fichier le code suivant :

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

Vous pourrez ajouter dans ce fichier toutes les fonctions que vous souhaitez apporter ou modifier par rapport au thème parent.
Votre thème-enfant est prêt à être activé dans l’administration WordPress. Rendez-vous dans le menu Apparence > thème et sélectionnez votre thème-enfant. Il vous faudra peut-être reconfigurer certains éléments de votre site, mais normalement cela ne devrait pas être le cas.

Modifier les styles de votre thème

Maintenant pour modifier les styles de votre thème, vous n’avez plus qu’à ajouter vos modifications dans le fichier style. Exemple :

/*
 Theme Name:   MonThemeEnfant
 Template:     ThemeParent
 Version:      1.1.1
Personnalisation du thème -------------------------------------------------------------- */
h1 {
    font-size: 26px;
}
h2 {
    font-size: 30px;
    color : #FF9900
}

Si vous souhaitez en savoir plus sur le sujet du thème-enfant et perfectionner vos modifications, consultez le Codex de WordPress.

Les E-books

Rédiger son cahier des charges

Tout ce qu’il faut pour bien s’entendre avec son prestataire

Google Data Studio

Faîtes parler vos données !

Tests de connaissances

Newsletter 5Min/mois

Recevez notre newsletter pour consulter l’essentiel du marketing.

Articles pouvant vous intéresser

DIVI et DIVI Builder : quelle différence ?

DIVI et DIVI Builder : quelle différence ?

Elegant Themes propose 2 produits distincts, mais dont les noms portent à confusion : DIVI et DIVI Builder. Comment et pourquoi les différencier ? Ce sera la question du jour.   DIVI ET DIVI...

AMP for WordPress : l’extension officielle

AMP for WordPress : l’extension officielle

AMP for WordPress est l'extension officielle de Google AMP pour le CMS WordPress. Elle est gérée et maintenue par AMP PROJECT CONTRIBUTORS à titre gratuit (dont font partie Google et Automatic)....

Comment installer le format AMP sur WordPress ?

Comment installer le format AMP sur WordPress ?

Comme nous l'avons expliqué dans notre article précédent, installer AMP sur WordPress comme sur d'autres CMS tel que Joomla!  a surtout un intérêt pour vos articles de blog. Pour les pages, si vous...

11 Commentaires

  1. Sebastien

    Bonjour Lisette,
    j’ai une petite question (peut-être banale) à vous poser concernant le thème enfant.
    Lors de la mise en place de mon thème, j’ai reçu un fichier zip contenant le thème enfant (que je n’ai pas installé), entre temps il y a eu plusieurs mises à jour du thème. Est ce que si j’installe le thème enfant fourni, celui-ci prendra en compte les mises à jour ou est ce que j’ai besoin d’un autre Thème enfant plus récent?
    Merci pour votre réponse, car il va m’en falloir un, j’ai de nombreuses erreurs hentry (244) à corriger et j’ai vu dans un autre de vos article qu’il me faut un thème enfant pour cela

    Réponse
    • Lisette

      Bonsoir,
      Je vais tenter de vous donner une explication par écrit. Tout l’intérêt du thème enfant lorsque le thème est mis à jour, c’est qu’elle a lieu en conservant les modifications que vous avez apporté à votre site (en les mettant dans le thème enfant)… Si vous ne mettez pas les fichiers que vous avez modifié dans votre thème enfant, ils seront écrasés par la mise à jour.
      Reprenont par le début. Lorsque vous installez votre thème, vous installez aussi le thème enfant (que vous choisirez aussi dans l’administration WordPress comme template). Ensuite, vous aurez besoin peut-être de faire des modifications dans le code (format de date, balise hEntry, etc…). Vous mettrez alors le fichier récupéré dans le thème, puis modifié dans le thème enfant. Quand vous ferez la mise à jour de votre thème, l’ancienne version du thème est détruite et remplacée par la nouvelle. Et comme vos modifications personnelles sont dans le thème enfant, elles n’ont pas été écrasées et restent opérationnelles pour la version mise à jour.. Donc, une fois vos corrections de balise hEntry faites, vous n’aurez plus jamais à vous en occuper. Par contre, si vous ne mettez pas votre fichier corrigé dans le thème, vous devrez à nouveau corriger toutes vos balises à la prochaine mise à jour ;-(
      Par contre, je comprends qu’actuellement votre site est basé sur le thème et non sur le thème enfant. Lorsque vous passerez au thème enfant, il faudra refaire ma configuration. C’est pour cela qu’il est fortement conseillé de mettre dès le départ le thème enfant.
      N’hésitez pas à me dire que ce vendredi soir, je suis pas claire 😉 Mais votre question me suggère d’écrire un petit article plus détaillé.

      Réponse
      • Sebastien

        Rassurez vous Lisette vous avez été claire, c’est moi qui ai quelques problèmes avec la technique.
        Donc si je comprends bien, il va me falloir un nouveau thème enfant basé sur la version actuelle de mon thème.
        Bonne soirée

        Réponse
        • Lisette

          Non, ce n’est pas exactement ça. Dans le dernier package de votre thème ou un ancien, vous avez un thème enfant. Placez le dans wp-content. Ensuite, vous irez dans l’administration WordPress et vous le choisirez comme template. Mais, là, vous allez devoir reconfigurer un peu votre thème.
          Le mieux de tout façon est de faire la manipulation sur une copie de votre site en local (sur votre ordinateur).
          Ensuite, vous y placerez les fichiers de votre thème que vous avez modifié.
          Pour ma part, j’essaye de vous faire un article sur le sujet dans la semaine, car vous ne devez pas être le seul à avoir des difficultés.

          Réponse
          • Sebastien

            Entendu Lisette, je vais me lancer dans ce travail fastidieux dés que je trouve assez de temps pour le faire.

      • John

        Bonjour,
        Je suis tout nouveau dans wordpress. Je comprends très mal l’usage du thème enfant.
        Par exemple je soouhaite créer une boutique en ligne. J’achète un hème wordpress bien fait correspondant à mes ambitions.
        Je lui crée un thème enfant.
        Est ce sur ce thème enfant que je vais placer mes extensions et est ce sur ce themes enfant que mes clients viendront acheter?
        Eclairez moi.
        Merci

        Réponse
  2. RAMBOURG

    Bonjour,
    Je démarre la création d’un site sur la base d’un thème,
    j’ai installé le thème enfant suivant vos recommandations.
    Maintenant sur quelle thème dois-je travailler, lequel dois-je activer?
    Merci
    Claude

    Réponse
    • Lisette

      Bonsoir,
      Désolée pour ma réponse tardive. Vous devez activer le thème Enfant après avoir installé les 2 thèmes.

      Réponse
    • Lisette

      Bonjour,
      Vous devez activer le thème Enfant

      Réponse
  3. John

    Bonjour,
    Je suis tout nouveau dans wordpress. Je comprends très mal l’usage du thème enfant.
    Par exemple je soouhaite créer une boutique en ligne. J’achète un hème wordpress bien fait correspondant à mes ambitions.
    Je lui crée un thème enfant.
    Est ce sur ce thème enfant que je vais placer mes extensions et est ce sur ce themes enfant que mes clients viendront acheter?
    Eclairez moi.
    Merci

    Réponse
    • Sabine

      Bonjour
      Un thème parent (le thème que vous avez acheté) c’est comme un livre. On écrit pas dessus. Si on doit faire des annotations, on recopie le texte ou on fait une copie.
      Le thème enfant, c’est cette copie.
      Du coup, vous faites vos modifications de codes (modif design et ergonomie, adaptation du code à Goole, ajout des codes d’identification dans le head ou après, etc.) dans le thème enfant et vous gardez indemme le thème parent.
      L’autre avantage, c’est que quand le développeur de votre thème propose une nouvelle version avec des améliorations, cela n’écrase pas les modifications faites dans le thème enfant.
      Voilà voilà… en espérant être plus claire. Et désolée pour ma réponse non immédiate, c’est la période des conseils de classe et réunions parents…

      Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avertissement : L’url du site web ne sera pas affichée dans le commentaire et toute url placée dans le commentaire sera systèmatiquement effacée avant sa publication.

Pin It on Pinterest

Share This