Créer un thème enfant WordPress

Créer un thème enfant WordPress

Découvrez la procédure pas-à-pas pour créer un thème enfant WordPress.

Utiliser un thème « tout fait » est un gros gain de temps quand on créé son site web avec WordPress. Après des heures de recherche, vous avez enfin trouvé votre bonheur…mais il lui manque quelques détails pour vous satisfaire complètement.

Vous êtes tenté de modifier votre thème WordPress mais vous avez un peu peur de tout casser, et vous n’avez pas envie de tout recommencer à la moindre mise à jour!

Dans ce cas, pour modifier un thème wordpress existant, vous devriez créer un thème enfant.

Ce « sous-thème », relié au thème principal (le thème « parent »), ne contiendra que les modifications apportées par vos soins. Vous pouvez ainsi modifier le thème wordpress existant sans prendre le risque de perdre l’ensemble du thème en cas d’erreurs. Pratique, non?

Je vous montre en vidéo comment faire ça en quelques minutes…

La vidéo suivante montre une manipulation sur un site créé en local et non sur un hébergeur en ligne. Pour adapter le tutoriel, il suffit d’utiliser le module NppFTP dans le menu « Compléments ». Après configuration avec les accès FTP, il ouvrira une fenêtre montrant l’arborescence de votre serveur, sur la droite de Notepad++, en tout point semblable à la fenêtre (située à gauche) qui est montrée dans ce tutoriel. Le reste du tutoriel ne change pas.

Comment créer un thème enfant WordPress ?

  • Durée: 7min 57
  • Niveau: facile | intermédiaire | expert
  • Public: webmaster/chef d’entreprise | développeur |tous

Cliquez ici pour afficher la transcription de la vidéo :
« Créer un thème enfant WordPress »


Bonjour à tous. Ici Marie-Eve, du blog les Doigts dans le Net. Aujourd’hui, je vais vous expliquer comment créer un thème enfant pour votre site WordPress. À tout de suite.

1/ Présentation des thèmes WordPress 00:13

Le thème que j’utilise actuellement est Twentyeleven. Vous le connaissez sûrement; c’est le thème par défaut de WordPress. Quand on installe un site, on arrive en fait avec ce thème-là. Dans le back-office, voilà, je suis dans « Apparence », « Thèmes ». Vous voyez donc Twenty Eleven qui apparaît ici par défaut. Et je voudrais également vous montrer les dossiers pour que vous voyez où se situe le thème sur le serveur puisque c’est là que nous allons créer le thème enfant.

Sur la gauche, ici, « techniquefacile » ça représente en fait mon site Web et à l’intérieur, vous voyez, il y a l’arborescence habituelle de WordPress. Si on regarde dans la partie du bas, c’est peut-être un peu plus facile de le reconnaître, donc vous avez bien le wp-admin, le wp-content, le wp-includes, et en dessous les fichiers qui sont propres au fonctionnement de WordPress.

Si on va dans wp-content, on a un dossier qui s’appelle « themes ». Donc on a un dossier par thème. Ici, Twenty Eleven et Twenty Ten.

2/ Création du thème enfant 01:17

Donc pour créer un thème enfant, je vais créer un nouveau dossier dans le dossier « themes ». Donc je me situe ici, je fais un clic droit, « New folder », et donc je vais lui donner en fait le même nom que son parent, twentyeleven-child. C’est une convention de nommage qui est assez fort répandue. Maintenant vous pouvez choisir de l’appeler autrement; ça n’a pas d’importance.

Dans ce dossier, je vais créer le premier fichier qui est le fichier style. Il faut savoir qu’un fichier style, le fichier style.css, voilà c’est un document de type texte. Donc je vais l’appeler « style.css ». Voilà. Ici, je lui dis oui. Alors le fichier de style.css, il est très important puisqu’en fait, c’est celui-là qui va dire à WordPress qu’il y a un nouveau thème qui existe. Vous pourriez mettre tous les fichiers que vous voulez dans un thème, tant qu’il n’y a pas style.css dedans, WordPress ne le reconnaîtra jamais comme étant un thème.

Et pour être tout à fait précis, il faut inscrire quelques lignes dans ce style.css pour qu’il soit tout à fait reconnu par WordPress. Alors, les lignes, quelles sont-elles? C’est tout simplement un commentaire avec la première partie. Vous allez indiquer en fait le nom de votre thème. Ici, c’est un nom complètement libre. On va marquer par exemple « Thème enfant de Twenty Eleven », voilà. La ligne pour laquelle il faut être très attentif, c’est la suivante : vous pouvez écrire « Template » et en face de Template, vous allez renseigner le nom du dossier du thème parent, donc exactement comme il se présente dans votre arborescence. Donc ici, « twentyeleven » en minuscules, tout attaché (Template : twentyeleven). Si on compare avec le dossier themes ici, on voit bien voilà que mon thème parent, c’est bien Twenty Eleven en minuscules, tout attaché. Donc c’est ce nom-là qu’il faut que je renseigne en face de « Template » pour que WordPress fasse le lien entre le thème enfant et le thème parent.

Je vais tout de suite placer un peu de style dans ce fichier pour que quand nous activerons le thème enfant, nous puissions voir une différence à l’œil nu. Donc je vais tout simplement mettre * { color:red; }. Qu’est-ce que ça va faire? Eh bien, * en fait, ça indique n’importe quel élément HTML et « color:red; », ça va dire au navigateur d’afficher la couleur de la police en rouge.

Je sauvegarde avec un « control + S » et nous allons aller dans le back-office pour activer le thème enfant.

3/ Activation du thème enfant 3:57

Et vous voyez, dans les thèmes disponibles, il y a un nouveau thème qui est apparu qui s’appelle « Theme enfant de Twenty Eleven ». Et donc je vais l’activer. Voilà : le thème a bien été activé. J’ai bien un message de succès en haut. Donc je vais aller voir sur le front et recharger (F5), pour voir si mon texte est bien apparu en rouge, si ça fonctionne comme nous le voulons.

Première chose que l’on voit : le texte est en effet en rouge; ça, ça va. Par contre, on a un petit problème de mise en page. Elle ne récupère pas en fait la mise en page qui était déjà dans le parent.

4/ Pourquoi a-t-on perdu la mise en page (CSS) du thème parent?

Tous les fichiers qui sont dans le thème enfant remplacent tous ceux du thème parent. Style.css qui est dans le thème enfant remplace le fichier style.css qui est dans le thème parent. Comment est-ce qu’on répare ça? Bien, c’est très simple. On va se situer dans le style.css du thème enfant et on va importer les styles du parent. Vous allez voir : ce n’est qu’une petite ligne de code. Je me situe dans le style.css de l’enfant et je vais lui dire de faire un import et je lui donne l’URL du fichier à importer. Donc je sors de mon dossier avec le double point, je mets un slash pour dire que je vais rentrer dans un autre dossier, je rentre dans Twenty Eleven et je pointe vers style.css : @import url( »../twentyeleven/style.css ») ;

Cette ligne de code permet à mon thème enfant de récupérer le style de mon parent. Je sauvegarde avec Ctrl + S. Et nous allons le voir tout de suite en front ici si ça fonctionne. Voilà, ça fonctionne bien. Nous avons bien donc notre style du thème parent qui a été importé et par contre, je surcharge bien la couleur de la police avec mon « *{color=red;} ». Donc j’ai bien un mix entre les fichiers du thème parent et les fichiers du thème enfant exactement comme je voulais l’avoir.

Si vous avez un thème parent qui utilise plusieurs feuilles de style, n’oubliez pas de toutes les importer.

5/ Comment travailler avec un thème enfant? 6:05

Pour toutes les modifications CSS, vous allez venir dans style.css faire vos modifications. Pour tous les changements de fichiers, c’est-à-dire les templates PHP, vous allez copiez le template du thème parent dans l’enfant

Par exemple, si je voulais surcharger le fichier sidebar.php… Où est-ce qu’il est? Voilà. Donc le fichier sidebar.php sert à afficher la sidebar de votre blog. Si je voulais la modifier, je n’aurais qu’à copier dans le parent ce fichier-là, le coller dans mon thème enfant et puis ensuite l’éditer, faire les modifications que je veux, sauvegarder, alors automatiquement c’est cette version de ce fichier qui sera utilisée.

Et enfin, le troisième type de changement qu’on peut faire, c’est les ajouts de nouvelles fonctionnalités dans le fichier functions.php et là, bien, c’est encore plus simple puisque le fichier functions.php du thème enfant, c’est un petit peu l’exception qui confirme la règle. Au lieu d’écraser celui du thème parent, il va venir le compléter.

Donc si je veux utiliser un fichier functions.php, j’ai juste besoin de créer un nouveau fichier, de l’appeler « functions » — n’oubliez pas, il y a un « u » et il y un « s » à la fin —. php et dans ce fichier-là donc, je vais pouvoir faire toutes mes modifications, ajout de sidebar, ajouts de menu, ajouts de favicon, etc., etc. Il y a énormément de fonctionnalités que l’on peut ajouter grâce au fichier functions.php.

Voilà. J’espère que vous avez bien suivi ce tutoriel, que vous arriverez à le reproduire et si vous avez des questions, n’hésitez pas à m’en faire part dans les commentaires. À très bientôt!

Fin de la transcription

Créer un thème enfant : Résumé

  • 1/ Présentation des thèmes WordPress
  • 2/ Création du thème enfant WordPress 01:20
    • Le code pour déclarer le thème:
      /*
      Theme Name: Thème enfant de Twenty Eleven
      Template: twentyeleven
      */
      
  • 3/ Activation du thème enfant 3:57
  • 4/ Importation du CSS du thème parent 4:58
    •  @import url(« ../twentyeleven/style.css »);
  • 5/ Comment travailler avec un thème enfant ? 6:05
Prenez garde à ne pas trop surcharger votre thème enfant ou les performances en pâtiront. Dans cette situation, nul autre choix que de modifier directement le thème parent…et tant pis pour les mises à jour!

Alors, que pensez-vous des thèmes enfants de WordPress? Déjà adepte de cette pratique?


Image courtesy of http://www.freedigitalphotos.net

comment créer un thème enfant wordpress, créer un thème enfant, développeur, modifier un thème wordpress existant, tutoriel, vidéo création thème wordpress enfant, vidéo pour modifier un thème wordpress existant, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

196 commentaires

  1. Bonjour,

    Après avoir entendu parler des thèmes enfants, je découvre enfin concrètement leur fonctionnement. Une petite question : Est ce que cette méthode fonctionne avec tous les templates worpress gratuit ou payant ?

    Merci pour votre retour.

    Répondre
    • bonjour,
      Oui, pour plus de détails je vous renvoie à la réponse que j’ai faite à Bruno. 😉

      Répondre
      • Merci pour votre réponse.

    • Bonjour,
      j’ai suivi avec attention la vidéo explicative BIEN CONSTRUITE sur le thème enfant. Je l’ai appliquée sur le site que je suis, mais si je vois bien qu’il y a un thème enfant, pas moyen d’appliquer le style…
      j
      j’ai bien ajouté pourtant dans style.css l’import
      @url {« ../twentyeleven/style.css}

      pourriez vous me dépanner.

      merci encore

      Répondre
      • Bonjour,

        Avez-vous un message d’erreur ? Pourquoi ne pouvez-vous pas activer le thème enfant ? Expliquez-moi bien ce qu’il se passe, c’est sûrement un détail.

      • Le thème s’applique bien mais tous les styles sont perdus… pas de mise en page… j’ai fait un essai en téléchargeant un autre theme enfant twenty eleven sur internet, et j’ai le même souci… en voyant la vidéo, c’est uniquement l’import url des styles qui comptent pour créer le thème enfant… un fichier php que j’aurais modifié auparavant peut il en être la cause ?

      • Si le thème enfant est activable mais que les styles sont perdus, c’est que le chemin indiqué dans la règle @import dans la feuille de style est incorrect. La modification d’un fichier PHP ne peut en être la cause que dans un cas: si vous avez supprimé l’insertion de la feuille de style dans functions.php du thème parent.

      • la mise en page est bien revenue, en effet… j »ai maintenant un souci de duplication de menu (menu du haut qui se duplique… 4 lignes)… j’avais créé un menu secondary… merci à vous de prendre du temps pour aider de simples novices

      • Difficile d’être sûre d’où ça vient, mais ce qui est sûr, c’est que ça ne vient pas du thème enfant mais de la création du second menu. Pour en être sûr, supprimer ce second menu et vérifiez que tout revient dans l’ordre.

        Ensuite, remettez-le en étant très attentif (pas de copier-coller intempestif!) à ce que vous écrivez (identifiant…)

    • Merci pour ce tutoriel.
      J’y ai trouvé l’info essentielle que je cherchais.

      A bientôt.

      Répondre
    • Merci pour cette vidéo très intéressant.
      J’ai une question, si on veut mettre dans le thème enfant une modification d’un CSS qui provient d’un plugin comment l’insérer. J’ai fait des essai mais pas du tout concluant.

      Merci pour votre aide

      Jean-Pierre

      Répondre
      • Bonjour Jean Pierre,

        Il faut faire préfixer chaque sélecteur par l’identifiant du plugin.
        Par exemple, si vous avez comme identifiant de plugin id= »slider », et que vous voulez importer ce style : a{text-decoration:underline;} alors il vous faudra mettre dans votre thème enfant :
        #slider a{text-decoration:underline;}

        Ca devrait mieux fonctionner comme ça. J’explique cette astuce en détails dans ma courte formation CSS.

  2. Génial ! Marie Eve

    C’est toujours un plaisir de voir vos tutaux qui sont clairs et bien enseignés

    Merci beaucoup

    bruno

    Répondre
  3. Salut,

    Très bonne idée de créer 1 thème enfant pour pallier au soucis des mises à jour.

    Est-ce valable pour tous les thèmes?

    Répondre
    • Salut Bruno,

      Oui ça marche pour tous…sauf les « blank thèmes », qui sont des bases très complètes pour faire son thème de Aà Z (il suffit d’enlever ce qui est en trop et ajouter la couche CSS/HTML).

      Répondre
      • Bonjour,
        Je viens de voir votre vidéo et ça ne fonctionne pas chez moi !!
        Je suis actuellement sur le theme graphene, et lorque je céer le « theme enfant » dans la page de gestion des themes il m’affiche :

        « Thèmes endommagés

        Les thèmes suivants sont installés, mais incomplets. Les thèmes doivent avoir au moins une feuille de style et un modèle.
        Nom Description
        graphene Child Le thème parent est manquant. Merci d’installer le thème parent « graphene ». »

        Alors que je suis actuellement sur graphene (donc il est installé !).Y a t’il un rapport avec les fameux blank thèmes ? Et si oui comment faire ? je ne comprend pas votre exprication …
        d’avance merci !

      • Bonjour Alexandre,

        Cela veut dire qu’il ne trouve pas le thème parent: donc tu as une erreur sur la ligne « Template: nomdudossierduparent »

        Le code en commentaire doit être très exactement celui-là:
        /*
        Theme Name: Thème enfant de Twenty Eleven
        Template: twentyeleven
        */

        Cette semaine, j’ai passé une heure à chercher pourquoi un de mes thèmes enfant ne marchait pas…j’avais juste mis un espace entre « Template » et « : » !!!

        Relis toi bien, et n’oublie pas non plus d’écrire en face de « Template » le nom du dossier du thème parent EXACTEMENT A L’IDENTIQUE (fais un copier-coller).

        Je suis sûre que ça va marcher maintenant 😉

      • Je viens de trouver mon problème !!!!! (après des heures de recherches!)
        lorsque j’allais dans mon gestionnaires de themes WP, il m’indiquai a la fin , graphene avec un \ … alors qu’il n’apparaissait pas dans mon css lorsque je l’ouvrai avec textedit, mais il apparaissait (avec plein d’autres choses ) lorsque je l’ouvrais dans mon navigateur safari mais impossible de le modifier… je me suis dit que textedit devait y etre pour qqch.

        J’ai donc telecharger Espresso et magie les caractère en trop apparaisents et j’ai pu les modifier… retirer le superflu et la tout fonctionne .
        Je ne sait pas si c’est très claire , mais pour résumer, avec espresso CA MARCHE DU TONERRE !
        Merci tout de meme pour ta reponse et bonne continuation !

      • Je n’ai pas tout compris..mais du moment que ça marche, c’est bon! :)

      • MERCI Marie Eve !

        Je savais que le nom du template était sensible à la casse, mais pas à l’espace juste avant « : »

        Et pourtant cela n’est vraimen pas le premier thème enfant que je sais !

        Bonne journée

  4. Cet article tombe juste alors que je viens de mettre à jour mon thème justement.

    Répondre
  5. Ah ok si j’ai bien compris le thème enfant reprend par défaut toutes les caractéristiques du thème parent grâce à la fonction import. Et seuls les fichiers contenus dans le dossier du thème enfant sont prioritaires par rapport à ceux du thèmes parents.

    Répondre
  6. Bonsoir Marie-Eve !
    Déjà je t’avouerai que l’image que tu as pour ton article, je l’adore ! :)

    Une vidéo , ah ! J’apprécie beaucoup ! Pour moi ça été un vrai bordel quand j’ai commencé à jouer avec le thème enfant. Dommage que je n’ai pas vu ta vidéo avant, ça m’aurait permis de gagner environ ;.. quelques heures? ^^

    Bravo,
    Merci !

    Benjamin

    Répondre
    • Hé pas facile de trouver une image de thème enfant…du coup c’est baby-wordpress :)

      Répondre
  7. Bonjour Marie Eve,

    Tu présentes là une leçon assez claire pour qui veut s’essayer à la création de thème enfant.
    Moi, pour mon blog, j’utilise le thème Arras qui a déjà des thèmes enfants; et donc,
    pour singulariser mon thème, j’ai juste dupliqué un thème enfant et j’ai modifié les feuilles de styles pour l’adapter à mes couleurs.
    Ce qui donne un thème particulier, nulle part vue ailleurs (loool).

    Au plaisir!!!

    Répondre
  8. Adepte oui, heureusement que j’ai trouvé cela il y a quelque semaines. Mais merci pour ton conseil de ne pas trop le surcharger, je ne le savait pas et je vais en tenir compte. Au passage, toi qui une nerd (surdoué au Québec) du net, comment faire pour que les vidéo youtube ne ralentissent pas le chargement. Si tu écris un article là-dessus, préviens moi. Merci

    Répondre
  9. Merci Marie pour ces lignes, par contre petite question, c’est quoi le plugin installé qui permet de savoir quels sont les expressions clefs qui ont apporté du trafic à l’article ? :) ça peut me servir pour détourner un peu (not provided) sur GA :)
    Merci d’avance

    Répondre
    • C’est SEO Search Tagging (ou quelque chose comme ça). Mais je ne pense pas que ça te donne des résultats autres que ceux que Google veut bien montrer dans ses propres statistiques! A tester…

      Répondre
      • Meric beaucoup :)

  10. Je n’ai pas spécialement besoin de créer un thème pour enfant mais il y a quelques process que je pourrait reprendre aisément pour mes prochains templates! Merci encore une fois!

    Répondre
  11. merci beaucoup pour ce tuto ! C’est très simple et très rapide à mettre en place !
    -> dans mes favoris 😉

    Répondre
  12. Bonjour MarieEve,
    Si je souhaite utiliser le bootstrap de twiter pour mon thème enfant , j’importe le css sans inscrire le lien qui va cherche le css du parent ?
    Et pour jQuery ça se passe comment ?
    Que faut il faire ?
    Merci de tes lumières
    St3f

    Répondre
  13. Bonjour,
    Merci pour le tuto thème enfant. Une question : après avoir activer le thème enfant, on ne travaille plus que sur le thème enfant, n’est-ce pas ?
    Merci :-)

    Répondre
    • Bonjour,
      Exactement ! Le but étant de ne jamais modifier le thème parent.

      Répondre
  14. Bonjour,
    Tout jeune bébé sur WordPress j’essaye de faire un thème enfant pour mon futur blog/site; tout se passe correctement comme sur la vidéo jusque la 6ième minute; apparemment mon thème parent: spartan version lite http://www.themealley.com/Spartan/
    doit comporter plusieurs feuilles de style. Où les trouver pour pouvoir les importer dans mon fichier style.css? (Il est possible que de choisir un tel thème soit une erreur, car trop complexe?)
    Merci d’avance

    Répondre
    • Re moi,
      Mon post n’a plus lieu d’être: ça marche, mon thème enfant a pu être activé.
      Me rendant compte de mon ignorance j’ai changé de thème parent pour twentyten, apparemment plus abordable et bénéficiant de tutos pour sa transformation.
      Un grand merci pour votre vidéo, grace à vous je pense en être à la phase du babillage pour wordpress.

      Répondre
    • Bonjour,

      Normalement, on peut faire un thème enfant de n’importe quel thème, mais il arrive que ce soit plus difficile avec les gros thèmes. Voire que tu perdes certaines fonctionnalités (réversible en désactivant le thème enfant).

      Pour tes styles, regarde en FTP dans wp-content/themes/spartan/ tu devrais avoir un dossier « style » ou « css » avec tes autres feuilles de style.

      Répondre
  15. Bonjour MarieEve,
    Me voilà dans le grain bain de WordPress! Et avec des tutos comme le tien je sens que je vais progresser à vive allure.
    En fait depuis bientôt 3 ans, je « fouine » dans les tutos de WP pour me former : tuto.com, wpChannel, 4h18, Vidéonoob, MisterWP, Zara, WordPress Francophone, j’en passe et des meilleurs…
    Me voici avec 2sites en local avec EasyPhp, 2 sites avec FTP, et d’anciens(3 ou 4) blogs sous Blogger,WP et autres… de quoi occuper mes activités de retraité sur le Caillou du Pacifique.
    En tant que président d’une association de malades de Parkinson, je gère le site http://www.apnc.nc sous WP.
    Je cherche à l’améliorer au fur et à mesure des découvertes comme le thème enfant et je te remercie de me permettre cette possibilité
    DANNY de NOUMEA

    Répondre
    • Bonjour Danny,

      Bienvenu parmi nous :) Un peu de « tropicalité » dans ce monde de code! Je fais bien sûr référence à la nouvelle Calédonie. Un endroit que j’ai très envie de redécouvrir (je suis née entre Païta et Tontouta, mais mes parents sont rentrés en france quand j’avais 9 mois).

      Ma connexion rame trop pour aller voir ton site, mais compte sur moi pour y faire un tour!

      Répondre
  16. BONJOUR MarieEve,

    Ci-joint un lien d’un fichier qui explique mon pb avec un thème enfant :

    http://cjoint.com/?CCzjbp4QkYg

    avec 10 photos d’écran (FIG 1 à10 )

    J’ai installé un site en local avec EasyPhp 5.3.9. –>test apnc wp v3.5.1 pour améliorer la présentation de mon site officiel –>www.apnc.nc :
    FIG1

    FIG2

    J’ai suivi la procédure pour le thème enfant que j’ai installé à partir de twentyeleven et que j’ai nommé twentyeleven_child

    FIG3

    Après avoir lancé le tableau de bord de WP sur le thème Twenty Eleven (FIG4) j’ai choisi d’incorporer dans l’entête des images mises en ligne différentes de celles du thème (FIG5)
    FIG4 FIG5

    Voilà ce que ça donne au niveau de l’entête (FIG6) mais lorsque que je demande un affichage aléatoire (FIG7)

    FIG6 FIG7

    Voilà ce que ça donne (FIG8) au niveau de l’entête du site  plus d’image avec le message suivant :
    Warning: sprintf() [function.sprintf]: Too few arguments in C:\Program Files\EasyPHP-5.3.9\www\test apnc wp v3.5.1\wp-includes\theme.php on line 934
    Warning: sprintf() [function.sprintf]: Too few arguments in C:\Program Files\EasyPHP-5.3.9\www\test apnc wp v3.5.1\wp-includes\theme.php on line 935
    FIG8

    Si je retourne dans le theme Twenty Eleven et que je sélectionne images par défaut et aléatoire(FIG9)

    FIG9

    J’ai un bon résultat au niveau du site (cf FIG10)
    FIG10

    Si je veux utiliser le thème enfant, j’ai le même pb que ci-dessus.

    Comment corriger le message de la FIG8 ?
    Merci pour ta réponse

    Répondre
    • Bonjour Danny,

      Je vais te répondre, mais quand on a un problème aussi détaillé, aussi précis, il est préférable d’aller sur un forum. Les commentaires de blog peuvent ainsi être consacrés à des échanges plus génériques.

      Concernant ton problème, cela n’a rien à voir avec le thème enfant, puisque comme tu le dis, ça bug avec ou sans le thème enfant. Je penche pour un bug dans le thème. As-tu essayé de le mettre à jour ? Et wordpress, est-il à jour ?

      Au pire, désinstalle le thème, télécharge une nouvelle version du thème et réinstalle-le. Ta version est peut-être buguée (ça arrive).

      Répondre
  17. Bonjour,
    J’ai créé un site avec wordpress (le 1er) que j’ai complétement customisé parce que le thème le permet via ces options tout d’abord et de plus via une zone de saisie du CSS spécifique mis à dispo. Le pb du thème enfant s’est posé au moment de la màj du thème !!!
    De plus j’ai des extensions, elles aussi avec leurs propres options CSS.
    Comment faire pour récupérer tous les fichiers CSS concernés par mes modifications sans risquer d’en perdre ?
    Sur le serveur, il y en a partout des .css et après recherche sur le serveur, il ne semble pas que le style.css du thème intègre mes modif.
    Le thème est le « MANTRA ».
    Si vous pouviez m’aider ce serait cool, j’avoue patauger un peu.
    Stéphanie

    Répondre
    • Bonjour Stéphanie,

      si vous avez utilisé les options du thèmes, pas de problème pour la mise à jour: elle conservera vos modifs. Par contre, si vous avez modifié les fichiers, là vous ne pouvez plus.

      Quand à « regrouper toutes les moodifications », il n’existe rien d’automatique. Il faut tout passer en revue et noter vos changements vous-même. Puis créer le thème enfant et déplacer les modifications (pas sur les plugins: on ne change JAMAIS un plugin si on souhaite le mettre à jour – pas de solution possible).

      Le mieux pour cette manipulation est de copier le site en local pour ne pas faire de bêtise 😉

      Répondre
  18. Bonjour,

    merci d’avance pour l’aide que vous apportez.
    J’ai installé Mystile de woothème, j’ai créé un thème enfant , seul quelques surcharge sont prises en compte mais pas par exemple les modif faite au #body ?

    Mystile possède nativement des options de couleur grey.css brown.css qui sont dans un dossier styles,. quand j’utilise firebug avec firefox , je constate que mon theme enfant est bien pris en compte , mais que le thème parent brown.css reprend le dessus !
    pas croyable non ? avez vous déjà rencontré ce problème ?
    merci déjà d’avoir pris le temps de me lire :+)

    Répondre
    • Bonjour,

      Oui c’est un problème que je rencontre parfois. Cela vient de ces nouveaux thèmes dits « framework » avec un tas d’options de configuration. Je suppose que cela vient du fait que les développeurs de ce type de thème le font pour un public qui n’a justement aucun envie de coder. Donc il ne prenne pas en compte le fait de créer un thème enfant.

      D’ailleurs ces thèmes sont déjà un peu lourd à la base. Je ne suis pas sûre que l’utilisation d’un thème enfant soit appropriée.

      Anyway…vous pouvez toujours contourner le problème en désactivant, dans le thème enfant, les feuilles de style du parent qui vous gênent. il y a probablement d’autres solutions mais celle-ci me paraît assez facile à faire.

      A++

      Répondre
  19. Bonjour,

    J’ai créer mon thème enfant il y a quelques jours.

    J’ai donc ma feuille de style.css pour tout ce qui est modification de la « forme »et cela fonctionne très bien.

    Avant de passer à la suite, je voudrais être sur d’une chose :

    Pour ce qui est du « fond », puis-je copier-coller « content.php » dans mon dossier enfant et faire directement les modifications ?

    Merci pour votre réponse

    Répondre
    • Bonjour audrey,

      Oui tout à fait, c’est exactement comme ça qu’il faut faire. Bonne modification! N’hésitez pas à venir nous présenter votre site quand il sera fini.

      Répondre
  20. Bonjour à tous, merci MarieEve pour vos précieux tutoriels.

    Pour ma part, lorsque je veux modifier le CSS d’un thème, j’utilise le plugin MyCustomCss qui permet de faire toutes les modifications CSS via ce seul outil, en prenant le dessus sur le CSS d’origine mais sans altérer pour autant les fichiers du thème en-lui même (je me demande si je suis claire…).

    Cette « technique » permet-elle finalement la même chose que créer un thème enfant (en cas de mise à jour du thème par exemple) ? Qu’en pensez-vous ?

    Répondre
    • Je réalise les limites de ma précédente proposition. Je ne peux que modifier le CSS via ce plugin (MyCustomCss) donc l’intérêt supplémentaire de passer par un thème enfant est de pouvoir également modifier des fichiers PHP.

      Cependant, je reste intéressée par votre avis sur ce plugin que je trouve bien pratique pour modifier le CSS via une seule interface (sans avoir à chercher le fichier si le thème en contient plusieurs de ce type). Pensez-vous que cela surcharge inutilement le site ?

      Très bonne continuation !

      Répondre
      • Bonjour,

        Bonne remarque concernant les fichiers PHP.

        Par rapport à ce plugin, c’est vrai qu’au final, ça fait la même chose que le thème enfant, mais que pour le css. Tout deux écrivent par dessus le css original Cela surcharge toujours un peu, mais le thème enfant aussi.

        Très bonne continuation à vous aussi! :)

      • Bonjour et merci pour votre réponse !

        Ce que je trouve plus pratique avec le plugin My Custom CSS (avec espaces contrairement à ce que j’avais écrit dans mes précédents messages pardon) est la coloration du code.

        Cela est-il possible avec l’éditeur de WordPress ?

        Mais en effet, surcharger avec thème enfant + plugin, ça fait peut-être beaucoup, je vais tâcher de me modérer 😉

      • Non l’éditeur de WordPress est vraiment mauvais côté ergonomie… je vous conseille plutôt Notepad++ qui se branche directement sur le serveur en ftp. Là vous aurez toutes les fonctionnalités d’un vrai éditeur.

      • Bonjour Marie Eve,
        Merci infiniment pour tes tutos super clairs!
        je livre mes questions un peu en vrac (désolée, je débute, je suis un peu boulet):
        Je n’arrive pas à appliquer ma mise en page de mon thème parent dans mon thème enfant pour mon nouveau site (thème news-magazine).
        -peut être est à cause du thème qui a trop d’option de configuration? (notamment le spider ne prend meme pas mes photos et affiche celles par défaut)?
        -peut être que les modifications CSS que j’avais faites dans le thème parent (avant de lire ton article) ne peuvent être prises en compte?
        -peut être que je n’ai pas les bon outils: j’ai filezilla et brackets mais quand je veux modifier le css ou les fonctions de mon thème, je le fais depuis le tableau de bord de mon site WP (« modifier le CSS » ou « thème editor »). Je ne sais pas si il faut absolument modifier le css en utilisant un serveur local ou /et un éditeur (on créée sa page avec et on la charge via filezilla?)
        – est ce qu’une copie de mes ajouts CSS ou PHP que je recolle depuis depuis le tableau de bord de mon site WP dans « modifier le CSS » ou « thème editor », après avoir effectué les mises à jour, ne suffit pas plutôt que ce thème enfant que je n’arrive pas à faire?
        Je sais que je suis un peu fouillis mais vraiment je suis perdue…
        je te remercie beaucoup pour ta gentillesse et ta pertinence!! hop la!

      • Bonjour Gaëlle,

        En effet, si tu utilises un thème enfant, tu ne peux pas utiliser le menu Editor de WordPress, car celui-ci modifie le parent (en général). Les modifications peuvent être vues mais ça dépend un peu desquelles. Donc dans le doute, il vaut mieux travailler sur l’enfant.
        Par contre, les outils du back-office comme ton slider devrait fonctionner normalement. Mais si tu as installé le thème enfant après avoir configuré le slider, tu as perdu cette configuration et il faut la refaire (ou ne plus utiliser de thème enfant).

        Mon conseil si tu n’es pas à l’aise avec le code est de ne pas utiliser de thème enfant et de t’en tenir aux options de configuration de ton thème. C’est toujours plus simple. Mais attention, si tu te sens de « galérer » un peu au début, garde le thème enfant car il te rendra bien des services. Ahh le choix cornélien 😉

  21. Wow! Merci! Tutoriel super complet, tu m’as sauvé beaucoup de temps.
    Je t’ajoute à mes favoris!

    Répondre
  22. j’utilises depuis peu le theme twentyeleven après avoir opté d’abord pour arras , puis graphene…
    je voudrais utilser un thème enfant , mais je trouve pas wp – content ni d’ailleurs le theme twenty eleven .
    en revanche je trouve graphéne et arras ???

    je suis néophite ,si vous pouviez me guider de façon simple et didactive.

    merci d’avance ,marc

    Répondre
    • Bonjour Marc,

      Etes-vous connecté en FTP sur votre serveur ? J’ai l’impression que vous regardez dans le back-office de votre site, ce n’est pas le bon endroit.

      Répondre
  23. Merci MarieEve pour cette super vidéo très claire.
    J’ai été piégé à 2 reprises par des mises à jour de thème.
    L’utilisation d’un thème enfant est donc prioritaire juste après installation du thème.
    Je l’essaie actuellement sur un thème premium, sans problème apparent.
    Bonne continuation.

    Répondre
    • Bonjour,

      De plus en plus les thèmes premium sont compatibles, je viens justement d’en faire un sur Mystique (pas payant mais aussi premium qu’un payant), sans problème.

      Répondre
  24. Bonjour, je rencontre actuellement un problème majeur sur mon site, je dois donc mettre à jour mon thème. J’ai donc créé le theme enfant de mon thème, selon votre tuto, mais lorsque je le prévisualise, je peux voir que cela ne fonctionne pas du tout! je galère depuis 1 mois bientôt avec les problèmes de mon site et je commence à m’arracher les cheveux.

    le message est le suivant:

    « Warning: require_once(/homez.640/monpetits/www/wp-content/themes/mercor-child/admin/admin-interface.php) [function.require-once]: failed to open stream: No such file or directory in /homez.640/monpetits/www/wp-content/themes/mercor/functions.php on line 49

    Fatal error: require_once() [function.require]: Failed opening required ‘/homez.640/monpetits/www/wp-content/themes/mercor-child/admin/admin-interface.php’ (include_path=’.:/usr/local/lib/php’) in /homez.640/monpetits/www/wp-content/themes/mercor/functions.php on line 49 »

    Je suis donc allé voir le fichier et la ligne concernée mais je ne comprend pas le problème:

    « ild Options
    require_once (ADMIN_PATH . ‘admin-interface.php’); // Admin Interfaces
    require_once (ADMIN_PATH . ‘theme-options.php’); // Options panel settings and custom settings
    require_once (ADMIN_PATH . ‘admin-functions.php’); // Theme actions based on options settings
    require_once (ADMIN_PATH . ‘medialibrary-uploader.php’); // Media Library Uploader

    $includes = get_template_directory() . ‘/includes/’;
    $widget_includes = get_template_directory() . ‘/includes/widgets/’;

    J’ai demandé de l’aide sur le forum WP mais pas de réponse, je ne sais plus quoi faire, à part supprimer mon thème, perdre toute mon travail effectué jusque là et recommencer! j’espère que vous pourrez m’aider.

    Merci

    Répondre
    • Bonjour

      je ne comprends pas le rapport entre mettre à jour le thème et faire un thème enfant.

      Vous avez déjà modifié le thème parent et vous souhaitez le mettre à jour ? Du coup vous vous êtes dit « je vais créer un thème enfant pour y mettre tous mes changements puis je pourrais mettre à jour le parent » ? C’est ça ?

      Désactivez le thème enfant : avez-vous toujours l’erreur ? Si oui, c’est le thème parent qui a un problème, sinon, on continue.

      Créez un thème enfant avec uniquement style.css (et si wp vous le demande, index.php à l’identique du parent) : : avez-vous toujours l’erreur ?

      On devrait déjà y voir plus clair comme ça.

      Répondre
      • Oui c’est exactement ça, en fait j’ai créé mon site de e commerce avec un thème de chez theme forest (mercor + woo commerce) j’ai entièrement réalisée mon site, et à la fin je me suis aperçue qu’il y avait un bug au niveau du bouton « ajouter au panier » qui ne se créé pas lorsqu’on choisis les options d’un produit variable (couleurs par ex) du coup, l’administrateur du thème, me dit de mettre à jour celui ci, et comme je ne veux pas perdre tout mon travail, je veux faire la mise à jour sur le thème enfant. D’après mes recherches c’est possible ???

        Je n’ai pas du tout activé le thème enfant puisque je le vois en aperçue que ça bug. Mon thème parent lui fonctionne (hormis le bug cité)

        Donc si je fais un fichier styl.css vide, rien ne s’affiche sur mon WP,
        enfin je suis pas sur que ça soit ce que vous me demandez.

        Merci de votre réponse!

      • Désolée de la réponse tardive, mais je vois que Dom vous a correctement répondu. Vous devez en effet faire « marche-arrière », remettre le thème parent dans son état d’origine (sauvegardez les modifications) et déplacer les modifs dans le thème enfant (je parle uniquement des modifications dans les fichiers).

        Par contre, il est fort probable que vous perdiez les configurations du thème en back-office en passant au thème enfant. Ca dépend du thème… il vous faudra donc les refaire manuellement.

  25. Bonjour,
    Merci de me dire s’il est possible de créer un site enfant dans le cas où le site parent a déjà été modifié.
    Je viens seulement de me rendre compte de mon erreur en consultant le forum et je voudrais la rectifier car j’ai peur de ne plus pouvoir faire de mise à jour. En même temps, je crains de faire une fausse manipulation et de « planter » entièrement mon site.
    Pourriez-vous aussi me donner la marche à suivre car je suis novice dans ce domaine.
    D’avance merci pour votre aide précieuse
    Cordialement

    Répondre
  26. Bonjour Clo,
    Si je peux me permettre, j’ai fait la même erreur que vous au début !
    Le mieux est de créer un thème enfant en suivant la procédure du chef Marie-Eve !
    Dans un premier temps j’ai dupliqué ma feuille de style css et je l’ai ouverte avec notepad++ pour y ajouter les indications de déclaration (theme name etc comme indiqué dans le tuto)
    J’ai téléchargé mon thème d’origine que j’ai décompressé sur mon pc
    Ensuite à l’aide de l’option « compare » de Notepad++ j’ai ouvert ma feuille de style
    sauvegardée dans le thème-enfant et ouvert la feuille de style d’origine (celle qui se trouve dans le fichier que l’on vient de décompresser).
    cet outil de comparaison m’a permis de supprimer les lignes de codes qui n’avaient pas été modifiées et de conserver que mes modifs.
    Sauvegarde de la feuille css et le tour est joué !

    Répondre
    • Bonjour Dom,

      Merci pour votre explication, c’est en effet la bonne procédure pour revenir en arrière et utiliser un thème enfant sur un parent déjà modifié. Si vous avez modifié des fichiers PHP, il faut les copier coller dans le thème enfant et remettre ceux d’origine dans le parent. ET le tour est joué !

      Répondre
  27. Bonjour Marie-Eve
    J’ai bien suivi votre article sur le theme enfant et j’ai créé mon premier theme enfant sur mon site personnel ; question ( qui peut paraître simpliste) mais une fois le theme enfant activé et fonctionnel, si je fais la mise a jour de la derniere version du theme qui vient de sortir, vais-je perdre les modifications que j’avais apporté a l’original en installant le nouveau theme ? Je ne voudrais pas recommencer mes modifications.
    Merci et bravo pour vos articles !

    Répondre
    • Bonjour Daniel,
      Si vous aviez modifié l’original avant d’installer le thème enfant, vous les perdrez en mettant à jour le thème. Pour éviter cela, transférez vos modifications dans le thème enfant avant la mise à jour. Quelles modifications aviez-vous faites ?

      Par contre, vous ne devriez pas avoir fait de modifications dans le thème parent pour installer le thème enfant.

      Répondre
  28. Merci Marie-Eve

    J’ai malheureusement découvert l’utilité du theme enfant trop tard et je ne souhaite pas tout recommencer..modif . au positionnement des fenêtres et titrages, et l’installation du certificat ssl. Cependant je souhaiterais savoir , comment trouver seulement les modifications apportées aux nouvelles mises a jour sans recommencer ?outils de webmestre ? Je travaille en PC et aussi en MAC.

    Répondre
  29. Bonjour

    J’ai finalement réinstallé le theme original et refait un nouveau theme enfant; maintenant je refait mes modifications sur le theme enfant, p.c.q. il y avait tres peu de modifications.

    Merci beaucoup !

    Répondre
  30. Bonjour,

    C’est amusant à faire, même si je ne suis pas un pro je vais essayer tout cela car j’aime bien apprendre.

    Répondre
  31. Bonjour,
    Enfin une explication claire, surtout du pas à pas. depuis que je cherche sur le net des explications simples, de ce fameux thème enfant, c’est avec les « lesdoigtsdanslenet » que j’ai enfin pu installer ce dernier. OK nickel tout baigne sur mon blog.
    Je m’en vais de ce pas, l’installer sur notre site cccdv.fr (camping-car club Dauphiné Vivarais)
    Merci encore
    yvon

    Répondre
  32. Bonjour,
    est ce possible de rajouter dans votre article, le code d’importation.
    bêtement j’ai fait mon thème enfant après avoir regardé la vidéo, j’ai fiat un copier/coller du code dans l’article et j’ai zappé comme un idiot, c’est au bout de quelques minutes, j’ai regardé à nouveau la vidéo et là j’ai vu mon erreur.
    si le code @import url(« ../twentyelevenstyle.css »);
    était présente dans l’article, j’aurai gagné du temps, merci de votre compréhension

    Répondre
    • Bonjour,

      Voilà qui est fait. Merci pour la suggestion.

      Répondre
  33. j’ai fais une mauvaise manip. Bonjour, J’ai acheté le thème
    Modernize il y a quelques temps et je viens de recevoir une mise à
    jour. Le répertoire s’appelle modernize-v3-15 et le précédent était
    modernize-v3-11 sur mon serveur j’ai donc un répertoire
    modernize-v3-11. si je copie la nouvelle version modernize-v3-15,
    Je dois changer de theme sur le tabeau de bord de wordpress, et je
    perd toutes les personnalisations de mon thème. Comment dois-je
    procéder pour faire la mise à jour de mon thème ? Je ne sais pas si
    je dois utiliser la méthode des thèmes enfant ou si je dois effacer
    le repertoire modernize-v3-11, puis de copier le nouveau repertoire
    modernize-v3-15 et enfin le renommer modernize-v3-11 merci

    Répondre
    • Bonjour Jean-Luc,

      Houlà, on diarist que tu t’es emmêlé les pinceaux. Le répertoire du thème devrait s’appeler modernize tout court.

      Est-ce que tu as essayé de remplacer tes anciens fichiers (pas le répertoire ) par les nouveaux en FTP ?

      Si oui et que ça ne marche pas, je te conseillerai de remplacer en bdd l’ancien nom par le nouveau. Et puis de renommer ton répertoire en FTP. Et enfin de faire la mises a jour.

      Sauvegarde bien avant de commencer à tout changer !

      Bon courage

      Répondre
  34. Bonjour et merci de ce tuto très clair.

    toutefois J’ai un p’tit souci

    création du thème enfant -twentythirteen-child- no problème (merci qui?)
    Feuille de style – semble ok
    /*
    Theme Name: Twenty Thirteen Child
    Description: Thème enfant pour Twenty Thirteen
    Author: Alain
    Template: twentythirteen
    */

    @import url(« ../twentythirteen/style.css »);

    sur worpress en local
    quand j’affiche le theme enfant la feuille de style apparait mais vide (je devrai au moins voir l’entête non?)
    et si je fait »mettre à jour le fichier » ben cela m’efface le contenu du fichier style.css et donc m’affiche « Le thème est cassé. Le modèle est manquant. »

    une petite idée?

    Répondre
    • Bonjour alain,

      Ta feuille de style a l’air ok en effet. Mais je ne comprends pas le problème que tu décris après : « quand j’affiche le theme enfant la feuille de style apparait mais vide (je devrai au moins voir l’entête non?) »
      >>> Où affiches-tu le thème enfant ? Sur le navigateur (côté front-office), ou dans l’éditeur de WP en back-office, ou sur un éditeur comme Notepad++ ?

      Deuxième point pour m’aider à comprendre : Est-ce que tu vois le thème enfant dans le back-office de WP ? L’as-tu activé ? Si oui, ça donne quoi dans ton navigateur (en front-office) ?

      Répondre
      • merci de cette réponse rapide

        quand je suis dans apparence -> éditeur

        oui je vois mon thème et il s’affiche bien dans le navigateur.

        c’est dans l’éditeur si je veux donc modifier le style css enfant et donc que je fais « mettre à jour le fichier » ben cela m’efface le contenu du fichier style.css et donc m’affiche « Le thème est cassé. Le modèle est manquant. »

        j’espère être plus clair.

      • Oui maintenant je comprends ce qui se passe. Mais je ne sais pas pourquoi ça bug comme ça.

        Le principal est que le thème enfant est bien reconnu et est fonctionnel.

        Mon conseil : contournez le problème et utilisez un vrai éditeur de code comme Notepad++. Vous pouvez le connecter en FTP (Menu Extension/plugin > NppFTP > Show FTP window) à votre site pour modifier en direct les fichiers. En plus vous aurez la coloration syntaxique 😉

      • Cela ne change rien et comme je l’ai dit je suis en local.
        j’ai écrit dans le fichier avec notepad juste comme votre exemple pour changer la couleur du texte et ce n’est pas pris en compte.
        J’arrive pas à comprendre ce bug.

      • Bon j’ai essayé avec mon serveur en ligne et c’est pareil. Je pensais que cela pouvait venir EasyPhp en local mais non. même chose en ligne.
        J’ai fait le tour du web et je dois être le seul.

        Help

      • Je m’auto réponds

        alors tu sais quoi, c’est l’accent sur le « e » de « thème »
        /*
        Theme Name: Twenty Thirteen Child
        Description: Thème enfant pour Twenty Thirteen
        Author: Alain
        Template: twentythirteen
        */
        je viens de l’enlever et ca marche???????????? me demande pas pourquoi!!!

      • Tordu comme bug ! Ça me rappelle une fois j’avais mis un espace avant les deux points et ça marchait pas non plus… Galère !

  35. bonsoir,
    bien la vidéo pour ceux qui ont un site en local, moi je l’ai chez un hébergeur,
    je reproduis comme sur la vidéo, je fais tout sur la partie gauche de notepad++
    mais il y a un souci, toujours pas de thème enfant sur mon site, pourquoi ?
    merci

    Répondre
    • Bonjour,

      Si vous êtes en ligne, il faut modifier les fichiers qui sont sur le serveur. Par exemple, en utilisant Filezilla pour envoyer les fichiers modifiés en local, ou en utilisant le module FTP de Notepad++ (voir dans le menu Complément) pour travailler directement sur le serveur (plus facile).

      Est-ce que j’ai répondu à votre question ?

      Répondre
      • Bonjour,

        Je ne connaissais le module FTP de Notepad++, merci

        En réfléchissant j’avais compris mon erreur, mais en parcourant le forum de wordpress-fr.net, je vois que je ne suis pas le seul à n’avoir pas tilter sur le fait que la vidéo était pour un site en local, sans être désagréable, vu le travail que vous avez fait et qu’il est bien, mais ne faudrait-il pas une vidéo pour les sites chez un hébergeur ?
        Pour que les débutants ( comme moi) comprennent bien ?
        Merci

      • Bonjour,
        où indiquer au dessus de la vidéo, site local, sur le forum de wordpress-fr.net, des personnes sont perdus en voyant votre vidéo, ils n’ont pas compris la différence avec un site chez un hébergeur.
        Merci

      • Bonjour,

        J’irais le préciser avec plaisir. Mais pouvez-vous m’indiquer l’url du topic dont vous parlez ? Il y en a plusieurs où l’on mentionne cette vidéo, je n’ai pas trouvé duquel vous parliez.

      • Bonsoir,

        comment vous irez le précisez ?
        Je ne parle pas du sujet du forum de wordpress-fr.net mais de votre article, de le préciser au dessus de la vidéo.
        Dans le sujet de discussion sur wordpress-fr.net depuis la personne a compris et elle a passé le cap de la création du thème enfant, tout est bon.

        http://www.wordpress-fr.net/support/viewtopic.php?id=88329

      • AH ok, oui je vais le préciser.

      • bonjour,
        c’est mieux, par contre beaucoup, comme moi, utilisons FileZilla, c’est pourquoi je disais au début qu’il aurait fallu une vidéo pour un site chez l’hébergeur.
        A moins que vous ayez fait un article qui montre comme configurer notepad++ pour qu’il se connecte sur le serveur de son hébergeur?

      • Notepad++ joue le rôle de Filezilla, comme vous l’avez compris. Je ferais prochainement un article sur comment le connecter au serveur. En attendant, si vous testez, vous verrez qu’il n’y a que 3 boutons dans la fenêtre « NppFTP ». L’un de ces boutons est un genre d’écrou, cliquez dessus. Puis cliquez sur « Profile setting » (configuration de profile), rajoutez-en un avec les identifiants FTP corrects et ça roule. Au pire, une petite recherche sur Google ne devrait pas prendre longtemps.

      • merci, je vais tester

      • Bonjour,
        Malgré le fait que vous ayez bien indiqué que la vidéo est pour une version local et non chez un hébergeur, sur le forum de WordPress-fr.net, ne l’ont pas compris,
        http://www.wordpress-fr.net/support/viewtopic.php?id=105077
        peut être faut-il l’ajouter dans le sous titre
        Comment créer un thème enfant WordPress ?
        mettre Comment créer un thème enfant WordPress sur un site local?

        Mes meilleurs vœux pour l’année 2015

      • Bonjour,

        Je ne suis pas sûre qu’ils n’aient pas compris, car la procédure est quasi la même. Sur un hébergeur ou en local, la seule différence est :
        – l’utilisation ou pas d’un nom de domaine
        – l’utilisation ou pas d’un logiciel FTP

        Donc en fait c’est la forme qui change (la connexion au serveur) mais le fond reste le même :
        – créer un dossier dans wp-content/themes
        – mettre à jour le style.css dans ce dossier avec la déclaration du thème enfant et l’import du style du parent
        – activer le thème enfant

  36. Bonjour MarieEve,

    Super tuto, clair et efficace.

    J’ai juste une petite question: Si je ne me trompe pas, tu utilise un logiciel FTP qui te permet de transférer tes fichiers et de les éditer au sein même du logiciel…
    Pourrais-tu me dire de quel logiciel il s’agit? J’utilise Filezilla et de temps en temps, je suis obligé de me rendre dans mes dossiers pour éditer certains fichiers, ce qui n’est pas très pratique.

    Merci d’avance.

    Répondre
    • Bonjour Sam,

      J’utilise Notepad++, tu as un module (dans le menu « complément ») nommé FTP-quelquechose. A+

      Répondre
      • Merci MarieEve,

        Je vais l’essayer de ce pas.

        Une petite précision : lorsque j’ai copié/coller le code d’importation, il n’a pas marché.
        Cela était du aux <> que j’ai du remplacer par des  »  » dans le code.

        Cordialement.

  37. Bonjour Marie Eve et bravo pour votre tuto très bien fait. Je débute avec WordPress, je refais un vieux site que j’avais fait avec Guppy.
    La manip marche bien (twentythirteen) mais l’ordre de mes entrées de menu déroulant a été inversé par endroit.

    Répondre
    • Bonjour Alain,

      L’activation du thème enfant est vécu par WordPress comme un changement de thème normal. A ce titre, il peut perdre la configuration des menus et des widgets, ce qui explique le changement que vous observez. Vérifiez la configuration en back-office et ça devrait aller mieux.

      Répondre
  38. Bonjour Marie-Eve et merci pour ce tuto, c’est de loin le plus clair de tous !

    Je suis débutante et je m’attaque à un thème Premium « Sirens » de chez ThemeForest.

    C’est un thème complètement customisable semble-t-il.
    J’ai donc suivi tes conseils et crée un thème enfant, qui fonctionne avec tous les autres templates Twentyeleven etc, … donc la syntaxe semble être bonne.

    Mais cela ne fonctionne pas pour Sirens.
    Voilà ma feuille de style :

    /*
    Theme Name: Sirens Child
    Description: Theme enfant pour le theme Sirens
    Author: Vero
    Template: sirens
    */

    @import url(« ../sirens/style.css »);

    Mes questions :

    – dans ce cas de thème premium, dois-je créer un thème enfant, où peut-être le dév ne l’a pas prévu ?
    – est-ce nécessaire ?
    – il y a un dossier css visible sur le lien suivant :

    – que dois-je faire de ce dossier css, le copier tel quel dans le dossier du thème enfant ?

    Par avance, merci de ton aide. ;-))

    Répondre
    • Bonjour Véro,

      Merci, ce tuto a beaucoup de succès apparemment ! :)

      dans ce cas de thème premium, dois-je créer un thème enfant, où peut-être le dév ne l’a pas prévu ?
      >>> on peut toujours créer un thème enfant, mais parfois avec les thèmes premium, c’est plus compliqué (voir ma dernière remarque).

      est-ce nécessaire ?
      >>> Oui si tu veux modifier le thème d’une façon qui n’est pas déjà incluse dans les options de configuration du thème.

      – que dois-je faire de ce dossier css, le copier tel quel dans le dossier du thème enfant ?
      >>> non, la technique est de faire un import de toutes les feuilles de style utiles (ex: tu as peut-être un responsive.css ou un red.css en plus de style.css). Le problème, c’est que @import consomme beaucoup de ressources, donc quand y’en a plusieurs, ça ralentit le site.

      En fait, quand on choisit un thème premium très avancé (par ex. avec un page builder inclus) comme le tien, on ne fait pas de thème enfant car le thème prévoit déjà tout pour modifier à sa convenance. Es-tu sûre que ton thème ne couvre pas tes besoins ?

      En espérant avoir pu t’aider,

      Répondre
      • Merci beaucoup,

        Je t’ai envoyé réponse via email !

        😉

      • Oui j’ai vu, j’essaye de traiter mes emails ce soir, le tien est parmi les derniers alors pas sûre que j’ai le temps ! Mais je te réponds le plus vite possible. A+

  39. OK, pas de souci !!

    Répondre
  40. Bonjour Marie Eve, je to,be sur ton excellent tuto et je remarque qu’qvec le theme PERSPECTIVE de chimstudio mon thème enfant ne prend pas le dessus. J’ai renommé le thème parent ‘theme’ tout court mais bon le site fonctionne. Je vais donc prendre le risque d’avoir à reparaméter le fichier style css du parent lors des mises à jour. Bref, j’ai aussi un autre pb: j’ai regardé la source de mes pages et toutes les propriété CSS sont interprétées… de la ligne 54 à 752 c’est vrai;ent MOCHE; as-tu une idée? Je te remercie par avance!! k

    Répondre
    • Bonjour Karin,

      Je n’ai jamais eu de thème enfant qui ne prenne pas le dessus. A mon avis, y’a un problème quelque part.

      Tu as peut-être un thème qui te propose un encart « custom css » dans les options pour mettre ton propre css ?

      Je ne comprends pas ton problèmes d’interprétation CSS, c’est bien ce qu’on attend du css non ? Qu’il soit interprété ? En tout cas ton site a bon allure !

      Répondre
  41. Marie Eve merci de ta réponse on a laissé tombé le child theme ;( mais je viens de demander au support du thème de me dire si il y a un custom CSS ou un pb qquepart.

    Pour le pb lié à l’interprétation du CSS en fait je regarde la source de ton site et je ne vois que quelques lignes de style. Les infos restent dans les fichiers liés ce qui me semble plus rapide. C’est la mm chose sur leur site view-source:http://chimpstudio.co.uk/wp-demo/perspective/
    tout le CSS est dans la source : cela doit ralentir la page, non?

    Répondre
    • En fait, le css qui est dans ton code source est probablement généré lors de la création de la page, en fonction de ta configuration (supposition, mais je ne vois pas pourquoi il serait là dès le début).

      Pour répondre à ta question, non ça ne ralentit pas ta page, mais les nombreuses feuilles de styles externes, elles, oui. L’idéal serait de pouvoir minifier les css avec un outil comme http://www.minifycss.com/css-compressor/.

      Répondre
      • Merci Marie Eve de ces précieux conseils! Donc le support technique de Chimp Studio m’informe que les thèmes enfants ne sont pas supportés!
        Bonne journée et merci à toi

  42. Bonjour Marie-Ève,

    Je viens de découvrir votre blog, très bien construit et avec des tutoriels intéressants.

    J’ai créé un site avec WordPress en local (thème Mystile, utilisation d’un thème enfant Mystile avec woocommerce, développement en local avec MAMP) et en essayant de le mettre en ligne je rencontre quelques soucis. Malgré mes recherches sur internet je n’arrive pas à trouver de solutions.

    Tout fonctionne bien en local. Cependant, en ligne, voici les problèmes rencontrés (les 2 premiers étant les plus importants mais je suppose qu’ils sont tous liés):
    – mon logo ne s’affiche pas, à la place j’ai le texte par défaut « MyStile »;
    – mon footer customisé (via page option du thème) ne s’affiche pas, à la place j’ai le footer par défaut avec  » Powered by wordpress Designed by Woothemes »;
    – le Top menu n’a pas les bonne couleurs (paramétrées via le champ de saisi CSS rapide dans la page option de thème;
    – les vignettes des photos des produits dans la page produit sont plus petites (il y a donc un espace vacant à droite de la page qui ressemble à l’emplacement par défaut des widgets).
    etc…
    -les customisations effectuées avec mon thème enfant (.php) fonctionnent. Il semblerait que l’ensemble des éléments paramétrés via la page options de thème ne fonctionnent pas en ligne.

    J’ai essayé de réinstaller Mystile child theme, de désactiver des pluggins, de refaire plusieurs fois les étapes de mise en ligne mais j’obtiens toujours le même résultat, avec les différents points évoqués ci-dessus.

    Je suis perdue !!!
    Avez-vous une idée, une piste à suivre pour résoudre ces problèmes ?

    Merci pour votre aide,
    Audrey

    Répondre
  43. Magnifique ! je viens de trouver la solution, toute bête d’ailleurs… alors que je cherche depuis 4j du matin au soir ! J’ai rechargé mon logo sur mon interface WP en ligne, et tout s’est mis à jour (logo, footer, top menu …). Si cela peut aider quelqu’un,
    Audrey

    Répondre
  44. Bonjour,

    Bravo pour ce beau Tutorial.

    Je l’ai suivi à la lettre mais la page web ne se met pas en forme.

    J’utilise le thème BresponZive Mag.

    Voila le code que j’ai tapé dans le child :

    /*
    Theme Name: Thème enfant de bresponzive_pro-child
    Template: bresponzive_pro
    */

    @import url(« ../bresponzive_pro/style.css »);
    @import url(« ../bresponzive_pro/rtl.css »);

    *{
    colors: red;
    }

    J’attends une réponse avec impatience :)

    Répondre
    • Bonjour,

      Remplace les guillemets par des guillemets d’informatique (comme des apostrophes) et non par les guillemets de littérature. D’une manière générale, les guillemets ne doivent jamais être copiés/collés, il faut les taper soi-même. Est-ce que ça marche mieux ?

      Répondre
  45. Hello Marie-Eve,

    Tout d’abord : merci pour vos tutos. Ils sont géniaux et même pour une débutante comme moi, c’est compréhensible ;o)

    Je travaille avec un thème enfant de twenty eleven et, très curieusement cela n’avait pas fonctionner correctement. Entre autre, le menu n’apparaissait pas comme il le devrait : il se mettait sous format liste alors que j’ai vérifié mon code…

    Après plusieurs tentatives, j’ai essayé cette façon de faire.

    Après avoir créé mon thème enfant, j’ai été dans Apparence, Editeur et j’ai collé tous les codes de la « style.css » du thème d’origine.
    Cela à l’air de fonctionner. Je croise les doigts!
    A +

    Répondre
  46. Salut salut ton tuto est top ! mais j’ai une question existentielle 😉
    Mon thème a au moins 15 feuilles de style …. donc dois-je faire une ligne de code par feuille ? car j’ai essayer et j’ai l’impression que cela ne marche pas …

    Bonne après-midi

    Elisa

    Répondre
    • Bonjour Elisa,

      Faire une règle import pour chaque feuille de style, non, ça va prendre trop de ressource. Seule solution, mais c’est pas hyper-propre, c’est de copier-coller l’intérieur de chaque feuille de style dans une seule feuille et d’importer celle-là uniquement.

      Bien à toi,

      Répondre
  47. Bonjour,
    merci bcp pour ce super tuto !!

    Je construit un site web avec une partie blog et une parti commercial avec woocommerce et en thème: Mystile. Pour gérer, j’utilise MAMP.
    Au départ, évidement, je n’avais pas fait de thème enfant donc j’ai tout remis grâce a une sauvegarde et j’ai crée mon thème enfant …jusque la ca va 😉

    Comme je suis débutante, je voudrais savoir plusieurs choses …
    – quand je modifie qqchose dans la feuille de style , je le fait directement sur le tableau de bord de wp en passant par l’éditeur de feuille css ou je le fais dans mon dossier wp rattache à mon site qui est sur mon bureau …???

    – je voudrais aussi faire des modifications , comme mettre dans mon footer des menu/pages mais de manière horizontal ( style cgv, contactez-nous ..) …je ne sais pas ou je dois faire les changements …au secours !!

    – si je peux abuser, dans la partie du contenue du site je voudrais mettre des images des textes mais cote a cote …j’ai essaie avec leurs shortcode column…mais ca marche pas comme je veux ….HELP Me ou est ce que vous savez ou je peux trouver mes réponses ….
    d’avance merci !!!!

    Répondre
    • Bonjour Fany,

      « quand je modifie qqchose dans la feuille de style , je le fait directement sur le tableau de bord de wp en passant par l’éditeur de feuille css ou je le fais dans mon dossier wp rattache à mon site qui est sur mon bureau …??? »
      >> ça revient au même, donc vous faites comme vous préférez

      « je voudrais aussi faire des modifications , comme mettre dans mon footer des menu/pages mais de manière horizontal ( style cgv, contactez-nous ..) …je ne sais pas ou je dois faire les changements …au secours !! »
      >> il faut créer un nouvel emplacement de menu dans le footer : j’explique ça ici.

      « si je peux abuser, dans la partie du contenue du site je voudrais mettre des images des textes mais cote a cote …j’ai essaie avec leurs shortcode column…mais ca marche pas comme je veux ….HELP Me ou est ce que vous savez ou je peux trouver mes réponses …. »
      >> déjà assrez-vous que vos images sont suffisamment petites pour rentrer côte à côte. Ensuite, si le shortocode ne marche pas, mettez toutes les images à la suite les unes des autres en les alignant à gauche (au moment d’insérer les images dans l’article). Elles apparaîtront côte à côte.

      Répondre
  48. Bonjour Marie-Eve,

    J’ai un souci que je trouve très curieux pour appliquer ce tuto.

    J’utilise le thème Pinboard, version gratuite de wordpress. Je travaille pour l’instant uniquement en local.
    La plupart des modifs induites dans mon thème enfant s’appliquent bien. Cependant, certaines semblent ne pas vouloir fonctionner. Hors, lorsque je fais les mêmes modifs dans le thème parents, j’obtiens bien le résultat que je souhaite.
    Ex: largeur du bloc faisant apparaitre mes articles.
    .twothirdcol {
    width: 66.8%
    }

    Lorsque je change la valeur dans firebug ou dans directement dans le thème parent, pas de souci, le changement se fait bien. Par contre, lorsque je copie et colle soigneusement ces quelques lignes dans mon thème enfant et que j’apporte une modif à la valeur, aucun changement.

    C’est très frustrant… Je vous remercie par avance de toute aide que vous voudrez bien m’apporter!

    Amélie

    Répondre
    • Bonjour Amélie,

      A mon avis, votre règle CSS est trop faible et elle est écrasée par une autre règle. Vous pouvez vérifier si c’est le cas avec Firebug : dans la console css vous aurez la règle qui prévaut (celle du thème parent) puis en dessous la vôtre qui est barrée (pour montrer qu’elle est écrasée).

      Il faut alors que vous changiez votre sélecteur pour qu’il devienne prioritaire sur l’autre (un identifiant # est plus fort qu’une classe . par exemple).

      Répondre
  49. Bonjour Marie-Eve,
    je vous avoue que je ne comprends pas bien.
    Lorsque j’inspecte firebug, avant toute modif, ce sont bien les lignes du thème parent qui apparaissent, comme si mon thème enfant n’existait pas (il n’apparait même pas barré).
    Lorsque je le change cette valeur dans firebug ou dans le fichier style du thème parent la modification s’effectue bien. Donc c’est bien cette classe qui prévaut.
    Pourquoi est-ce que la modif n’est pas prise en compte lorsqu’elle est introduite dans le fichier style du dossier enfant alors que les modifs sont bien prises en compte pour d’autres éléments?
    D’autant plus que je peux difficilement changer ma class en id sous peine de modifier bien trop de chose dans mon code et de finir par réellement patauger.
    Si vous avez une idée sans perdre trop de temps super. Sinon, je comprends tout à fait que vous soyez débordée en ce moment, et je vais chercher encore de l’aide sur des forums divers (d’ailleurs, si vous en avez à me recommander).
    Cordialement
    Amélie

    Répondre
    • Bonjour Amélie,

      En dehors de l’explication due au poids de la règle CSS, il est possible que vous interprétiez mal le code que vous voyez. Si par exemple, le code css est introduit en javascript, il passera au-dessus du thème enfant dans tous les cas. Est-ce que le code que vous voyez existe dans une feuille de style ? Quel est le nom de cette feuille de style ?

      Peut-être avez-vous un cache qui empêche les modifications d’apparaître ? Videz le cache navigateur : cliquez ici. (pour le cache serveur, il faut chercher le bouton « vider le cache » dans le plugin qui s’en charge si vous en avez installé un).

      Difficile de vous aider plus sans voir le code :/ Avez-vous essayé le forum http://www.wordpress-fr.net/ ? J’y interviendrais bien mais il y a déjà tant de spécialiste qu’on fait double-emploi. Sinon il y a le forum d’alsacréations pour les problèmes liés spécifiquement au CSS.

      Répondre
  50. Bonjour,

    je ne pense pas que ce pb ait été déjà traité dans votre thread alors je me lance.
    J’ai fait le thème enfant d’Eclipse free mais impossible de modifier quoique ce soit, y compris dans la feuille de style d’origine.

    Est-ce dû au fait que le thème soit configurable sans toucher aux feuilles de style, via l’admin: apparence/theme/personnalisation et que cela écrase tout le reste. J’ai déjà fait des thèmes enfants pour d’autre sites sans pb.

    Répondre
    • Bonjour Jean Paul,

      En effet, ça m’est déjà arrivé de travailler sur un site où il était impossible de modifier le css car un css était généré à la volée et devenait prioritaire à mon fichier. Rageant… Peut-être que ton problème vient de là ? (tu peux voir ladite feuille avec Firebug)

      Répondre
  51. Bonjour, j’ai trouvé votre vidéo pour faire un thème child. Je suis vos conseils et j’ai effectivement dans mon administration worpdpress le thème enfant créé.
    je suis sur mac, j’ai cyberduck
    Je voudrais vérifier que je comprends bien
    1/ administration wordpress travailler aux modifications sur le thème enfant
    2/ l’Editeur est tout vide il n’y a que la feuille de style
    3/ Pourtant il me semble qu’il faut tout avoir pour modifier car je n’ai plus de référence ni de fonctions ni de php puisque tout est resté sur le thème parent
    4/ dans duck quand j’ai créé le dossier parent… tous les fichiers se sont mis à la file mais ils sont tous vides ? et je ne peux pas les ouvrir
    5/ dans duck dans Edition j’ai « copy page php » et copier l’URL ?

    Pouvez vous m’éclairer ?
    Merci beaucoup
    capsule

    Répondre
    • Bonjour,

      J’ai du mal à comprendre vos questions… D’une manière générale, vous ne devez plus travailler dans l’éditeur de WP (pour les raisons que vous avez remarquées : il n’y a pas de fichier) mais bien sur un éditeur de code type Sublime Text connecté en FTP sur votre serveur. Sinon utilisez cyberduck pour rapatrier sur votre ordinateur le fichier du thème parent à modifier, modifiez-le et envoyez-le dans le thème enfant avec ses modifications.

      ESt-ce que ça vous aide ?

      Répondre
      • Bonjour, Eh bien je suis un peu perdue…
        Il y a des tutoriaux où l’on indique
        1/ travailler dans l’Editeur WordPress ou par l’intermédiaire de cyberduck et Smultron directement dans les fichiers sur le serveur
        c’est la même chose puisque les 2 communiquent
        2/ qu’il vaut mieux ne pas travailler via FTP mais dans l’Editeur WP
        L’on s’y perd !
        merci

      • Bonjour,

        Comme vous l’avez constaté vous-même, il n’est pas possible de travailler dans l’éditeur de WP avec un thème enfant, puisque les fichiers n’y sont pas (et il n’est pas possible de créer de nouveaux fichiers). Les tutoriels qui vous disent de ne pas travailler en FTP ne sont donc pas corrects.

  52. En fait, j’ai un autre site qui avait été mis en place par un webmaster qui avait aussi fait les modifications que je lui demandais… thème wordpress aussi
    Mais il n’a pas fait de thème enfant et les modifications n’ont jamais été perdues…
    Puisque c’est essentiellement l’intérêt, c’est bien ça ?
    et je reformule ma question
    sur le thème enfant ma feuille de style css est presque vide à part ce que l’on a écrit pour la mise en place,
    donc comment je sais où trouver ce que je veux modifier ?
    merci

    Répondre
    • Elles ne sont perdues que si le thème est mis à jour. Ca dépend donc des thèmes.

      Repérez le code dans le style.css du parent et copiez-le dans le style.css de l’enfant : ensuite vous pouvez-le modifier.

      Est-ce que ça vous aide ?
      Bien à vous,

      Répondre
  53. Bonjour, eh bien j’ai fait un copié de la feuille de style parent
    et je l’ai collé dans la feuille de style enfant
    comme cela j’ai tout sous les yeux quand je cherche où intervenir…
    Peut-être est ce que parce que vous connaissez très bien ce langage et donc vous savez directement où intervenir…
    Mais, moi, je dois chercher à comprendre ce que chaque ligne de code veut dire et comment ça le dit ! (pour intervenir…)
    Merci
    capsule

    PS J’avais déjà tenté quelques interventions sur le thème parent…
    Faut-il remettre des fichiers tout propres parent et comment ?

    Répondre
    • Bonjour,

      Non ce n’est pas une mauvaise idée d’avoir tout copié (il ne faut donc pas la ligne @import) : mais ça fonctionne ? Parce que ça ne suffit pas. Les chemins relatifs, qui pointent vers le dossier image du thème parent, doivent être mis à jour pour que le code css continuent de fonctionner.

      Rassurez-vous, je ne sais pas non plus où intervenir. Je dois chercher dans le thème parent puis copier le code à modifier dans le thème enfant.

      Pas besoin de nettoyer le parent, mais il serait mieux de dupliquer les changements dans le thème enfant pour les conserver en cas de mise à jour du thème parent.

      Répondre
  54. bonjour ,

    Merci pour ce tuto

    Juste une question: comment copier / coller sous filezilla ?on peut déplacer mais pas dupliquer..
    merci pour votre réponse

    Répondre
    • Bonjour,

      On ne peut pas, tout simplement.

      Répondre
  55. Bonjour, excusez moi pour le temps de la réponse, j’étais occupée à d’autres choses…
    Qu’est ce que cela veut dire :
    Les chemins relatifs, qui pointent vers le dossier image du thème parent, doivent être mis à jour pour que le code css continuent de fonctionner.

    et puis sur mon autre site
    depuis que j’ai fait un thème enfant (ce qu’il n’y avait pas avant) j’ai perdu la traduction (previous post – next post etc… )
    j’ai traduit le fichier.po
    mais ça ne change rien

    (d’ailleurs je ne sais pas où intervenir pour le written by et date en anglais)
    merci de m’éclairer… !
    capsule

    Répondre
    • Bonjour,

      Si le code css du parent est copié/collé dans le dossier enfant, les chemins du type « background-image : url(‘image/bouton.png’); » qui pointent vers le dossier « images » présent dans le dossier parent, ne sont plus bons. Il faut les remplacer par « background-image : url(‘../dossier-parent/image/bouton.png’); »
      (là si vous ne comprenez pas, il faut apprendre ce qu’est un chemin relatif).

      Je ne me souviens plus par coeur du fonctionnement des fichiers de traductions, mais ils dépendent du thème activé. Actuellement, les fichiers .po/.mo du parent ne sont plus utilisés, il faut les mettre dans le thème enfant (ou les renommer…un truc dans le genre).

      Répondre
      • Bonjour, merci pour votre réponse… effectivement j’ai regardé hier après avoir lu votre message ce qu’est chemin relatif et chemin absolu…
        Je crois bien que finalement ça complique de faire un copié collé du CSS dans le theme enfant…

        Puisque les 2 sont dans l’éditeur de WP mieux vaut faire des visites au theme parent… pour  » transporter » uniquement les modifications…

        je vais me pencher sur les fichiers langue
        Bonne journée
        capsule

  56. Bonjour,

    J’ai une question toute simple dont je n’ai bizarrement trouvé aucune autre référence ici ou ailleurs sur les forums, mais j’ai probablement mal cherché… :

    Le Thème parent que j’utilise (Tempera) contient des templates php situés dans des sous dossiers (ex : tempera/includes/theme-loop.php).
    Est-ce que pour y avoir accès dans mon thème-enfant je dois reproduire la même arborescence, ou bien les positionner tous au même niveau, ou bien encore cela n’a aucune importance ?

    Merci de ta réponse qui ne devrait pas te prendre très longtemps 😉 et félicitations pour la qualité du contenu de ton site et la clarté de tes explications

    Répondre
    • Bonjour,

      La question n’est pas si facile que ça ! En fait, les thèmes complexes comme ce que tu décris, ne sont pas très adaptés à la création d’un thème enfant. Certains ne le permettent même pas !

      Tu peux essayer de reproduire la même arborescence que dans ton thème parent, mais sans garantie : ça dépend de comment est construit le thème.

      Hypothèse personnelle à ces limitations : ces thèmes sont hautement configurables via le back-office et n’ont donc pas besoin de passer par un thème enfant pour être personnalisé. Ou, deuxième hypothèse : l’architecture employée est trop complexe pour fonctionner avec un thème enfant.

      Il faudrait se pencher sur le code pour valider/infirmer les hypothèses, mais je n’ai pas le temps en ce moment. :(

      Répondre
  57. Bonjour,
    Je reviens vers vous, car aujourd’hui j’ai fait une mise à jour du thème parent
    qui a écrasé les changements que j’avais fait dans le thème enfant
    (par exemple lettres minuscules à la place des majuscules prévues dans le thème parent et idem dans les menus)
    J’ai été obligée de les enlever au niveau du thème parent, sinon ça ne fonctionne pas.
    Une autre question du coup me vient : quand une mise à jour est demandée sur un thème, comment connaître les changements que l’éditeur du thème a effectués pour en demander sa mise à jour. ?
    merci de m’éclairer…

    Répondre
    • Bonjour,

      Une mise à jour d’un thème parent ne peut pas écraser les changements faits dans le thème enfant.

      Bonne question ! Je ne sais pas si les créateurs de thèmes proposent un fichier avec la liste des éléments améliorés. Si oui, il doit être fourni dans le dossier Zip du thème, ou sur le site du créateur. Si c’est un thème gratuit, sur la fiche du thème sur wordpress.org.

      Répondre
    • bonjour,

      qu’avez vous mis au début de votre thème enfant ?
      le dossier du thème enfant s’appelle comment ?
      ne pas mettre d’espace dans le nom du dossier du thème enfant.

      Répondre
  58. bonjour,
    pourquoi mettre au code Importation du CSS
    des guillemets français

    @import url(« ../twentyeleven/style.css »);

    au lieu des bons guillemets anglais

    @import url(« ../twentyeleven/style.css »);

    ?
    Merci

    Répondre
    • les guillemets anglais ne veulent pas apparaitre, souci avec le thème ?

      Répondre
      • Bonjour,

        Vous avez bien compris le problème 😉

        Je change de thème le mois prochain, je verrais à ce moment là si le « bug » persiste.

  59. Bonjour,
    Je suis complètement néophyte et vous remercie beaucoup pour votre tuto et le temps que vous passez à répondre à nos interrogations.

    J’ai créé un thème enfant à partir du thème twentytwelve.

    J’ai suivi tous vos indications. Mais maintenant la couleur de la police de mes articles est rouge. J’ai supprimé la référence à la police rouge dans mon fichier style.css qui se présente maintenant ainsi :

    /*
    Theme Name : Theme enfant de Twenty Eleven
    Template: twentytwelve
    */

    @import url(« ../twentytwelve/style.css »);

    Mais j’ai cependant toujours cette couleur de police rouge. Je travaille sur mac et ai pris comme éditeur : smultron.
    Je ne sais pas si cela a de l’importance mais j’ai préféré vous l’indiquer.

    Avant j’avais essayer de remplacer « red » par « blue » parce que j’aurai souhaité avoir une police bleue. Mais cela n’avait rien changé non plus.

    Merci de votre aide.

    Répondre
    • Désolée de vous avoir dérangé … tout est rentré dans l’ordre ce matin .. la couleur rouge est partie..

      Merci encore pour vos tutus très utile.

      Bonne journée

      Répondre
  60. Bonjour, j’ai regardé votre tuto 200 fois aujourd’hui. J’ai bien réussi à créer le thème enfant. Mais la mise en page ne s’affiche pas correctement. Je vous montre le début de ma feuille css. Pourriez-vous me dire ce que j’ai fait de travers ? Merci d’avance 😉

    {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf210
    {\fonttbl\f0\fmodern\fcharset0 Courier;\f1\froman\fcharset0 Times-Roman;}
    {\colortbl;\red255\green255\blue255;}
    \paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
    \deftab720
    \pard\pardeftab720\sa240

    \f0\fs26 \cf0 /*\uc0\u8232 Theme Name:\’a0\’a0\’a0\’a0 pinboard-hiphoprnbnewz\u8232 Theme URI:\’a0\’a0\’a0\’a0 http://www.hiphoprnbnewz\u8232 Description:\’a0\’a0 Th\’e8me enfant pour le th\’e8me Radius\u8232 Author:\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0 Hansen\u8232 Author URI:\’a0\’a0\’a0\’a0 http://blog-concept.com/\u8232 Template:\’a0\’a0\’a0\’a0\’a0\’a0 pinboard\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0\’a0 \u8232 Version:\’a0\’a0\’a0\’a0\’a0\’a0 0.1.0\u8232 */
    \f1\fs24 \
    \pard\pardeftab720

    \f0\fs26 \cf0 @charset « utf-8 »;\
    /*\
    Theme Name:Mon Pinboard
    Template: pinboard
    */

    @import url(« ../pinboard/style.css »);

    Theme URI: http://www.onedesigns.com/themes/pinboard\
    Description: A crafty and elegant theme powered by an advan

    Je précise que je suis novice.

    Répondre
    • Bonjour Bruno,

      On dirait qu’il y a un problème avec votre copier-coller. Pouvez-vous m’envoyer votre feuille de style par mail à marieeve[arobase]lesdoigtsdanslenet.com ? Je vous dirais s’il y a une erreur.

      Répondre
  61. Bonjour Marie Eve,
    merci pour cette vidéo très efficace.
    J’ai réussi à créer mon thème enfant et mon site (pour le moment en local) s’affiche de manière presque conforme. Un souci tout de même j’utilise un megamenu (ubermenu) qui ne s’affiche plus correctement (il doit avoir une propre css) aurais-tu une solution.
    Merci de ton retour
    J.

    Répondre
    • Bonjour JG,

      Si tu avais configuré ton mégamenu avant la création du thème enfant, ET qu’il est dépendant de ton thème, il est possible que le thème enfant l’ait déréglé. A ce moment, je te conseillerais de le désactiver et le réactiver (il faudra le reconfigurer).

      Sinon, c’est difficile à dire sans voir le bug d’affichage.

      Bien à toi

      Répondre
  62. Merci ME,
    à vrai dire je n’ai pas fait le test de désactiver mon thème enfant pour réactiver le thème parent, je ne sais pas si cela a eu des conséquences…j’espère que non…en fait je pensais que mon mégamenu avait une css particulière que j’importe de la même façon que la css du thème…mais à priori ce ne serait donc pas si simple.
    Je procede aux test tt à l’heure pour vérifier s’il y a eu des « dégâts ».
    J

    Répondre
  63. le test effectué, si j’active mon thème parent je récupère tout y compris mon megamenu. A présent je ne comprend pas ce qu’il me manque dans mon menu enfant pour qu’il fonctionne…??
    J.

    Répondre
    • En fait, quand je disais « désactiver et réactiver », je parlais du plugin de mégamenu, dans le cas où il serait dépendant du thème (ce qui est possible vu que tu le retrouves bien quand tu réactives le thème parent). Désolée j’ai pas été très claire.

      Répondre
  64. Désolé suis-je dur de la feuille ? je ne comprends toujours pas très bien. la css de mon mégamenu est embarquée dans ma css principale. (d’ailleurs et ce serait une autre question mais bon je ne veux pas abuser comment corriger une css embarquée ?)
    mais revenons au principal je pensais qu’en créant le thème enfant je récupérais le tout. Faut-il désactiver mon mégamenu avant importation du thème ?
    Ne pas hésiter à me dire si j’abuse…
    Bonne journée
    J

    Répondre
  65. Bonjour,

    Merci beaucoup pour ce tuto, très clair.
    J’ai écrit exactement ce que vous avez noté, et pourtant, je n’ai toujours pas style correct. La mise en page n’est pas correcte.
    J’ai bien vérifié le chemin comme vous l’aviez suggéré, et cela ne fonctionne toujours pas, malgré le bon chemin.

    Que faire? Je dois forcément louper un truc.

    Merci à vous,
    Laure

    Répondre
    • Bonjour Laure,

      Qu’est-ce qui ne marche pas exactement ? Est-ce que vous avez pu activer le thème ? Si non, il doit y avoir un message d’erreur en bas de la page. Si oui, avez-vous fait le test de tout passer en rouge *{color:red;} ? Que donne ce test ?

      Avez-vous regardé avec Firebug si la feuille de style du parent était bien importée ?

      Si oui, Avez-vous vérifié que votre thème n’utilise qu’une seule feuille de style ? (réactivez le thème parent et regardez dans le code source) Peut-être qu’il faut en importer plusieurs ?

      Répondre
  66. Incroyable…
    Je rame depuis x temps pour comprendre ce qu’est exactement un child theme et comment ca marche et j’ai tout compris en 5 minutes avec ton tuto.

    Chapeau bas Madame !

    Une ou deux petites choses quand même sur lesquelles je pédale toujours :
    – Ok je suis proche su néant absolu en programmation, mais si on met du PHP en commentaire ( /*blabla*/ ) il n’est pas censé tout ignorer ? Visiblement non O_o

    – Seconde question, si ma mémoire est bonne mes quelques bases en CSS me disent que la dernière règle bouffe les autres donc on doit impérativement mettre l’import du parent en premier et toutes les modifications « enfant » après ou l’ordre n’a aucune importance ?

    En tout cas encore une fois mille mercis (ne sourcillez pas tous là, je vous vois. Merci se met au pluriel avec mille. J’ai été vérifier :p )

    Répondre
    • lol votre remarque sur les mercis m’a fait rire :) En plus j’ai appris un truc en passant.

      Ravie que mon tuto vous ait aidé aussi bien !

      – Ok je suis proche su néant absolu en programmation, mais si on met du PHP en commentaire ( /*blabla*/ ) il n’est pas censé tout ignorer ? Visiblement non O_o
      >>> pas dans le monde de wordpress où certains commentaires sont des instructions. Normalement, vous avez raison, c’est ignoré (mais lu quand même).

      – on doit impérativement mettre l’import du parent en premier et toutes les modifications « enfant » après
      >>> exact 😉 l’ordre est très important

      Répondre
  67. Enfin un tuto vidéo simple et clair que j’ai compris presque à la première tentative (je suis une novice sous wordpress.org) alors merci beaucoup!!! Je viens de perdre mes modifications en mettant à jour mon thème alors cet article tombe à pic. Donc maintenant si je modifie quelque chose dans mon thème enfant, plus rien ne sera perdu? C’est bien ça le principe du thème enfant?

    Répondre
    • Bonjour,

      Oui c’est le principe 😉

      Répondre
  68. Bonjour,
    Merci pour vos explications pour un thème enfant.
    J’ai fait plusieurs sites sous wp et il n’y a que maintenant que je me rends compte d’un thème enfant !!!!
    Surement à cause d’un site que je dois complètement refaire, qui est actuellement sous dream, mais ayant de gros problèmes de santé j’aimerai le mettre sous wp, car les personnes qui sont à mes côtés, ont des connaissances vraiment superficielles !!
    Sinon peut-on mettre plusieurs thèmes enfants svp ?
    Merci !! et ….
    Bonne Année !!!!!!!

    Répondre
    • Bonjour,

      On ne peut avoir qu’un seul thème enfant actif à la fois. Mais vous pouvez créer plusieurs thèmes enfants d’un même thème pour avoir plusieurs versions ; vous ne pourrez cependant n’en choisir qu’un à la fois.

      Répondre
      • Bonjour et merci Marie Eve,
        Pardon du retard de réponse mais j’ai eu une coupure d’internet.
        Merci de m’avoir répondu ! :-)
        En revanche, j’ai un peu de mal à comprendre comment peut on faire plusieurs thèmes enfants, et surtout quel intérêt ?
        Merci et bonne journée.

      • Bonjour,

        Pour caricaturer, disons que vous avez un thème qui vous plait mais il est avec la couleur jaune. Vous faites un thème enfant avec la couleur bleue, et un autre avec la couleur vert, ainsi vous avez deux versions de votre thème parent. Vous pouvez donc avoir votre site en jaune, bleu ou vert en un clic. Bien sûr on ne peut activer qu’un seul thème enfant à la fois. Voilà pour le principe. Bien sûr, dans la pratique, on fera des déclinaisons plus complexes qu’un changement de couleur.

  69. Bonjour Marie-Eve,
    Alors voilà, j’ai suivi ton tuto à la lettre et copier ceci dans ma feuille de style css :
    /*
    Theme Name: Headway Child
    Description: Theme enfant pour Headway
    Author: Flora
    Template: headway
    */

    @import url(« ../headway/style.css »);

    #style1 {
    float:left;
    }

    Mais ça ne fonctionne pas, il apparait bien dans mes thèmes sur wordpress mais me dit: « Headway Child\ Le thème parent est manquant. Merci d’installer le thème parent « headway\ ».  »

    Que faire? Merci beaucoup

    Répondre
    • Bonjour flora,

      Avez-vous laissé le thème parent dans le dossier thème ? C’est ce que dit l’erreur : il ne trouve pas le parent (ou il ne s’appelle pas « headway »). Le dossier doit s’appeler exactement comme ça et en minuscule.

      Répondre
      • Bonjour Marie-Eve. Je me permets d’en remettre une couche dans la pile de commentaires que cet article a bien mérité. Sans vouloir abuser de ton temps, voici ma petite problématique et néanmoins interrogation : je fais des sites depuis pas mal d’années maintenant, sans problème. Aujourd’hui, je souhaite éditer le thème enfant d’un nouveau thème dont le nom exact est Pure & Simple. Vexée de passer une journée à trouver le signe qui ne va pas dans mon fichier style.css, concernant le Template ou alors la Description…
        Je crois avoir tout essayé (pure-et-simple puresimple pureandsimple pure-simple). le coup de l’esperluette, on me l’avait jamais faite. Aurais-tu une idée ? Merci ! Le premier qui trouve, je lui fais des bises virtuelles. 😉

      • Bonjour Anne,

        Comme j’étais en congés, tu as surement résolu ton problème.
        Au cas où…mets nous le code de ton fichier style.css et je te dis ce qui ne va pas (si ça ne va pas).
        Ton site est-il en ligne ? Si oui, à quelle adresse s’il te plait ?
        Comment s’appelle le nom du dossier dans lequel est rangé le thème, ainsi que le nom dossier du thème enfant ?
        Ton thème s’appelle Pure & Simple mais quel est le nom du thème enfant ?

        Voilà avec ça, j’aurais tous les éléments pour t’aider 😉

  70. Bonjour,

    Peux t-on créer un thème enfant en localhost? Car je ne trouve pas et je ne vois pas comment mettre le fichier style.css dans wp-content…

    Merci :)

    Répondre
    • Bonjour Julien,

      Oui tout à fait. Il faut aller dans votre serveur local, puis dans le dossier où se situe votre site (souvent www ou htdocs). En fait cette vidéo se passe en localhost dans un environnement Window. Si c’est votre cas aussi, vous n’avez qu’à reproduire les étapes 😉

      Répondre
  71. Merci beau pour ce tuto claire et concis.

    Répondre
    • Je voulais dire merci beaucoup j’ai réglé mon soucis en 2 minutes grâce à vous.

      Répondre
  72. Bonjour Marie Eve !

    Tout d’abord, je tiens a te remercier pour le tuto que tu as fais, il est vraiment top !
    Cepandant, j’ai une petite question :
    Pour la modification d’un fichier tel que « main.css » qui ne se trouve pas du tout au même endroit que « style.css », il nous suffit juste de le placer dans le thème enfant, ou faut-il créer des dossiers supplémentaires ?

    En tout cas, merci beaucoup pour ton aide !

    Répondre
    • Bonjour Julie,

      Le mieux est de copier le code à modifier de main.css vers style.css et de le modifier là. Si tu veux utiliser un autre fichier que style.css, il faut le lier au thème enfant via functions.php.

      Répondre
      • Merci pour ton aide, mais du coup, j’ai trouvé une solution plus simple.

        En faite, il suffit de regarder grâce à l’outil web « Inspecter l’élément » les éléments que l’on veut modifier.
        Ensuite, il suffit d’aller dans « Apparence » puis « Personnalisé », et d’inscrire dans le « Custom CSS » le bout de code modifier pour que les changement prennent effets.
        Enfin, pour ma part c’est le thème « Klean » et ça marche !

        En espérant que ma solution en aidera plus d’un !
        Cordialement,
        Julie.

      • Parfait ! Ca fait la même chose que ce que je te disais mais via le back-office (cette option n’est pas disponible dans tous les thèmes).

  73. Merci beaucoup pour ta vidéo!
    J’ai galéré des jours sans y arriver et heureusement j’ai trouvé ton tuto!

    Répondre
  74. Bonjour,
    Merci pour votre vidéo sur le thème enfant !
    Je suis en train de travailler sur le thème twentyeleven et j’aimerai réduire en hauteur l’espace au-dessus de l’image d’entête ou se trouve le titre et le slogan, comment puis-je faire ?

    Bien cordialement.

    Répondre
  75. Bonjour,
    Après avoir passé des années à écrémer les sites pour trouver comment créer un thème enfant, j’étais sur la point d’abandonner : traversée du désert trop dure au final, plus une goutte d’encre dans ma cartouche à imprimer le neurone, ma boussole intelli.point 3 à zéro déchargée, plus de panneaux indicateurs HTML dans aucune direction, et là, mirage : vous apparûtes !

    Bref, tout fonctionne à merveille. Alors, comme vous vous êtes cassé la tête à faire ce tuto, j’ai essayé de faire pareil avec mes mots à moua.

    Merci mille fois pour cette petite vidéo clarinette…

    World Musiquement votre !

    Did

    Répondre
    • Bonjour Did,

      Merci pour ce message sincère et amusant :)

      Répondre
  76. Bonjour Marie-Eve,

    J’ai créé mon thème enfant pour mon modèle Accesspress lite par contre, après plusieurs tentative, je n’ai toujours pas réussi à faire suivre ma mise en page de mon thème parent. J’ai pourtant suivi les étapes à la lettre. Ce pourrait-il être parce que j’avais commencé à personnalisé le thème parent? Si non, je ne sais vraiment pas pourquoi je n’ai pas la mise en page.

    Merci d’avance

    /*
    Theme Name: Thème enfant de Accesspress-lite
    Template: accesspress-lite
    */

    @import url(« ../accesspress-lite/style.css »);

    Répondre
    • Peut-être me manque t-il des styles à importer mais dois-je les mettre un en dessous de l’autre dans le style.css de mon thème enfant
      Lorsque je regardes dans mon code source voici ce que je vois:
      }

      .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}
      #wpadminbar { display:none; }

      html { margin-top: 32px !important; }
      * html body { margin-top: 32px !important; }
      @media screen and ( max-width: 782px ) {
      html { margin-top: 46px !important; }
      * html body { margin-top: 46px !important; }
      }

      Répondre
      • Oui il faut les mettre les uns en dessous des autres dans le style.css de votre thème enfant.
        Essayez avec :
        *{color:red !important;}
        Si vous voyez du texte en rouge sur votre site (n’importe où) c’est que votre thème enfant fonctionne bien.

    • Bonjour Liliane,

      Il ne faut pas utiliser les guillemets français mais ceux qui ressemblent à une double apostrophes.

      Répondre
  77. Bonsoir, très bon tuto. J’ai creer un theme enfant de virtue_premium, j’aimerais savoir comment mettre un fichier style.css venant d’un plugin (ex: event calendar), je n’ai pas trouvé la solution.
    Merci Jean-Pierre

    Répondre
    • Bonjour,

      Voir la réponse faite à Jean-Pierre (est-ce aussi vous ?) ci-dessus.

      Répondre
  78. merci pour cette vidéo très claire

    Répondre
  79. Bonjour.
    Je reposte car je n’ai pas du le faire correctement la première fois.
    J’ai mis de coté cette video que j’ai regardé avec grand intéret.
    Mais ma question est hors sujet. Comment avec quoi avez vous realisé cette très bonne video je ne trouve rien de plaisant sur le net.
    Merci de votre réponse.

    Répondre
    • Bonjour,

      La vidéo a été réalisée avec Camtasia.
      Bonne journée :)

      Répondre

Trackbacks/Pingbacks

  1. Créer un thème enfant Wordpress - Les Doigts dans le Net | Communication web professionnelle | Scoop.it - [...] Comment créer un thème enfant Wordpress ? Wordpress, thème enfant et un peu de code...le tout en vidéo pas-à-pas! …
  2. Créer un thème enfant Wordpress - Les Doigts dans le Net | Baby Code | Scoop.it - [...] Comment créer un thème enfant Wordpress ? Wordpress, thème enfant et un peu de code...le tout en vidéo pas-à-pas! …
  3. Créer un thème enfant Wordpress - Les Doigts dans le Net | Votre site avec Wordpress | Scoop.it - [...] Comment créer un thème enfant Wordpress ? Wordpress, thème enfant et un peu de code...le tout en vidéo pas-à-pas! …
  4. Créer un thème enfant Wordpress - Les Doigts dans le Net | Premier scoop | Scoop.it - [...] Comment créer un thème enfant Wordpress ? Wordpress, thème enfant et un peu de code...le tout en vidéo pas-à-pas! …
  5. Perte de CSS | Mstayeb - Chargée de communication web - [...] WP, les doigts dans le net, travail avec [...]
  6. Je veux modifier mon thème WordPress ! - Les Doigts dans le Net - [...] Les thèmes de WordPress disposent d’un mécanisme particulier pour être personnalisés : on appelle cela les thèmes-enfant. [...]
  7. Créer un thème enfant Wordpress |... - […] Découvrez la procédure pas-à-pas pour créer un thème enfant WordPress.Utiliser un thème « tout fait » est un gros…
  8. Créer un thème enfant WordPress | Les Doigts dans le Net | la bibliothèque, et veiller - […] Je vous montre en vidéo comment faire ça en quelques minutes… … See on lesdoigtsdanslenet.com […]
  9. Bilan écriture et autoédition pour le 3e trimestre 2013 - […] créer un thème enfant pour pouvoir bénéficier des mises à jour du thème sans pour autant perdre mes…
  10. Worpress | Pearltrees - […] Créer un thème enfant Wordpress - Modifier un thème wordpress existant. Découvrez la procédure pas-à-pas pour créer un thème…

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint