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

Thèmes : Design WordPress 

Poster un commentaire

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

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

19 commentaires sur “Pour modifier un thème WordPress, apprenez à créer un thème enfant !

  • 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
  • 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.