Formation « Développer un thème WordPress sur mesure »

Starter themes, Frameworks WordPress ou fait-maison ?

Lecture : 5 minutes • 10

Dans l’écosystème il existe des thèmes de base ou même des frameworks qui ont pour but de vous aider à accélérer le développement de vos sites. On va en découvrir certains et essayer de répondre à la question qui vous brûle les lèvres : dois-je tout faire à la main ou utiliser l’un de ces frameworks/starter ?

Lorsque l’on conçoit des sites avec WordPress, on fait face à plusieurs solutions :

  • Utiliser un thème premium (vu dans le cours précédent) ;
  • Utiliser un Starter Theme (un thème de départ) ;
  • Utiliser un Framework (un thème de départ avec une structure et des outils particuliers) ;
  • Ou alors, faire le tout sur-mesure.

Les thèmes premium, même s’ils sont très avancés, peuvent vite nous bloquer lorsque l’on a des besoins spécifiques. C’est pour ça que cette formation porte sur la création de thèmes sur mesure, afin d’être 100% indépendant.

Maintenant, il nous reste à savoir si on doit partir d’un Starter Theme, Framework, ou se retrousser les manches et faire tout à la main. Ne risque-t-on alors pas de réinventer la roue ?

Les Starter Themes

Commençons avec les Starter Themes : Ce sont des structures de base vous permettant de démarrer un projet plus rapidement, et qui ne proposent pas encore d’apparence visuelle précise.

Leur but est de mettre en place les éléments communs à tout projet, afin de ne pas réinventer la roue à chaque fois. Il en existe quelques-uns, mais je vais vous présenter les plus connus :

Underscores

Logo Underscores

_s, ou Underscores, est le Starter Theme plus ou moins officiel de WordPress. Il est conçu pour vous permettre de mettre plus rapidement en place un thème WordPress fait maison.

Quand vous l’activez, votre site n’aura pas une belle apparence : Underscores ne met en place que la structure de code et vous laisse la main pour créer le CSS qui vous conviendra le mieux.

Pour faire mon propre Starter Theme, je m’en suis parfois inspiré, mais avec l’objectif de simplifier des choses : beaucoup d’éléments de Underscores sont selon moi inutiles dans les projets habituels.

Beans

Logo Beans

Beans est un autre Starter Theme très connu de la communauté WordPress. Contrairement à Underscores, il propose par défaut un peu de CSS pour la mise en page de vos pages et même quelques templates prédéfinis (Une colonne, Deux colonnes…).

Sage de Roots.io

Logo Sage

Sage fait parti d’une suite d’outils de chez Roots plus adapté aux agences car il intègre un Workflow de développement qui s’intègre bien dans une logique de versionnement et de travail en équipe.

Et d’autres…

Il en existe de nombreux autres mais ils n’apportent pas forcément grand chose de plus que ces 3 là. Histoire de les citer de manière non exhaustive, il y a : Bones, Ultimatum, FoundationPress, JointWP, UnderStrap, Thesis…

Attention

Certains de ces thèmes proposent pleins d’outils comme Bootstrap, du templating, des préprocesseurs CSS… Mais est-ce qu’ils correspondent à vos besoins et process ?

Dans la quête de création de notre propre thème, on va mettre en place tous nos outils préférés, mais en maîtrisant complètement notre process.

Les Frameworks

On distingue de moins en moins les différentes solutions pour créer des thèmes avec WordPress. Du coup ce que j’appelle Framework, d’autres l’appelleront simplement Starter Theme.

De plus, il n’en subsiste plus qu’un aujourd’hui, et c’est Genesis.

Il est payant, mais il vous suffira de débourser 60$ une bonne fois pour toutes pour en bénéficier à vie sur autant de projets que vous le voulez.

Le Framework Genesis
L’apparence par défaut du Framework Genesis

D’ailleurs c’est quoi la différence entre un Starter Theme, et un Framework ? Après tout beaucoup ne font pas (ou plus) la distinction.

Pour moi ce qui distingue Genesis des Starter Themes, c’est qu’il propose une façon de faire différente du theming WordPress classique. Il a donc une méthodologie et des outils bien à lui,

Son objectif est de vous mâcher le travail : Genesis a déjà une apparence de base, et va vous permettre d’ajouter / modifier des éléments grâce à un système de Hooks. C’est en réalité un concept tiré de WordPress mais plutôt prévu à l’origine pour les extensions. On l’abordera en détails plus tard dans cette formation.

Alors, on aime ou on aime pas. Personnellement, je préfère rester sur un système standard. Je laisse la parole à Grégoire, qui est un grand fan et spécialiste de Genesis :

Grégoire Noyelle
Formateur WordPress
Créateur de thèmes

Le conseil de Grégoire Noyelle

Expert WordPress

Genesis est un moteur de thème (framework) qui a été créé en février 2010 par StudioPress. J’ai commencé à l’utiliser en juillet et je n’ai jamais regretté.

Ce projet est toujours très vivace et d’autant plus depuis qu’il a été racheté en juin 2018 par l’hébergeur populaire aux États-Unis : WP Engine qui investit beaucoup d’argent pour dynamiser encore plus la communauté.

Genesis, ne hacke pas le fonctionnement de WordPress; il le contourne pour rendre la construction de thème beaucoup plus rapide, plus pérenne et plus sécurisée. Ce thème utilise l’API jusque là réservée aux extensions pour mettre en place toute sa dynamique interne du thème.

Pourquoi s’embêter avec toutes les structures des différents modèles (template hierarchy en anglais) alors que tout peut être modifié avec les hooks ? La bonne autre nouvelle est que c’est exactement la même logique de construction que toutes les extensions WordPress les plus populaires qui génèrent du contenu.

Je pourrais citer: WooCommerce, BuddyPress, Easy Digital Download, bbPress… Du coup, si vous devez intervenir pour personnaliser ces extensions, vous ne serez pas dépaysé.

Suivez-moi sur Twitter : @gregoirenoyelle • Mon site : Grégoire Noyelle

D’expérience, on a plusieurs écoles : ceux qui sont absolument fan de Genesis et sa logique très particulière, et d’un autre côté les développeurs de métier qui n’ont pas du tout d’affinité avec cette logique et qui n’y sont pas sensibles.

C’est le cas notamment des développeurs dans les agences que j’ai accompagnées qui préfèrent une approche maison, plus classique “PHP”.

Information

Dans la formation, on ne verra pas Genesis plus en détails, mais si le sujet vous intéresse, visitez le site de Grégoire, c’est lui l’expert !

Fait maison ?

Reste maintenant la dernière solution : tout faire à la main ! Ça ne risque pas de prendre du temps ?

Eh bien pas tant que ça, mais on va faire ça de manière intelligente : le but de cette formation c’est de créer notre propre thème de base, que l’on réutilisera pour tous les futurs projets !

Vous pourriez cependant partir sur un starter existant, il n’y a pas de mal à ça, mais il faut bien le maîtriser et comprendre tout ce qu’il propose par défaut.

Conseil

Si vous suivez cette formation avec la formule premium, vous aurez accès à mon starter Theme Capitaine WP que l’on apprendra à maîtriser en détails et que vous pourrez adapter facilement à vos besoins spécifiques.

Le Theming en PHP/HTML, ce n’est pas sexy !

Et vous avez tout à fait raison. Souvent, les développeurs PHP qui ont l’habitude de Drupal ou Symfony me font la remarque suivante : Le theming sous WordPress n’est pas sexy car on n’a pas de langage de template.

Du coup, on est obligé de mettre du PHP et du HTML en même temps ? Heureusement, j’ai une solution pour vous ! Dans cette formation je vais vous présenter Timber, qui vous permettra d’utiliser le langage de templating Twig, bien connu par ceux qui font du Symfony.

Un chapitre est dédié à Timber et à la manière de grandement simplifier le templating dans WordPress.

Est-ce que je peux utiliser un framework CSS comme BootStrap ?

Oui ! Il est très facile de les intégrer. Mais est-ce une bonne idée pour autant ? Pas sûr. Pour avoir interrogé bon nombre d’agences et entreprises, je me suis rendu compte que Bootstrap est une aide au début, mais devient un obstacle à terme.

Pourquoi utilisez-vous Bootstrap ? Pour créer une structure HTML en sections / colonnes / blocs ?

Il vous faudra moins de 30 lignes de CSS pour reproduire ça ! Pour les formules premium, on va étudier ma structure CSS de base que j’utilise pour chaque projet dans cette formation.

Alors, je ne suis pas du genre à réinventer la roue. J’aime gagner du temps et utiliser des frameworks / outils… mais pour le theming WordPress, je fais exception. Mon objectif ici c’est de vous montrer qu’en construisant vous-même votre base, vous serez bien plus agile et efficace qu’avec des frameworks.


Vous pouvez vous baser sur un thème de base existant ou un framework pour accélérer le développement de vos thèmes WordPress, mais il y aura quelques contraintes. Mais je vous suggère de vous laisser le temps de la formation avant de faire votre choix définitif sur le sujet !

Dans le prochain cours on va aborder les logiciels nécessaires pour devenir développeur de thèmes.

10

Questions, réponses et commentaires

  1. Sarah

    Le 30 mars 2019

    Hello !
    Je ne sais pas si l’on peut poster des com en étant pas abo j’essaie au cas où. J’ai suivi WP Chef, mais j’avoie que depuis le début le codage maison me tente grandement. Je vais tenter de créer un thème perso, voir essayer avec un starter +CSS.
    Je me demandais en revanche, si à partir d’un thème minimaliste, qui ne comprendrait que ce que je souhaite, je pourrai ensuite m’amuser à aller plus loin plu rapidement avec un builder. Mais du coup, est ce que ce genre de pratique vient alourdir ce qu’on a créé au départ ?
    Bref… Starter + CSS + Elementor, ça vaut le coup, ou autant continuer en code à la main ? Merci pour ton avis éclairé 🙂

    1. Maxime BJ

      Le 1 avril 2019

      Salut Sarah ! Eh oui tu peux poster des commentaires 😉
      Ton approche est bonne : Je pars de mon thème “vide” pour faire mes thèmes, mais dans ton cas l’approche starter + Builder + CSS sur mesure est en effet la meilleure !
      En fait il y a 2 choix :
      – Partir d’un starter theme comme Underscores et mettre Elementor
      – Partir d’un thème gratuit comme Astra et ajouter Elementor

      La différence c’est que Astra propose quelques options de personnalisation du haut et bas de page, ainsi que des sidebars. Donc ça permet de gagner un peu de temps et ne pas trop avoir à faire de code PHP.
      Mais avec ma formation Capitaine (du moins le début) tu peux facilement partir d’un starter et en arriver au même résultat !

  2. Seb

    Le 8 avril 2021

    Hello Maxime !
    Désolé si je ne poste pas au bon endroit mais étant donné que tu parles de ta formation premium dans cette section, je me permets de rebondir. Comment accède-t-on à cette formation et quelle est la différence avec ce que tu proposes ici ?

    Je suis à la recherche d’une formation sur le développement de thème WordPress (je peux me bloquer 1h ou 2 tous les soirs) et après avoir fait le tour de ce qui existait, c’est ton format qui semble me convenir le mieux. Pour autant je vois qu’il reste encore quelques parties incomplètes, peut-être les abordes-tu “en premium” ?

    Bref, je suis intéressé pour en savoir plus 🙂 !

    1. Maxime BJ

      Le 8 avril 2021

      Salut Seb, La formation complète n’est pas encore disponible et je n’ai pas de date à proposer pour l’instant. J’explique le tout dans cet article sur mon blog : https://capitainewp.io/formation-wordpress-gratuite/.

      1. Seb

        Le 9 avril 2021

        Merci pour ta réponse, je n’avais effectivement pas vu l’article, c’est très clair ;).
        Du coup les parties manquantes peuvent-elles poser problème si je souhaite m’investir sérieusement dans la démarche (visée pro) ? Sachant que je suis prêt à aller gratter de l’info à droite et à gauche bien entendu !

        Merci pour ton travail et pour le partage de connaissances en tout cas, c’est vraiment top !

        1. Maxime BJ

          Le 9 avril 2021

          Là je pense que tu as déjà une bonne base avec ce qui est dispo (dont ACF, le plus important). Tu devrais pouvoir pas mal te débrouiller avec ça, puis avec la doc officielle (fr et en), stack overflow (en) lorsque tu as des questions. Le mieux c’est de commencer par un projet perso pour te faire les dents. Après il existe des formations en ligne, comme celle de chez O’clock me semble la plus pertinente, qui débouche en diplôme en plus.

  3. hugogogo

    Le 14 septembre 2021

    salut maxime, merci beaucoup pour ce cours ! je poste une petite remarque pedagogique, enfin plutot un retour d’impression sur ce chapitre : je suis un peu resté sur ma fin quand tu parles de genesis, parce que je n’ai pas eu assez d’information pour me faire une idee de ce qu’est genesis ? J’ai juste compris que c’était different, que ca peut etre percu comme un hack de wordpress par certaines personnes, mais je ne comprends pas du tout a quoi m’attendre 🙂 je ne sais pas si c’est difficile a expliquer, mais j’ai le sentiment que ce serait bien d’avoir une presentation rapide qui donne quand meme l’impression de comprendre pourquoi c’est different des autres starter themes ?

    En tout cas, jusqu’ici j’adore ton cours, bravo et merci pour ce travail !

    1. Maxime BJ

      Le 17 septembre 2021

      Je ne peux pas présenter toutes les solutions. J’ai du faire un choix : Je présente uniquement les outils les plus adaptés selon ma vision de WordPress et mon expérience. Tu trouveras pas mal de tutoriels autour de Genesis sur internet pour te faire un avis. Mais personnellement je n’aime pas : c’est entièrement basé sur des Hooks, et je ne trouve pas qu’ils soient faits pour ça. Autant dans un plugin, ça fait sens, mais dans le cas d’un thème, je préfère un templating classique, en ajoutant un langage comme Twig (via Timber).

      1. hugogogo

        Le 18 septembre 2021

        merci de ta reponse 🙂

        mais le truc c’est que tu dis “D’ailleurs c’est quoi la différence entre un Starter Theme, et un Framework ?”, et apres avoir lu ton explication je ne saisis toujours pas la difference… je suis allé lire pleins d’articles sur le web et je me rends compte que c’est tres dur de comprendre cette difference avant d’avoir essayé, puisque des tonnes de gens disent qu’ils vont enfin expliquer clairement… et ce n’est pas claire :p

        est-ce qu’on pourrait resumer ainsi ? :

        wordpress permet de faire un site web sans coder, grace a des themes (starters, parents, childs). mais ces themes il faut les coder. Genesis permet de creer des themes, sans coder ? il fait aux themes ce que wordpress fait aux sites ? ou c’est pas ca :p ?

        1. Maxime BJ

          Le 18 septembre 2021

          Il est toujours difficile de répondre à cette question. Par définition un framework est plus lourd dans le sens où il apporte tout un tas d’outils supplémentaires pour t’aider à aller plus loin. Le starter theme se voudra plutôt être plus simple car tu l’utiliseras tel quel, pour l’améliorer avec ton code.
          Genesis a une approche bien à lui, il permet aussi de faire un thème sur mesure, mais d’une façon bien à lui. C’est juste une différence de concept et d’approche en fait.

Laisser un commentaire