Bien souvent, ce qui rebute les développeurs web d’utiliser WordPress, c’est son absence de langage de templating pour coder « proprement ». Mais heureusement, grâce à Timber, on va pouvoir utiliser Twig afin de ne plus mélanger PHP et HTML dans les mêmes fichiers.
Sommaire du cours
À ce niveau de la formation, vous maitrisez suffisamment WordPress pour faire des thèmes de qualité. Mais si vous êtes un développeur PHP qui a déjà développé avec des frameworks comme Symfony ou Laravel, vous avez l’habitude d’utiliser un système de templating comme Twig.
Que sont Twig et Timber ?
Twig est le langage de templating utilisé par le framework PHP Symfony afin de diminuer la verbosité des fonctions PHP dans les templates.
C’est un langage très réputé dans la communauté PHP. Et depuis que Drupal utilise Symfony comme base, le CMS peut en bénéficier. Mais pas WordPress ! Du moins pas nativement.
Et pourtant ce serait bien, car après tout c’est bien plus joli d’avoir ceci :
Plutôt que cela :
Eh bien pour utiliser Twig dans votre thème ou extension WordPress, vous allez pouvoir faire appel à Timber, réalisé par l’agence Upstatement à Boston.
Timber: a faster, easier and more powerful way to build themes. Because WordPress is awesome, but the loop isn’t.
Timber est un projet open source gratuit qui s’intègre à WordPress sous forme de plugin, ou sous forme de dépendance composer. Mais on en reparle juste après.
Je sais ce que certains vont me dire : « c’est tout ? ». Mais non, attendez un peu ! Timber a bien d’autres tours dans son sac. On va voir à quel point Timber et Twig vont nous simplifier le code de nos thèmes.
Le saviez-vous ?
Le site CapitaineWP est justement réalisé avec Timber et Twig !
Pourquoi utiliser Timber avec WordPress ?
Je vois beaucoup d’avantages à utiliser Timber dans la plupart de mes projets WordPress. Je vais me concentrer sur les 3 raisons principales :
- L’écriture Twig est plus légère et plus lisible que le PHP (moins verbeuse) ;
- Le code PHP (algorithme) et le template (HTML) sont séparés ;
- Et l’écriture de certaines fonctions est simplifiée (comme la boucle).
Il y a encore d’autres arguments en sa faveur, comme l’utilisation d’un contexte global à toutes les pages, et l’utilisation de filtres Twig.
Pour une écriture plus légère et parfaitement intégrée à WordPress
Avec Timber, les templates Tags de WordPress ont tous leurs équivalents en Twig, et on retrouve des nommages plus simples pour certaines d’entre-eux, comme bloginfo()
par exemple.
Voici à titre de comparaison l’en-tête d’un thème PHP, et celui d’un thème Twig :
On peut noter la présence de tags comme body_class
ou wp_head
, qui auront le même rôle que les fonctions du même nom : appeler les hooks WordPress.
Pour le nom du site ou l’encodage, exit la fonction bloginfo()
au profit d’une variable globale site
.
D’ailleurs Timber ne fonctionne pas avec un header.php
et un footer.php
. À la place, on a un fichier base.twig
avec des zones qui vont bouger d’un template à un autre :
Et en plus de ça, Timber est complètement compatible avec vos champs ACF, ce qui va encore plus simplifier les choses ! Finis les the_field()
, Timber récupère les données directement pour vous !
En plus, la document de Timber est très complète et permet de bien comprendre les concepts.
La documentation de Twig sera également utile pour bien comprendre les subtilités de ce système de templating.
En ce qui concerne les performances, on me demande souvent si Timber augmente le temps d’exécution PHP. Eh bien non, je n’ai pas constaté de ralentissement. D’ailleurs, si Twig était une usine à gaz, je ne pense pas que tous les développeurs Symfony l’utiliseraient…
Pour séparer le code PHP du template
En plus d’être plus esthétique, c’est également plus sain de séparer le code « métier », du template. C’est la base de l’approche MVC :
- Le Modèle : le système qui va récupérer les données en base ;
- La Vue : ou template, l’affichage dans le HTML ;
- Le Contrôleur : la partie traitement de l’information, le PHP.
Dans WordPress, on n’a pas besoin de modèle puisque c’est la WP Query et le Template Hierarchy qui gèrent tout ça en interne.
On a donc juste besoin de séparer nos algorithmes, de l’affichage dans le template.
Timber va surtout montrer son intérêt lorsque vous aurez besoin d’ajouter du code PHP dans vos pages, par exemple aller chercher une WP Query. Jusqu’ici, on faisait comme ça :
On interrompt donc notre template à plusieurs reprises pour faire du PHP. Alors qu’avec une approche Contrôleur + vue, on a 2 fichiers distincts, le contrôleur qui est appelé en premier :
Et le template (la vue) en dernier :
Cette approche se montre indispensable sur des projets complexes, où vous allez avoir besoin de récupérer des informations et les traiter en amont.
Pour simplifier l’écriture du code
Parfois, le système de template de WordPress nous joue des tours, et au final l’écriture prévue pour être simple, vient plutôt nous compliquer la chose.
Simplifier la boucle
Timber apporte des simplifications dès la boucle WordPress. Lorsqu’il y a plusieurs publications à afficher, on écrit désormais :
Plutôt que :
Et quand il n’y a qu’un élément à afficher (comme c’est le cas pour les pages), on n’a même pas besoin de boucle !
Simplifier la WP Query
Timber simplifie pas mal l’écriture d’une WP Query lorsqu’elle se trouve dans la boucle principale. Rappelez-vous, dans le cours sur la WP Query on avait vu qu’il fallait utiliser wp_reset_postdata()
pour réinitialiser les variables globales de WodPress.
Eh bien on n’a pas ce souci avec Timber ! Les données sont isolées et il n’y a jamais de conflit. Une simple boucle for
permet de faire l’affaire.
Nous n’avons donc plus besoin d’englober toute la page de notre boucle WordPress.
Simplifier l’écriture des menus et taxonomies
Il y a aussi les problèmes avec les menus ou les taxonomies, le fonctionnement de WordPress nous oblige à écrire des fonctions avec des paramètres dans tous les sens :
Alors qu’au final avec Twig c’est bien plus simple. Un contexte global permet de définir les éléments communs à toutes les pages, comme les menus :
Et du coup, dans votre template, vous pouvez simplement itérer sur menus.main
:
En plus, grâce à cette méthode, on a un contrôle total sur le HTML et les classes CSS générées, là où WordPress impose habituellement un markup via ses fonctions.
Comment installer Timber sur WordPress ?
Pour installer Timber, il y a 2 façons de procéder, la première est la plus simple : il vous suffit d’installer l’extension gratuite Timber dans votre site, et vous pourrez utiliser les templates Twig tout de suite après.
Mais en tant que développeur de thèmes, il y a tout de même plus propre : installer Timber en tant que dépendance Composer, directement dans le dossier de votre thème, via 2 lignes de commandes.
Il suffit ensuite d’ajouter la dépendance dans functions.php
:
De cette manière, Timber est une dépendance PHP, versionnée sur Git avec votre thème, et ce sera bien plus propre, notamment pour travailler en équipe.
On va voir l’installation plus en détails dans le prochain cours.
Bref, si vous êtes un développeur aguérri, Timber est une nécessité dans vos projets WordPress, afin de bien séparer le code métier du template, et simplifier l’écriture du code.
En tous cas j’espère que mes arguments vous auront convaincu.
Si tel est le cas, on va voir dans les prochains cours comment mettre en place Timber dans votre thème, et en tirer pleinement parti. Je vous donnerai également mon thème de base avec Timber, prêt à l’emploi. Mais cette partie est réservée aux détenteurs de la formation premium.
Azixy
Le 2 septembre 2021
Du coup y a t-il une solution pour intégrer Blade de Laravel ?
Je trouve qu’il est beaucoup mieux par rapport à Twig .
Merci
Maxime BJ
Le 2 septembre 2021
Tu peux utiliser le thème Sage de Roots, qui le propose par défaut (les créateurs de Bedrock). Leurs outils sont au top.
Patrick
Le 10 mai 2022
Bonjour,
J’aimerais savoir comment déployer son site wordpress fait avec Timber sur un hébergement classique comme chez OVH par exemple.
Merci par avance
Maxime BJ
Le 10 mai 2022
Timber est juste une librairie PHP, donc ça ne change pas la façon de mettre en ligne le site. Mais n’ayant pas accès à de la ligne de commande en ligne, il faudra faire le composer install en local et envoyer le dossier /vendor/ en ligne.
Patrick
Le 11 mai 2022
Merci pour la réponse,
J’avais une autre question également.
Je voudrais développer un site avec Local by
Flywheel en intégrant Bedrock et en utilisant la lib Timber. Dans ce cas le déploiement se passe comment ? J’ai vu qu’on pouvez utiliser Trellis ?
Merci par avance
Maxime BJ
Le 12 mai 2022
Oui tout à fait, par contre ce ne sera pas au programme de la formation.
Adam Refined
Le 30 juin 2023
Hello, halala, ayant l’habitude d’utiliser Symfony (Twig aussi donc), les prochains cours sont peut-être ceux que je regrette le plus parmi ceux qui sont « cours de préparation »…
Mais, comme je l’avais fait pour l’ajout de widget Elementor, une fois que tu as une intro assez solide, tu as plus confiance pour aller chercher des tutos sur Google 🙂
Sinon, j’ai terminé tout le cours sur WordPress et celui sur ACF… Il ne me reste que les blocs Gutenberg…
Un énooooooorme merci 🙂
Maxime BJ
Le 1 juillet 2023
De rien 🙂
En effet, avec la doc de twig et de Timber, même si je n’ai pas de cours, tu vas pouvoir trouver toute l’aide nécessaire normalement ! J’aimerais vraiment trouver le temps d’écrire tous les cours manquants !
Adam Refined
Le 1 juillet 2023
Hello, le lien vers la doc Twig mène vers une ancienne version (Twig2) :).
Maxime BJ
Le 1 juillet 2023
Oui il va falloir que je mette à jour la formation là ! Merci
Adam refined
Le 15 septembre 2023
J’aimerais te poser une question. Toi qui a de l’expérience dans le développement WordPress, tu conseilles d’utiliser les espaces de nom ou de faire « comme tout le monde » avec les préfixes ? Quelle est la pratique conseillée ? Merci 🙂
Maxime BJ
Le 15 septembre 2023
J’utilise même la POO, chaque fichier est une classe avec une première méthode register_hooks(), appelée lorsque j’instancie la classe. Mais l’utilisation des Namespace est largement suffisante et je la préfère de loin à celle des préfixes de fonctions. Autant utiliser les fondamentaux du langage PHP !
Adam refined
Le 15 septembre 2023
Merci, je vais suivre tes conseils U+1F44D…