Pour modifier un thème WordPress, apprenez à créer un thème enfant !


Aujourd'hui, je laisse la parole à Pascal Cescato, responsable du blog Photo Blogging. Développeur, Pascal va vous expliquer dans cet article pourquoi et comment créer un thème enfant WordPress. Une étape indispensable quand on veut modifier un thème WordPress !

Vous avez trouvé le thème qu’il vous faut. Tout, tout vous plaît dans ce thème.

Bien sûr, dans l’idéal, vous auriez préféré une autre police de caractères, et une taille légèrement plus grande pour améliorer la lisibilité. L’espacement entre les paragraphes n’est pas suffisant. Et puis le pied de page… de une à quatre zones de widgets, génial, mais moi, des widgets, j’en mets pas dans le pied de page, et sans widget c’est troooop vilain !

Pas grave, on va faire avec :-| Sauf que très vite, les petits défauts vont vous agacer. Et vous allez passer dans l’éditeur de thèmes, pour modifier une règle CSS, un bout de code dans un template, rajouter une fonction dans le fichier functions.php. Résultat au top. Vous vous frottez les mains.

Un petit mois a passé… et il y a une mise à jour disponible. Et vous cliquez sur « Mettre à jour les thèmes ». Ça y est, c’est fait, vous n’y pensez plus.

Jusqu’à ce que l’idée vous prenne, subitement, d’aller faire un petit tour sur votre site. Et là, panique à bord, c’est la catastrophe, mais que se passe-t-il donc, mais que c’est vilain, où sont passées toutes mes modifs ? Il va peut-être vous falloir deux minutes (au moins) pour intégrer l’idée que la mise à jour a tout simplement écrasé vos modifications.

Vous sentez un grand vide, mais bon… il y pire ! Vous reprenez tout, en espérant ne rien oublier, en espérant que vous vous souviendrez de la manière de procéder. Et vous allez faire une sauvegarde, pour la prochaine mise à jour.

Oui, mais – parce qu’il y a toujours un mais – ce n’est pas ainsi qu’il faut procéder ! Il y a une manière propre de faire, il faut… créer un thème enfant.

Un thème enfant WordPress, ça se présente comment ?

Comme l’enfant ressemble à son père et à sa mère, mais en dépend, tout en étant une personne à part entière, le thème enfant va utiliser les ressources du thème sur lequel il est basé, mais ne sera pas mis à jour en même temps que le thème d’origine. Autrement dit, bienvenue dans la création d’un site WordPress !

Et ne me regardez pas comme ça, ça ne mord pas et ce n’est pas compliqué ! Vous allez voir, c’est on ne peut plus simple ! Je vais vous expliquer…

Un thème enfant, c’est un répertoire contenant au minimum deux fichiers (functions.php et style.css), qui fait référence au thème parent. Et les fichiers que vous souhaitez modifier. Tout le reste, votre thème enfant va aller le chercher dans le répertoire du thème parent.

Thème enfant WordPress - Vue FTP
Thème enfant WordPress - Vue FTP

Le fichier style.css du thème enfant doit commencer ainsi :

Theme Name: [le nom de votre thème enfant]
Theme URI: http://votre-site.com/url-de-votre-theme-enfant/
Description: Thème enfant basé sur [le thème parent]
Author: John Doe
Author URI: http://votre-site.com
Template: [le nom du répertoire qui contient le thème parent]
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: [les mots clés pour décrire votre thème enfant]
Text Domain: [theme-parent-child]

Ces quelques lignes sont destinées à WordPress lui-même, c’est ici qu’il va trouver les informations nécessaires au bon fonctionnement de votre thème : le Template et le Text Domain. Les autres informations s’afficheront dans le descriptif du thème.

Une fois ces deux fichiers créés, votre thème enfant apparaît dans Apparence > Thèmes de l’espace d’administration de WordPress.

Apparence d'un thème enfant WordPress dans l'administration
Apparence d'un thème enfant WordPress dans l'administration

Dans le fichier functions.php, une seule fonction est nécessaire pour s’assurer que votre feuille de style se chargera après les feuilles de style du thème parent :

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

Pourquoi charger cette feuille de style après toutes les autres ? Tout simplement parce qu’en étant la toute dernière, ce sont ses définitions qui prévaudront à l’affichage. En effet, pour un même attribut, seule la dernière définition est gardée.

Votre thème enfant est maintenant fonctionnel. Vous allez pouvoir ajouter vos propres règles CSS pour changer l’apparence de votre thème, modifier vos fichiers, sans craindre qu’une mise à jour ne vienne écraser votre travail.

Ok… je vois. Ce que je vois, ou ce que je ressens plutôt, c’est votre enthousiasme débordant à l’idée de faire votre propre cuisine. Déjà, toucher au code, ce n’est pas votre tasse de thé. Mais en plus, il faut créer un répertoire, suivre des règles de nommage, transférer des fichiers. Alors on fait quoi ? On ne va pas mettre les mains dans le cambouis, on va chercher une extension pour faire tout ça à notre place !

L'extension Child Theme Configurator

On va dans Apparence > Ajouter, et on localise le champ de texte en haut à droite, pour y saisir Child Theme Configurator. Et depuis la version 4.6 de WordPress, inutile de valider, la recherche se fait en temps réel. Voilà, vous avez un écran comme celui-ci :

Installation de Child Theme Configurator
Installation de Child Theme Configurator

Vous le voyez, le tout premier, à gauche au premier rang ? Mis à jour il y a peu, une note de 4,8/5 sur 115 votes, plus de 90 000 installations… l’extension semble appréciée.

Il ne vous reste plus qu’à cliquer sur Installer maintenant, puis sur Activer. La suite, c’est en allant sur Outils > Child Themes que ça se passe. L’extension n’est pas en français. Dommage, elle est très bien conçue, et les concepteurs n’ont pas fait l’impasse sur l’aide, même si l’extension se révèle relativement simple à utiliser. Il suffit de cliquer sur l’onglet Aide présent en haut à droite dans l’interface d’administration pour y accéder.

Child Theme Configurator – Aide
Child Theme Configurator – Aide

Prise en main de l'extension

Vous venez d’installer l’extension, et vous n’avez pas, en principe, de thème enfant. Alors, pour commencer, sélectionnez le thème parent en étape 2, et cliquez sur Analyze.

Child Theme Configurator – Analyse et configuration du thème enfant
Child Theme Configurator – Analyse et configuration du thème enfant

Je vous conseille de ne toucher à rien, de vous rendre directement à l’étape 7, et de cliquer sur la petite flèche grise pour ouvrir un formulaire de saisie. C'est ici que vous allez renseigner les éléments du fichier style.css du thème enfant évoqués en début d'article.

Child Theme Configurator – Étape 7
Child Theme Configurator – Étape 7

Puis descendez en bas de la page, cliquez sur Create New Child Theme. Votre thème enfant est généré automatiquement, il ne vous reste plus qu’à l’activer, et à vous occuper de la personnalisation :

Child Theme Configurator – Thème enfant
Child Theme Configurator – Thème enfant

Votre thème enfant est créé et fonctionnel, prêt à être activé. Au passage, vous avez gagné quelques onglets. Cliquez sur le lien Preview your child theme, visualisez et activez avant de vous rendre dans les onglets suivants.

L'onglet Query Selector

Dans cet onglet, vous allez modifier votre feuille de style, en vous aidant de champs de sélection basés sur l’analyse de la feuille de style, et sur les propriétés CSS.

Onglet ‘Query Selector’
Onglet ‘Query Selector’

Commencez par sélectionner un media, si besoin est. Sinon la règle vaudra pour tous les medias. Sélectionnez ensuite un Selector, autrement dit une balise, une classe, une id.

J’ai sélectionné la balise h2 pour @media (min-width: 800px), font-family font-size et color dans le champ New Property, voici ce que j’obtiens à l’écran :

Onglet ‘Query Selector’ – Personnalisation
Onglet ‘Query Selector’ – Personnalisation

Le champ Raw CSS permet de saisir un style « brut », h2.newclass { font-size: smaller } par exemple. En cliquant sur Save, le contenu va passer dans la partie supérieure de l’onglet, analysée, validée, il ne reste plus qu’à enregistrer en cliquant sur Save Child Values, comme à chaque modification d’une valeur.

L'onglet Property/Value

Ici, vous allez rechercher une propriété CSS : color, font-family, border… En sélectionnant une propriété, l’extension va aller cher toutes les occurences de celle-ci dans les CSS des thèmes parent et enfant. Cliquer sur Selectors déclenche l’ouverture d’une popup. En cliquant sur Edit Selector, vous retournez dans l’onglet Query / Selector pour modifier la valeur de la propriété.

Onglet Property / Value
Onglet Property / Value

L'onglet Web Fonts

Si vous souhaitez intégrer des polices de caractère Google, c’est ici que ça se passe ; il suffit d’insérer une balise @import que l’extension va automatiquement convertir en balise <link> :

@import url(http://fonts.googleapis.com/css?family=Oswald); par exemple va donner <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">.

Les onglets Baseline Styles et Child Styles

Pour visualiser vos feuilles de style, c’est ici que ça se passe. Visualiser, mais pas modifier. Les CSS d’origine dans Baseline Styles et les CSS que vous modifiez dans Child Style.

C’est dans ce dernier onglet que vous allez vous rendre compte des traitements automatiques effectués par l’extension depuis que vous l’utilisez sur votre thème enfant. Voici la feuille de style, suite aux modifications que j’y ai apportées :

Feuille de style – Thème enfant
Feuille de style – Thème enfant

L'onglet Files

C’est le dernier onglet actif, et ce n’est pas le moins intéressant. En effet, Child Theme Configurator répertorie les fichiers modifiables dans le thème parent, et en permet la copie dans le thème enfant.

Onglet Files
Onglet Files

Cet onglet comprend cinq sections :

  • Parent Templates qui liste les fichiers modifiables du thème parent, qui n’ont pas été copiés dans le thème enfant. En sélectionnant un fichier (ou plusieurs) de cette section et en cliquant sur Copy Selected to Child Theme, vous copiez le fichier dans le thème enfant.
  • Child Theme Files qui liste les fichiers que vous avez copiés dans le thème enfant, et qui « remplacent » donc les fichiers du même nom quand WordPress affiche votre site. Ici, vous ne pouvez plus copier mais éventuellement supprimer un fichier que vous ne voulez finalement pas modifier. En cliquant sur Click to edit files using the Theme Editor, vous vous retrouvez dans la fenêtre normalement ouverte en allant sur Apparence > Éditeur.
  • Upload New Child Theme Image pour intégrer des images utilisées dans le thème, directement ou via la feuille de style.
  • Child Theme Screenshot et Upload New Screenshot pour modifier l’mage représentant le thème (utilisée dans le menu Apparence > Thèmes).
  • Export Child Theme as Zip Archive pour créer un fichier ZIP, si vous avez par exemple créé votre thème enfant sur une plateforme de test ou pour en garder une copie.

Dernières recommandations pour votre thème enfant WordPress

La création d’un thème enfant n’est pas très compliquée en soi ; en utilisant l’extension Child Theme Configurator, elle est encore plus simple. Une fois que vous aurez terminé la création de votre thème enfant, il sera temps de désactiver l’extension, voire de la supprimer.

L’interface d’édition des thèmes de WordPress est on ne peut plus basique – je vous conseille d’installer l’extension WP Editor, le temps de personnaliser votre thème enfant. Voici l’interface d’origine, et l’interface avec WP Editor :

Éditeur de thème par défaut
Éditeur de thème par défaut
 
Éditeur de thème avec ‘WP Editor’
Éditeur de thème avec ‘WP Editor’
 

N’oubliez pas qu’une erreur de manipulation est vite arrivée, exportez régulièrement votre travail sous forme d’archive, d’autant que l’extension le permet.

Il existe une version Pro de Child Theme Configurator, mais l’extension gratuite, de base, est déjà suffisante pour couvrir la majorité des besoins de qui crée un thème enfant. Si vous vous sentez limités en utilisant la version gratuite, ou si vous vous découvrez une vocation à créer des thèmes enfants, il sera toujours temps de passer à la version payante.

Et maintenant, c’est à vous !

Retrouvez Pascal sur son blog Photo Blogging


Poster un commentaire

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

43 commentaires sur “Pour modifier un thème WordPress, apprenez à créer un thème enfant !
  • Frédéric S.

    Bonsoir et à l’aide please…..

    J’ai voulu tout faire bien ….. J’ai sélectionné un nouveau thème pour mon site après avoir lu sur différents site que la personne ayant crée OceanWP ayant quitté le navire . Du coup dans ma recherche , j’ai trouvé un thème qui semble correspondre à mes attentes , en l’espèce le thème NEVE.
    Suivant scrupuleusement vos judicieuses préconisations , j’ai crée un thème enfant avec Child Thème Configurator, apparemment tout s’est passé sans problème .
    Je personnalise mon thème . tout va bien .
    Je le teste , sur PC, Mac, Tablette ,smartphone . tout va bien .
    Aujourd’hui je me remets , après mes rdv pro , sur le site pour continuer mon ouvrage et rien ne va plus ( faites vos jeux?) les images ont disparues, la mise en page également .Bref….
    Je me suis dit que j’allais créer un second thème enfant pour voir ce qui se passait .
    Et là, patatra …… au moment d ‘analyser le thème parent voilà le message qui surgit tel un empêcheur masqué ….

    Notice: Undefined index: myfixed_textcolor in /home/XXXX/www/wp-content/plugins/mystickymenu/mystickymenu.php on line 1032″

    (J’ai retiré le nom de la base de données en le remplaçant par les XXXX)

    Que faire?

    Répondre à Frédéric
    • Frédéric S

      Je vais me répondre à moi même ( avant j ‘étais Schyzo , mais je me soigne , nous allons mieux …..:).. J’ai supprimé le plugin mystickymenu et recommencé la création d’un thème enfant en partant de NEVE. Le message cité précédemment ne s ‘affiche plus….. Je croise les doigts , (pas facile avec le clavier mais bon) je vais voir si tout disparait une nouvelle fois .

      Merci pour ce que vous faites .

      Répondre à Frédéric
  • Angelilie

    Merci Marlène pour ce tutoriel pour créer un thème enfant. Je viens de créer le thème enfant de mon blog, avec le plugin Child thème Configurator. Cependant, j’aimerais savoir où l’on place le code de Google Analytics : sur le thème enfant ou le thème parent ? Car je ne voudrais pas avoir le code en double. Merci pour ta réponse.

    Répondre à Angelilie
    • Marlène

      Hello, ça se passe dans le thème enfant. Pas de raison que le code soit en double : si tu ne l’intègres pas au thème parent, il sera présent seulement dans le thème enfant :) Tu peux te rassurer en installant une petite extension Chrome comme Tag Assistant et en la lançant sur une page de ton blog. L’extension te dira tout de suite si elle détecte une erreur.

      Répondre à Marlène
  • badri

    Bonjour;
    Merci pour cet article qui est claire simple et riche à la fois. il me reste un petit problème qui est le suivant:
    Si le css est divisé dans plus q’un fichier… exemple style.css dans le dossier principal du thème et responsive.css dans un sous répertoire…
    Comment résoudre ça dans le thème enfant au niveau du fichier function.php si je fais la création des deux nouveaux fichiers css
    et merci d’avance

    Répondre à badri
    • Marlène

      Hello, pour ma part je n’utilise pas le plugin présenté dans l’article mais habituellement, on a recours à la fonction « enqueue » dans functions.php pour charger les différentes feuilles de style du thème enfant. C’est expliqué plus en détail sur le site de WordPress.

      Répondre à Marlène
  • Aurore

    Bonjour Marlène,

    Je me demandais par rapport au thème enfant, comment cela fonctionne-t-il avec des extensions comme Elementor ou Divi ?

    Est-ce que si fais mon thème enfant après avoir personnaliser toutes mes pages sur Elementor, je devrais tout recommencer ?

    Répondre à Aurore
    • Marlène

      Hello Aurore, en fait tout dépend si la personnalisation t’amène à toucher aux fichiers du thème, ou si tu travailles seulement avec les « blocs » proposés par ce type d’extension. Si tu commences à modifier ton thème principal, en ajoutant du code CSS, etc, c’est dommage de faire le thème enfant a posteriori. En revanche, si tu ne touches pas du tout au thème, il n’y a aucune raison que le thème enfant t’oblige à tout recommencer (puisqu’il prend appui sur la même base que le thème parent).

      Répondre à Marlène
  • Axelle

    Bonjour Marlène,

    Merci pour cet article !

    Je me demandais : au tout début pour la création du fichier style.css, est-ce que dans le code que ton invité a donné il faut mettre « vraiment » le nom de notre site (en modifiant le http en https) ou faut il mettre les informations du fichier style.css de notre thème ?

    J’allais partir sur cette seconde option, et copier les informations prises dans la feuille de style.css de mon thème parent, mais prise d’un doute, je préfère demander…

    Bonne journée à toi !

    Axelle

    PS : J’ai installé le plugin Polylang afin de pouvoir proposer une traduction anglaise sur mon blog… est-ce que je dois me soucier de quelque chose en particulier à ce niveau après la création d’un thème enfant ?

    Répondre à Axelle
    • Axelle

      En fait, après rerererere-lecture, j’ai mis le nom de mon site, mais là encore, question : est-ce que je mets le www ou non ?

      Répondre à Axelle
    • Axelle

      Bon. Finalement j’ai réussi à avancer x)
      J’ai toujours cette question pour Polylang, mais là j’essaie de me concentrer sur Child Theme Configurator (et je dois admettre galérer un peu… mais bon. Il faut bien commencer quelque part.)
      Je vais faire un petit tour sur le site de support et regarder les vidéos proposées.

      A plus tard !

      Répondre à Axelle
    • Marlène

      Hello Axelle, créer un thème enfant ne touche qu’au thème lui-même (design du site et éventuellement les fonctionnalités liées à l’affichage du site) mais ça ne touche pas à la « structure », au « fond » (traductions, contenus…).

      Dans la feuille de style, à l’endroit où il est écrit « Theme URI », il faut indiquer l’adresse complète (avec http(s), www si le site inclut www, etc). Je ne sais pas si c’est bien à ça que tu faisais référence !

      Répondre à Marlène
    • Axelle

      Bonjour !
      Oui c’est bien à ça que je faisais référence, merci ! et d’accord je comprend mieux !

      Donc : si je souhaite ajouter/modifier des fonctionnalités sur mon blog (zones de widgets, pin-it button, etc.) ça se passera dans le fichier functions.php de mon thème enfant… et pour modifier l’apparence (couleurs, calligraphies, etc.) ce sera avec le fichier style.css de mon thème enfant… ok je pense avoir compris ^^ (en espérant que ce soit bien ça T^T)

      Concernant Child Theme Configurator… j’avance (?) ^^’
      Le truc c’est que je comprend, mais qu’à demi certaines choses proposées parce qu’il y a beaucoup de choix dans la partie Sélecteur, et j’ai du mal à voir à quoi elles correspondent, et quelles sont les variations qui peuvent les différencier (et donc je ne veux pas les modifier par peur de tout casser).

      Truc tout bête, mais par exemple :
      .authorwidget
      .authorwidget p
      .authorwidget p em

      Comment savoir lequel modifier ? (Existe-t-il un dictionnaire regroupant et expliquant tous ces thèmes ? T^T)
      (D’ailleurs, @media Query… à quoi correspond le « width » et la « base » exactement ? C’est la place prise sur l’écran ?)

      Aussi, y a-t-il un ordre particulier à respecter lorsqu’on modifie son thème ? ou peut-on modifier comme bon nous semble ?

      Je m’excuse pour la quantité de mes demandes et si elles manquent de clarté ; j’essaie de comprendre comment les choses fonctionnent, mais j’ai l’impression de faire du sur-place ^^’

      A bientôt et bonne journée à toi !

      Axelle

      Répondre à Axelle
    • Marlène

      Bonjour Axelle, je pense que tu devrais te former au CSS, le langage qui sert à la mise en forme (il y a ce cours par exemple). « p » signifie paragraphe par exemple, « p em » désigne le texte mis en avant à l’intérieur d’un paragraphe, les « media queries » permettent de définir la manière dont le site s’affiche en fonction de chaque taille d’écran…

      On est assez libre de modifier les choses dans l’ordre de son choix en règle générale.

      Répondre à Marlène
    • Axelle

      Bonjour Marlène !

      Je pense effectivement que cela aiderait ^^’
      Merci pour la ressource, je m’y mets dès aujourd’hui !

      Bonne journée à toi !

      Axelle

      Répondre à Axelle
  • Pauline

    Bonjour,
    Il semblerait que mon « développeur » (j’habite au Népal) ait fait des modifications de design avancées sur le thème enfant de mon site, et non sur le thème parent (maintenant il a disparu, le développeur…)…Ecrasable donc à la prochaine mise à jour si j’ai bien compris et également pas très apprécié par Google comme procédé..
    Que pourriez vous me conseiller ? Peut on transférer simplement les fichiers contenus d’un thème enfant à un autre ? Il faut sans doute reprendre toutes les modifications effectuées sur le thème enfant et les refaire sur le thème parent ??
    Merci d’avance de vos éclairages…
    Pauline.

    Répondre à Pauline
    • Marlène

      Bonjour Pauline, le développeur a eu tout à fait raison de faire les modifications sur le thème enfant, c’est bien ce qu’il faut faire.

      Répondre à Marlène
  • Sophie

    Bonjour :) j’ai une question un peu bête… si notre thème est déja enfant d’un autre thème, est-ce nécessaire de faire un thème « petit-enfant » ?

    Répondre à Sophie
    • Marlène

      Bonjour, quand on a déjà un thème enfant c’est dans ce thème enfant qu’il faut effectuer les modifications… mais il n’existe pas de « petit-enfant » ;)

      Répondre à Marlène
    • Vod

      Bonjour et merci pour vos tutos. Pour prolonger cette question : J’utilise un thème woocommerce « boutique », lui-même thème enfant du thème storefront : que se passera-t-il lors des MAJ de la part de woocommerce : « boutique » sera concerné aussi ou seulement storefront ? Bref dois-je créer un thème enfant de « boutique » ? Si vous pouviez m’éclairer cela… illuminerait ma journée ! ^^ Cordialement

      Répondre à Vod
    • Marlène

      Bonjour, je n’ai jamais rencontré le cas de figure personnellement mais cette discussion laisse entendre qu’il n’est pas conseillé de créer un thème enfant d’un thème enfant, qu’il est préférable de coder ses modifications directement dans le thème enfant, en gérant soi-même la mise à jour de cette partie (et en continuant à mettre à jour « normalement » le thème parent).

      Répondre à Marlène
    • Vod

      Bonjour, et merci pour votre réponse et le lien. Ce matin même, justement une petite MAJ storefront était proposée et je l’ai faite « pour voir », visiblement ça n’affecte pas mon site… Donc dans mon cas, si je comprends bien woocommerce m’a mâché le travail car je peux mettre à jour le thème parent tout en surveillant simplement du coin de l’œil ce qui se passe au niveau de la progéniture… Parfait ! Et encore merci :)

      Répondre à Vod
  • jean-michel

    bonjour,
    avant tout merci pour vos tutoriels qui permettent aux novices d’y voir un peu plus clair, mais encore….:)
    j’ai 2 petites questions:
    1- dois-je modifier la personnalisation du site web que j’aimerai lancer dans le thème enfant ou parent?
    2- par rapport aux tutoriels sur la sécurité, toute les modifications sur .htaccess et functions.php s’opèrent-elles sur le thème parent, enfant (vu que l’on doit créer un dossier functions.php), ou les 2?
    je te remercie par avance.

    Répondre à jean-michel
    • Marlène

      Bonjour Jean-Michel, la personnalisation soit s’effectuer dans le thème enfant, c’est même tout son intérêt :) En fait, le thème enfant vous permet de faire toutes vos personnalisations librement et de les conserver si le thème parent est mis à jour.

      Concernant le .htaccess, il est totalement indépendant du thème WordPress puisqu’il se situe à la racine du site et non dans le dossier d’un thème précis. Le fichier functions.php (qui n’est pas un dossier mais bien un fichier) est quant à lui dépendant du thème : dans ce cas, WordPress va d’abord charger le fichier functions.php du thème enfant s’il existe (vous pouvez donc créer vos propres fonctions dedans) puis le fichier functions.php du thème parent. Les deux vont donc se combiner :)

      Répondre à Marlène
    • Jérôme

      Bonjour Marlène !

      Déjà un tout grand merci pour ton site qui m’aide énormément dans le lancement de mon activité. Grâce à toi j’ai appris à configurer rapidement tout mes plugins, et bien d’autres choses. Tu as gagné un abonné !

      Ma question qui concernait les modifications de sécurité du fichier function.php a été posée par Jean-Michel. Il n’y a donc aucune faille de sécurité à ne faire les modifications que sur le fichier enfant, sans toucher au function.php parent ?

      Répondre à Jérôme
    • Marlène

      Bonjour Jérôme ! Merci pour le message. En règle générale, c’est plus sécurisé de faire les modifications sur le thème enfant, car cela permet justement de mettre à jour le thème parent (notamment si une faille est découverte). Mais évidemment, on peut aussi avoir des soucis de sécurité propres au code inséré. Le risque zéro n’existe pas ;)

      Répondre à Marlène
  • Fenice

    Bonjour et merci pour le tuto très clair.
    J’arrive à modifier assez bien des fonctions existantes (si j’ai bien compris ce qu’est une fonction). On pourrait dire aussi des styles existants.
    Mais je bloque sur un truc qui parait pourtant simple. Je voudrais ajouter une style (est-ce une fonction) qui formaterait une partie des articles. La biblio en fait. J’ai créé une classe biblio dans la feuille de style et marqué mes paragraphes comme « biblio » mais rien ne se passe… Du coup je me demande si
    – je dois ajouter une fonction et comment ?
    – si en fait c’est un id et non une class qui serait pertinent ?
    – en plus j’aimerais que ce soit facile de formater le texte depuis le backoffice, genre un format dans l’éditeur…
    Des idées pour y arriver ?

    Répondre à Fenice
    • Marlène

      Bonjour, une classe et une fonction sont deux choses différentes. La classe agit sur une mise en forme, tandis qu’une fonction est plus évoluée, on peut lui faire faire des choses « logiques », poser des conditions (ex : « si on est sur telle page, faire telle action »).

      Pour appliquer un style à un paragraphe, il faut par exemple écrire <p class="biblio">Contenu du paragraphe</p>, en définissant la classe .biblio dans la feuille de style.

      On peut également créer des shortcodes, qui évitent d’avoir à rentrer du code à chaque fois. En gros, on entre par exemple [biblio]Le texte à mettre en forme[/biblio]

      Et on peut faire en sorte de créer un bouton dans l’éditeur de WordPress, que l’on associe au shortcode.

      Répondre à Marlène
  • Anaïs T.

    Bonjour Marlène,
    Tout d’abord un grand merci pour cet article très instructif.
    J’utilise le thème Salient pour mon site WordPress. J’ai créé les pages de mon site sur un thème Salien Enfant qui, par chance, était déjà créé par l’éditeur de thèmes.
    Je viens de recevoir une notification qui m’indique qu’une nouvelle version mise à jour du thème Salient est disponible. Avant d’effectuer la mise à jour, je souhaitais avoir la réponse à cette question qui me taraude : est-ce que, lorsque je mettrai mon thème Salient Parent à jour, les mises à jour se configureront automatiquement sur mon thème Salient Enfant, sans changer pour autant mes modifications de CSS ?
    Je me permets de poser cette question car, lorsque j’ai dû mettre à jour ma version de WooCommerce, les mises à jour n’ont été faites que sur le thème Salient Parent et non Salient Enfant. J’ai dû rajouter manuellement les fichiers Woocommerce mis à jour dans mon thème Salient Enfant. Je me demandais donc si cela allait être la même chose pour la mise à jour de mon thème Salient.
    Pardon par avance si ma question est évidente, je suis néophyte dans tout cela ! :-)
    Merci beaucoup !

    Répondre à Anaïs
    • Marlène

      Hello, en principe si ce n’est que du CSS et que le thème est bien conçu, le thème enfant vient vraiment s’ajouter comme une couche supplémentaire par rapport au thème parent. Là où ça peut « ne pas fonctionner », c’est par exemple si le développeur modifie profondément la structure du thème parent et que tes personnalisations ne s’appliquent plus (parce que l’intitulé des classes CSS a changé, par exemple).

      Tu devrais contacter le créateur du thème et lui exposer ton problème lors de la précédente mise à jour, il t’apporterait peut-être une explication intéressante ou tiendrait compte de la remarque pour les futures mises à jour.

      Répondre à Marlène
    • Suny ☼

      Coucou Marlène,

      Alors je sais que tu n’es pas l’auteur de l’article, mais ça aurait mérité quelques précisions pour les débutants qui veulent créer un thème enfant. Il y a des questions que je me pose (si tu veux bien m’éclairer :-p ) :

      1) Une fois le thème enfant créé et ACTIVE. Faut-il laisser le thème enfant toujours activé, à vie ? Parce que dans mes thèmes de Apparence, je me retrouve du coup avec mon ancien thème xxx et le nouveau thème xxx-child.
      J’ai remarqué par exemple que dans Apparence, l’option Editeur disparaît avec le thème xxx-child. Y a t il des moments où il faut repasser sur le thème xxx ?

      2) Imaginons que dans mon dossier thème xxx-child, via le FTP, je veux rajouter juste quelques lignes de codes au fichier header.php. Genre les fameux codes pour faire marcher Google Analytics ou créer un likebox Facebook. Je suppose que je dois faire ça : copier intégralement le header.php du thème parent et ajouter le fichier dans le dossier xxx-child, et là, je rajoute mes lignes de codes.

      Ou alors créer un fichier header.php dans le dossier xxx-child, en écrivant directement les lignes de code concernées, et y a certaines lignes de code du header.php du parent à pas tout copier pour ne pas créer de conflit entre les deux fichiers ?

      Bref, je sais pas si tu as compris. Mais je trouve que ça serait bien d’apporter de nouveaux éclaircissements que se posent beaucoup de débutants, why not un autre article sur le thème enfant. Bises !

      Répondre à Suny
    • Marlène

      WordPress pose d’excellentes bases sur les thèmes enfants dans cet article pour ceux qui s’y mettent.

      Oui, le thème enfant doit être laissé activé puisqu’il vient s’ajouter au thème parent. Si tu l’enlèves, tu n’auras que le thème parent sans les personnalisations apportées via le thème enfant.

      Concernant le header, la réponse figure sur le site de WordPress : « le thème de votre enfant peut écraser n’importe quel fichier dans le thème parent : il suffit simplement d’inclure un fichier du même nom dans le répertoire du thème enfant, et il va écraser le fichier équivalent dans le répertoire du thème parent au chargement du site. Par exemple, si vous souhaitez modifier le code PHP pour modifier l’en-tête du site, vous pouvez inclure un header.php dans le répertoire du thème de votre enfant, et ce fichier sera utilisé à la place du fichier header.php du thème parent ».

      Répondre à Marlène
  • Cécile

    Bonjour,

    Quand je veux créer un thème enfant, j’ai ce message d’erreur et que je fais « Analyser ». Est-ce normal ?

    « Notice: Undefined variable: charitize_customizer_defaults in /home/associatnhe/www/wp-content/themes/charitize-pro/inc/hooks/wp-head.php on line 427 »

    Répondre à Cécile
    • Marlène

      Bonjour Cécile, il faudrait contacter le créateur du thème car en général, cette erreur provient de la façon dont le thème est codé (par exemple, une variable qui n’a pas de valeur définie).

      Répondre à Marlène
  • Alexandra

    Bonjour Marlène,

    Je bloque bêtement sur la création des deux fichiers functions.php et style.css. Je suis parvenue à les créer, mais je bloque sur la création de leur contenu. J’entends parler de bloc note, d’éditeur de texte mais cela ne me parle pas.
    Comment dépasser cette étape ?
    Grand merci.
    Alexandra

    Répondre à Alexandra
    • Marlène

      Bonjour Alexandra, pour ce qui est du contenu il y a les éléments incontournables (listés dans l’article) mais ensuite, tout dépend des fonctions que l’on souhaite avoir sur son thème et c’est vraiment propre à chacun. Par exemple, j’ai sur No Tuxedo des fonctions pour ajouter un fil d’Ariane optimisé sur le blog, des fonctions qui gèrent la pagination de chaque rubrique, des fonctions relatives aux commentaires, etc. L’idéal, c’est de réfléchir à la fonction qu’on veut créer et d’ajouter le mot « functions.php » sur Google. Par exemple « fil d’ariane functions.php », il y a plein de tutoriels par ce biais. En anglais le choix est encore plus vaste !

      Les fichiers php et CSS se modifient avec un éditeur de texte, soit le Bloc-Notes, soit un vrai éditeur qui colore le code pour le rendre plus lisible (Notepad++ sur PC, Fraise sur Mac par exemple). C’est simplement le programme qui permet de modifier ces fichiers.

      Répondre à Marlène
  • fabulous

    Bonjour, et merci pour ce tuto !
    si je peux me permettre, dans le fichier styles.css du thème enfant, concernant du nom du template parent, il ne s’agit pas de renseigner [le nom officiel du thème parent (1ère ligne, Theme Name dans le fichier style.css du thème parent)] mais bien du nom du répertoire contenant le thème parent.

    Répondre à fabulous
    • Marlène

      Bonjour, l’auteur de l’article était un invité sur le blog donc je réponds à sa place, ne sachant pas s’il verra le message. Vous avez entièrement raison, je vais donc corriger l’article en conséquence car ça avait échappé à ma vigilance lors de la relecture. La ligne « Template » doit bien correspondre au nom du répertoire du thème parent. Merci !

      Répondre à Marlène
  • mistigriffe

    Salut Marlène
    Peut-t-on (toujours) supprimer l’extension qui a permis de créer son thème enfant une fois qu’il est créé ?

    Répondre à mistigriffe
  • ari

    Bonjour Marlène,
    merci pour tes articles et ton blog au design et au contenu hyper clairs!
    je débute dans la création de mon blog, pour autant j’aimerais partir sur des bases saines et avoir un thème enfant. Chronologiquement, quand faut il faire cela? pour l’instant j’ai juste un nom de domaine, un hebergeur (1&1), un theme. Faut il d’abord créer la BDD etc? ou d’entrée le thème enfant?
    par ailleurs faut-il obligatoirement passer par filezilla/ftp ou tout est-il gérable depuis l’hebergeur?
    désolée pour mes questions ultra débutantes. ..et merci encore pour toutes les infos de ton blog.

    Répondre à ari
    • Marlène

      Hello, pour ma part je fais en général les choses dans cet ordre :
      > Nom de domaine
      > Choix de l’hébergeur
      > Création de la base de données
      > Installation de WordPress (qui par défaut te mettra plusieurs thèmes de base)
      > Paramétrage des options de base (celles du menu Réglages de WordPress + installation et paramétrage de plugins comme Akismet, Yoast SEO, Wordfence pour la sécurité, etc.)
      > Choix du thème et personnalisation.

      Je trouve ça plus simple pour ma part de passer par un logiciel comme FileZilla ou WinSCP pour accéder au serveur mais je sais que certains hébergeurs ont des outils qui permettent de visualiser le contenu du serveur en ligne.

      Répondre à Marlène
    • ari

      ok merci pour tes conseils!

      Répondre à ari


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.