Crée ton thème enfant sur WordPress

/

article créer un thème enfant WordPress

S Si tu personnalises ton thème au-delà des fonctionnalités de l’éditeur, tu installes un thème enfant.

L’autre option est de ne jamais mettre à jour ton thème et d’ouvrir tes portes en grand aux pirates.

Cela ne prend que quelques minutes et t’évitera de perdre des heures de travail à la prochaine mise à jour.

Je te présente également des alternatives pour personnaliser ton thème en toute sérénité.

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

theme enfant

Si tu souhaites comprendre comment fonctionne un thème enfant, je te présente une synthèse rapide. Sinon, tu passes directement à la pratique.

Quelle est l’utilité d’un thème enfant ?

Un thème enfant est une surcouche de code qui modifie l’apparence et les fonctionnalités de ton thème.

rôle thème enfant
Dans les faits, le thème enfant se charge en premier.

C’est une coquille quasiment vide qui n’attend que tes instructions.

Il est composé de deux fichiers l’un pour le style (CSS) et le second pour les fonctionnalités (PHP). Tu peux également avoir un visuel qui illustrera ton thème enfant.

L’inconvénient : Quand tu ne travailles pas directement sur le thème enfant, la personnalisation effectuée dans l’outil du thème n’est pas prise en compte. Certains thèmes présentent des fonctionnalités d’export comme nous le verrons par la suite.

Il existe d’autres solutions qui peuvent remplacer son utilisation.

Une alternative pour les CSS

Tu peux utiliser les CSS additionnels présents dans la majorité des thèmes. Comme ici pour Twenty Seventeen.

Apparence > Personnaliser > CSS additionnel

css additionnel

Attention : A ne pas confondre avec l’éditeur de thème.

Tu peux également installer l’extension SiteOrigin CSS. Elle héberge ton code. Celui-ci n’est pas affecté par les mises à jour.

siteorign css

Elle offre de nombreuses autres fonctionnalités qui simplifient l’ajout de CSS en particulier pour les polices.
Le tutoriel : Modifie ton thème avec SiteOrigin CSS.

Une alternative pour les fonctions

Code Snippets sert de librairie de codes PHP.

Son mode d’emploi par Pascal Cescato : Centralisez vos bouts de code avec « Code Snippets ».

code snippet

Je suis persuadé que cette question t’a traversé l’esprit.

Pourquoi ne pas modifier directement le thème parent ?

Cela fonctionne parfaitement jusqu’à la prochaine mise à jour.

Quand ton thème se met à jour, l’ancien code est remplacé par le nouveau. Tout ton travail de personnalisation a disparu. C’est le drame.

Je te montre maintenant à quoi cela ressemble en pratique.

Les composantes du thème enfant

Les deux exemples suivants sont issus d’un thème enfant de Twenty Seventeen généré automatiquement par WPMarmite. Les explications sont dans le paragraphe suivant.

Le fichier CSS

/*
Theme Name: Twenty Seventeen Enfant par WP Marmite
Description: Theme enfant du theme Twenty Seventeen. Vous pouvez désormais le personnaliser sans risquer de perdre vos modifications
Author: WPMarmite
Author URI: https://wpmarmite.com
Template: twentyseventeen
Version: 1.0
*/

Il comprend le nom du thème, sa description, l’auteur et l’url de l’auteur, le thème d’origine et la version.

Le fichier fonctions

<?php
/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
function wpchild_enqueue_styles(){
  wp_enqueue_style( 'wpm-http://mysterious-wombat.w5.poopy.life-style', get_template_directory_uri() . '/style.css' );
}

Pour l’instant, il indique uniquement de charger le thème parent après l’enfant.

La grande question : tu l’obtiens comment ton thème ?

Comment récupérer ton thème enfant

Je te présente trois méthodes pour créer ton propre thème enfant par ordre de préférence.

Utilise celui fourni par le créateur de ton thème

De nombreux créateurs de thèmes proposent des thèmes enfants prêts à l’emploi. L’avantage est qu’ils intègrent souvent des fonctionnalités spécifiques qui garantissent le parfait fonctionnement.

Tu installes uniquement les thèmes récupérés directement sur le site de l’éditeur. Tu verras que je fais une exception à la première ligne car Pascal est 100 % digne de confiance.

9 thèmes populaires :

Si tu ne trouves pas ton thème, tu recherches dans ton moteur préféré :

  • thème enfant + ton thème
  • child theme + ton thème

Tu peux également utiliser cet excellent générateur.

Génère ton thème en 2 secondes

WPMarmite a réalisé un excellent travail avec ce générateur de thèmes enfants simplissime à utiliser.

Tu renseignes l’url de ta page d’accueil sans / à la fin.

générateur thème enfant

Il ne te reste plus qu’à le télécharger.

télécharger thème enfant

Le plugin suivant suit la même logique.

Configure ton thème à l’aide d’une extension

Tu installes l’extension Child Theme Configurator.

extension child theme configurator

Outils > Thèmes enfants

menu thèmes enfants

Tu sélectionnes le thème parent dans le menu déroulant et analyse.

child theme configurator analyse

Tu obtiens un message de validité du thème.

message confirmation

Tu sautes à l’étape 9 et génères ton thème.

création thème enfant

En haut de la page, tu as désormais un message qui t’indique que le thème enfant est généré.

thème généré

Ton thème enfant est directement disponible dans les thèmes.

twenty seventeen child

Tu supprimes l’extension et passes directement à l’activation.

Installe ton thème enfant

Apparence > Thèmes

menu thème

Tu ajoutes un thème.

ajouter un thème

Tu télécharges le fichier Zip

téléverser thème
fichier thème enfant

et l’installes.

installer

Active ton thème enfant

Il est recommandé de prévisualiser le résultat avant d’activer pour s’assurer que tout fonctionne parfaitement.

Tu survoles ton thème pour faire apparaître les boutons. Tu cliques sur Prévisualisation en direct pour valider le bon fonctionnement.

prévisualisation

Si le résultat te convient, tu actives.

activer enfant

Tous les thèmes ne présentent pas cette option. Si tu as déjà commencé la personnalisation dans l’éditeur, elle évite de recommencer la configuration.

Migre les personnalisations déjà effectuées dans l’éditeur

Je te montre la procédure pour OceanWP.

Tu actives ton thème parent.

Theme Panel > Importer/exporter

importer exporter personnalisation thème oceanwp

Tu exportes les réglages.

exporter réglages

Tu actives ton thème enfant et importes.

importer réglages

Passons enfin à la mise en oeuvre.

Comment utiliser un thème enfant

Apparence > Editeur de thème

éditeur de thème

Tu sélectionnes ton thème enfant.

sélectionne thème enfant

Tu choisis le fichier à modifier.

selection fichier

Tu colles ton code à la suite après avoir passé une ligne.

ajout css

Tu enregistres.

mettre jour fichier thème

Conclusion

Tu as constaté qu’installer un thème enfant n’est pas compliqué.

[tweetshare tweet= »WordPress : Découvre 3 méthodes simples pour créer ton thème enfant. » username= »pourpasunrond »]

Tu as désormais toutes les cartes en main pour personnaliser ton thème.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


12 réponses à “Crée ton thème enfant sur WordPress”

  1. les balises gtm se lance avant que j’ai accepté tes cookies
    mets-toi a jours vite car rgpd arrive bientôt

    • Bonjour Arthur,

      Je te remercie de ton avertissement concernant les balises GTM.
      C’est étrange car j’étais certain d’avoir désactivé ce service. Je vais me pencher sur ce problème.

      Excellente fin de WE,
      Jean

  2. Bonjour,
    GRAND merci pour ce document. Mais juste pour être sur :
    – faut il créer le thème enfant dès qu’on le charge, avant même de faire des modifications, ajouter des pages, des blocs… car ces modifications seraient mises à mal par une mise à jour du thème
    ou
    – tant que l’on ne fait pas de modifications CSS directement, ce n’est pas nécessaire
    Autrement dit, quelles sortes de modifications posent problèmes pour les futures mises à jour du thème ?
    Merci

    • Bonjour,

      Seules les modifications sur les CSS et le code nécessitent de créer un thème enfant. Tout le travail « normal » sur ton site ne sera pas affecté par les mises à jour.

      Magnifique journée,
      Jean

  3. Bonjour Jean, merci encore pour cet article.
    Donc si je comprends bien dès lors que l’on compte modifier un thème il faut d’abord créer un thème enfant et faire toutes les modifications sur ce dernier?
    Le thème parent ne servira que pour les mises à jour?
    Merci

    • Bonjour Vanina,

      Si tu souhaites apporter des modifications à un thème, tu n’interviens jamais sur le thème d’origine. La mise à jour effacerait tout ton travail.

      Tu as deux options :
      1) Tu ajoutes les CSS dans les CSS additionnels de ton thème et intègres les modifications PHP à l’aide d’une extension.
      2) Tu crées un thème enfant qui accueille tes modifications.

      Dans les deux cas, les modifications agissent en surcouche du thème parent qui peut ainsi être mise à jour.

      Belle soirée,
      Jean

  4. Je découvre ton site avec plaisir… Tu explique très simplement ce qui paraît souvent bien compliqué ailleurs!!
    Merci beaucoup pour ton investissement!

  5. Bonjour,
    Peut-on créer un thème « enfant » après avoir déjà fait des modifications ?

    Cordialement,
    Pierrick.

    • Bonjour Pierrick,

      Le fait que tu aies déjà modifié ton thème ne changera rien.

      Tu dois intégrer dans ton thème enfant toutes les modifications déjà apportées. Elles seront en doublon sur une petite période sans conséquence. A la prochaine mise à jour de ton thème, elles ne seront présentes que sur ton thème enfant.

      A bientôt,
      Jean

Répondre à Rachel Lupano Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *