Créer des thèmes enfants (child themes) avec WordPress

Publié le par - 11 579 vues

Le principe du thème enfant est de permettre la modification et l’ajout de fonctionnalités à un thème parent sans y apporter de quelconque changement. L’avantage majeur est de pouvoir bénéficier des mises à jour du thème parent tout en poursuivant les changements sur le thème enfant. 2 minutes chrono suffisent pour créer un child theme !


Méthode de création du child theme

Avec WordPress, la création d’un child theme est… enfantine !

    1. Créez un nouveau répertoire dans le dossier /wp-content/themes/NOM_DU_THEME_ENFANT ;
    2. Créez la feuille de styles CSS en nommant le fichier style.css ;
    3. Copiez / collez les lignes de code suivantes :
/*
Theme Name: Twenty Ten Child
Description: Thème enfant pour Twenty Ten
Author: Le nom de l'auteur
Template: twentyten
*/

@import url("../twentyten/style.css");

#style1 {
    float:left;
}
  1. Indiquez l’URL de la feuille de styles du thème parent @import url("../twentyten/style.css"); ainsi que le nom du thème parent dans Template: twentyten ;
  2. Commencez à coder les styles ;

A propos des fichiers de thèmes

Le thème enfant va ainsi hériter de l’ensemble des fonctionnalités du thème parent. De fait, seuls les fichiers qui seront ajoutés dans le dossier du thème enfant surpasseront ceux du thème parent.

Envie de changer le header.php ? Ajoutez ce fichier dans le dossier enfant. Idem pour l’ensemble du template WordPress.

Vous pouvez également vous limiter à l’ajout d’une feuille de styles CSS et multiplier ainsi les changements purement visuels tout en conservant la structure HTML du thème parent. Cette technique est monnaie-courante pour les thèmes premium. Cela permet aux designers d’offrir plusieurs apparences pour un même thème.

Avertissement pour le fichier functions.php

Contrairement aux autres fichiers du thèmes (index.php, single.php, etc.), le functions.php ne sera pas écrasé par celui du thème enfant – si par cas il existe. Il sera au contraire charger juste avant le functions.php du thème parent. Vous pouvez donc ajouter des fonctionnalités au thème parent sans « casser » ce dernier.

Utiliser un child theme est un véritable gain de temps tant pour le développeur que pour le webmaster qui n’auront plus à se soucier des modifications apportées. Un thème source propre en termes de code et un thème enfant pour le customiser à souhaits. Ingénieux, non ?

Crédits photo : larukucafe

Podcast: Télécharger (56.2MB)

Articles relatifs

Ce contenu a été publié le Design, Tutoriels WordPress par Aurélien Denis, et marqué avec . Mettez-le en favori avec son permalien.

A propos Aurélien Denis

Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.

88 réflexions au sujet de « Créer des thèmes enfants (child themes) avec WordPress »

  6. Désolé d’apporter un B-mol: si l’on suit vos explications et l’on active le thème enfant, tous les menus personnalisés (faits avec le theme parent d’origine twentyten) disparaissent!!

    Ensuite, ce thème enfant, si je vous ai bien compris, ne sert qu’à changer des styles de présentation. Or il me semble bien que dans la présentation US de WP 3.0, il est aussi question et surtout de pouvoir personnaliser des fichiers tels que single.php, page.php, et surtout functions.php – qui se substituent donc aux fichiers de thème parent. Vous n’en faites pas état. Est-ce moi qui ait mal compris?

    Enfin vous omettez de dire que sous une configuration WP 3.0 multi-site, vous devez d’abord activer le thème enfant dans la section « super admin ».

    Donc « à suivre »….

    Répondre ↓

    • Le fichier functions.php n’est pas remplacé, par contre celui du thème enfant est chargé en premier.

      Si tu regardes twentyten, par ex, tu remarqueras « if !function_exists ». Ça te permet de redéfinir les fonctions qui sont dans le thème parent.

      Répondre ↓

  7. Je vous confirme: un fichier du même nom que celui du thème parent et qui se trouve dans le dossier du thème enfant sera pris en priorité et remplacera celui du thème parent. Donc single.php, page.php, footer.php functions.php, même category-xx.php peuvent être personnalisés à volonté sans compromettre une maj. du thème parent. C’est là que réside je pense – plus que le simple changement de style – la beauté de l’architecture WP 3.0 (en fait ça existe depuis 2.7).

    Il reste néanmoins la question des menus?

    Répondre ↓

    • Les menus sont directement liés au thème et donc aux emplacements utilisés dans ce dernier. Il est donc probable en effet que ces derniers disparaissent lors de l’activation du thème enfant.

      En ce qui concerne les fichiers du template – autre la feuille de styles, il me semblait que mon article en parlait suffisamment… :)

      Pour une version multi-site de WordPress, activer le thème est une évidence et ne rentre pas dans le cadre d’un tutoriel sur les child theme mais plutôt sur la gestion d’un site en mode multi-site. ;)

      Répondre ↓

  9. Ping : L’hebdo WordPress : Thème enfant – Automattic – Extensions | WordPress Francophone

  10. le twenty ten n’est pas le théme idéal à partir duquel établir des thèmes enfants. Le code qu’il contient est un peu pariculier. Par exemple, le code de la Loop d’affichage des articles est dans un fichier (loop.php), et non dans index.php (par exemple). en fait, ce nouveau thème défaut est assez mal documenté. Bonne source d’infos sur les thèmes enfants sur http://themeshaper.com/thematic/

    Répondre ↓

    • Personnellement, je trouve le nouveau thème par défaut TwentyTen nettement mieux fichu que son prédécesseur K2.

      Il exploite à fond les nouvelles fonctionnalités de WordPress 3.0. En cela, je le considère comme une bonne base de travail.

      Question documentation, les thèmes WP ont tous la même architecture… le codex est déjà pas mal détaillé à ce sujet, non ?

      Bon certes c’est en anglais…

      Et merci pour le lien ! :cool:

      Répondre ↓

  13. Bonjour,

    Lorsque l’on utilise bloginfo(« template_url »)sur un thème enfant, WP nous retourne le chemin vers le thème parent.
    Il existe un équivalent pour le thème enfant ?

    Merci

    Répondre ↓

  14. Merci beaucoup pour ce tutoriel. Et pour tous les autres ( je ne voulais pas laisser un commentaire sur chaque article … ). Tout est expliqué de manière claire et didactique. Je débute sur WordPress et c’est un vrai régal de bénéficier de votre expertise.

    Répondre ↓

  15. et bien moi ça marche pas.
    ça fait dix fois depuis un bail que j’essaye sans succès.
    le thème enfant est complet mais pas reconnu … dans admin il disent incomplet et je vois pas pourquoi il a tout tout tout

    Répondre ↓

  16. Ping : 8 hacks pour le thème Twenty Eleven de WordPress | WordPress Channel

  17. Ping : Peaxl, premier fournisseur francophone de thèmes premium pour WordPress | WordPress Channel

  19. Bonjour,

    Merci pour votre tutorial. Concernant la rédaction de l’article vous avez fait une faute dans la partie « Méthode de création du child theme » B. style.css sans le « s »

    :)

    Bonne journée.

    Répondre ↓

  20. Bonjour,
    votre tutoriel est très clair, le seul hic c’est que je n’arrive pas à créer de nouveau fichier sur Filezilla
    Créer nouveau dossier se fait avec un clic droit mais pour un nouveau fichier je n’ai pas trouvé.
    Pourriez vous m’aider ?
    Merci

    Répondre ↓

  22. Bonjour,
    J’ai créer le thème enfant pour le thème twenty eleven, lorsque je vais dans l’éditeur de WordPress je n’ai que ces lignes de code (voir ci après)
    du coup je ne sais pas comment faire pour effectuer des transformations. Je voudrais par exemple enlever le formulaire de recherche

    Toutes les lignes de code présentes dans mon éditeur wordpress
    /*
    Theme Name: Nom du thème enfant
    Theme URI: URL du site
    Description: Une description du thème
    Author: Votre nom
    Template: twentyeleven

    */
    @import url(‘../twentyeleven/style.css’);

    Répondre ↓

  23. Salut,

    Merci beaucoup pour le travail que tu fais. Les informations sont claires et précises. Je pense que je ferai appel à toi (dans la mesure du possible) si jamais je rencontre des problèmes. Je débute mais je commence à m’en sortir. Avoir des tutos aussi bien faits, la tâche est vraiment facilitée.

    Bonne continuation

    Répondre ↓

  24. Bonjour,
    Est-ce que cette technique ne concerne que les feuilles de style, ou bien on peut appliquer la même manip sur les autres fichiers php du thème, comme functions.php ou 404.php …?
    Le thème de mon site est anglais à l’origine et je l’ai francisé. Sauf que si j’applique la dernière màj je vais perdre les modifications de functions.php et la traduction des autres pages. Mon idée c’est de dupliquer les fichiers modifiés vers le thème enfant puis d’installer la dernière version du thème.

    Répondre ↓

  27. Bonsoir,
    En créant un thème fils comme indiqué ci-dessus, perd-on la possibilité d’éditer la feuille de style directement dans l’interface admin de WP 3.2.1 ?
    Sans savoir qu’il était possible de faire un thème fils, j’ai fait une feuille de style fille directement dans le thème 2011 en créant un page_seb.php avec get_header(seb); et un header-seb.php qui appelle style_seb.css et cette feuille est éditable dans l’interface d’admin.
    Evidémment je ne peux pas faire joujou avec tous les fichiers php et s’il y a des updates de thèmes, il faut que je copie via une recopie plutôt qu’un supprime/copie

    Répondre ↓

  28. Bonjour Aurélien,

    Je me pose une petite question, j’ai édité un site sous un thème assez classique de WP (qui correspondait d’un point de vue graphique à la demande de l’entité pour qui j’ai réalisé le site).
    Je n’ai pas crée de thème enfant dès le départ et j’ai pas mal modifié le style.css et quelques autres fichiers .php. (et quand je dis pas mal, c’est beaucoup) pour arriver à coller parfaitement à demande qui m’a été faite.
    Peut-on créer un thème enfant sans trop de problème alors que l’on à déjà beaucoup modifié le thème parent ?

    Merci.

    PS: j’aime bien la nelle version du site (un amis a moi a participé à la beta)

    Répondre ↓

    • Tout d’abord, merci d’apprécier cette nouvelle version ! :cool:

      Pour répondre à ta question, je dirais que cela est possible mais ne présente aucun intérêt dans la mesure où un thème enfant est conçu pour pouvoir autoriser les mises à jour du thème principal sans soucis. Tu peux toutefois en créer un pour réaliser des déclinaisons de ton thème principal (schéma de couleurs par exemple).

      Répondre ↓

      • bonjour !
        Merci pour ce tuto très utile.
        J’ai appliqué la méthode aposteriori sur un thème acheté que j’avais beaucoup customisé. J’ai réinstallé le thème initial après avoir déplaçer tous mes fichiers customisés (fichiers css mais aussi plusieurs fichiers php et js) dans un dossier enfant. Quelques conflits à régler, le menu à réactiver… et le tour est joué !
        Seul problème, les modifications faites dans les fichier .js ne sont pas prises en compte dans le fichier enfant et j’ai donc dû les laisser dans le fichier parent.
        Est-ce normal selon vous ? (Je ne suis pas du tout développeur).
        merci d’avance !

        Répondre ↓

  29. Bonjour Aurélien. Après avoir vu le podcast vidéo et lu les commentaires je suis entièrement convaincu de l’utilité d’un thème enfant pour anticiper les mises à jour, mais j’ai déja pas modifié le style.css et le dark.css du thème initial. J’envisage donc de copier dans style.css (enfant) et dark.css (enfant) les propriétés qui ont été modifiées et recharger les fichiers sources originaux du thème parent. Est-ce la bonne méthode pour ne rien perdre. J’en déduis qu’il faudra que je fasse la même chose pour les fichiers php originaux que je modifierai.
    Merci

    Répondre ↓

  30. Je poste à nouveau car je ne peux pas éditer mon précédent message. Avant d’attaquer le style.css, j’ai fait quelques essais avec le dark.css. J’ai reinstallé le fichier d’origine en ayant pris soin de copier les modifications que je voulais pour mon site. J’ai donc créé un dark.css dans mon thème enfant avec juste les propriétés:valeurs que j’ai modifiées pour mon site. Rien à faire. C’est toujours le fichier original qui est pris en compte. J’ai tout fait avec le fichier : j’ai essayé avec et sans un @import url(« ../twentyeleven/colors/dark.css ») dans le fichier enfant, j’ai essayé aussi de recréer l’arborescence initiale ans le theme enfant et toujours rien. Merci de votre aide

    Répondre ↓

  31. Merci :)
    du coup j’en profites pour te conseiller l’installation de GROWL qui te notifiera si ton upload ftp à marcher ou non (histoire de plus avoir besoin de regarder que la taille à bien changée ;) ).

    Répondre ↓

  32. Bonjour,

    J’ai bien aimé ton tuto je l’ai réussi et même créer un nouveau design dans le formulaire de connexion. Toutefois j’ai une question sur la création d’un fichier header.php, je m’explique. Mon thème ne possédait pas de logo j’ai copier collé le fichier header.php du dossier parent dans le dossier enfant. Mais on peut dire que qu’il fait doublon et j’ai modifié le fichier header.php enfant.
    J’ai remplacé ceci :

    <a href="/ » title= »">

    Par ceci:

    <a href="/ »><img src="/wp-content/themes/jocasta-enfant/images/logo.png » width= »322px » height= »51px » alt= »" />

    Enesperant que mon code soit prit en charge dans le formulaire commentaire.

    Dois je supprimer du contenu dans mon header.php enfant je tiens à vous signaler que je n’ai rien ajouté en css.

    Merci de votre aide.

    Répondre ↓

      • Merci pour avoir répondu rapidement.

        Mais je ne vois pas comment l’insérer dans ce lien.

        <a href="/ »><img src="/wp-content/themes/jocasta-enfant/images/logo.png » width= »322px » height= »51px » alt= »" />

        Merci

        Répondre ↓

        • Bien après mettre creusé la tête le peut qui me reste en connaissance en php est remonté en surface. pour ceux qui cherche voici un bout de code.

          <a href="/ »>

          A la place des 3? mettre la balise PHP ouvrante et la seconde fermante en espérant que le reste passe bien.

          Par contre on ne m’a pas répondu pour le header.php enfant si je peux supprimer ou pas tout ce que je n’ai pas modifier.

          Répondre ↓

          • Dès que tu modifies un fichier du thème parent, fais-en une copie dans le thème enfant.

            Maintenant, si tes modifications sont mineures, tu peux aussi envisager de créer un fichier texte contenant les lignes modifiées avant / après.

            Sinon, la technique évoquée par Nicolas fonctionnera aussi. Un exemple avec un lien à reprendre pour ton cas : http://tinyurl.com/75at98x

  33. Bonjour,

    C’est bon comme je l’ai dit plus haut j’ai trouvé est l’ai rentré dans mon thème enfant ce qui est plus pratique qu’un fichier texte, car si il y a mise à jour il faut tout refaire. Le thème enfant c’est ce qui permet d’éviter tout ça.

    Bruno

    Répondre ↓

  34. Bonjour Aurélien,
    Je viens de créer mon thème enfant mais alors qu’il n’y a aucun style de présent dans le fichier style.css enfant, je constate que tout est cassé (un peu comme si il n’y avait plus de feuille de style).
    Je précise que j’ai fait le test avec Mamp sur le thème Twentyeleven.

    Ci joint le code :
    /*
    Theme Name: Photograpix
    Description: Theme enfant pour Twenty Eleven
    Author: Loic
    Template: twentyeleven
    */

    @import url(« http://localhost:8888/blog/wp-content/themes/themes/twentyeleven/style.css »);

    Répondre ↓

    • Hello,

      J’ai beaucoup travaillé avec Joomla et là j’essaye WordPress. Je comprends très bien l’intérêt de faire un thème enfant mais je rencontre le même problème avec le thème Twenty Eleven. Sans ajouter de css dans style.css, ma mise en page est cassée… Aurélien Denis, tu as sans doute essayé avec le Twenty Eleven ?

      Répondre ↓

        • Merci pour ta réponse rapide ! J’ai tout repris depuis le début et cela fonctionne bien. Désolé pour le dérangement. Est ce que cette ligne est importante : Theme URI: URL du site ? Sinon, j’ai une autre question : Dans le menu (le menu avec la barre noire), j’arrivais bien à mettre des liens vers des pages (non catégorisées) mais je n’arrivais pas à mettre des liens vers des catégories. Maintenant que j’ai crée un thème enfant, cela fonctionne bien. Il ya un rapport à ton avis ?

          Répondre ↓

          • Non la ligne Theme URI est facultative. Pour le menu, c’est géré sous Apparence > Menus. Si tu n’as pas créé d’autres fichiers que styles.css dans ton thème enfant, aucune raison non. ;)

  35. bonjour,
    Je suis entrain de faire un test sur wordpress pour comprendre son fonctionnent. J’avais commencé le blog sans thème enfant. J’avais modifié le header que j’ai donc ajouté à mon theme enfant. Tout apparait bien, mais je rencontre la difficulté suivante : quand je tente d’ajouter un nouvel article, j’obtiens une erreur 500 et dans la barre d’adresse l’adresse se finit de la manière suivante: /wp-admin/post-new.php. Pouvez vous m’indiquer

    Répondre ↓

  36. Juste une erreur 500 sur le navigateur,
    sur l’interface admin je vois ceci :
    Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 23040 bytes) in /mnt/154/sdc/b/d/cathyboulot/test ad/www/wordpress3/wp-admin/includes/class-wp-comments-list-table.php on line 454

    Répondre ↓

  37. Oui je comprend, mais comme je travail de chez d’un et d’un autre poste à l’exterieur qui ne m’appartient pas c’était à priori la méthode qui m’est venue naturellement à l’esprit pour transporter le brouillon avec moi ( ah comme c’est dur de débuter) ….mais effectivement un disque dur portable serait certainement plus approprié lol ;) En tout cas c’est le .htaccess qui posait soucis. A présent tout fonctionne à nouveau // je vais retenter ma chance avec un theme enfant demain/ merci pour l’aide

    Répondre ↓

  38. salut aurélien,
    merci pour ton tuto.. mais j’ai un problème, j’ai testé des 10zaines de fois en local avec easyphp la création d’un childtheme, tout est ok.. mais quand j’essaie sur mon serveur (ovh) rien n’apparait en admin.
    J’ai respecté scrupuleusement le truc.. j’ai vérifie les chmod via filezilla, j’ai même essayé avec un chemin absolue : pour le @import
    mais rien de noouveau en admin j’ai beau vider les caches..!.. as-tu déjà rencontré ce problème ? Pourtant j’ai installé un autre theme (Graphene http://wordpress.org/extend/themes/graphene) mais via un zip, tout était ok..

    Répondre ↓

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Pour insérer du code, utilisez un service en ligne comme Pastebin ou prenez-soin de convertir celui-ci en HTML.

Les champs obligatoires sont indiqués avec *.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>