Formation « Développer un thème WordPress sur-mesure (Classique) »

Timber pour WordPress : avantages d’une approche MVC

Lecture : 6 minutes • 13

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.

À 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 :

HTML
single.twig

Plutôt que cela :

PHP
single.php

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 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 :

Capture d'écran d'un éditeur de code montrant l'en-tête d'un site sous Twig et son équivalent PHP
D’un côté Twig, et de l’autre en PHP classique

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 :

HTML
base.twig

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.

Documentation de Timber

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…

Conseil

Timber s’intègre parfaitement à WordPress et ses fonctions natives, prend en charge les champs ACF, et ne ralentit pas l’exécution des scripts PHP.

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 :

PHP
page.php

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 :

PHP
page.php

Et le template (la vue) en dernier :

HTML
page.twig

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.

Conseil

Cette séparation des rôles permet un code bien plus propre, et plus facile à maintenir sur le long terme.

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 :

HTML
archive.twig

Plutôt que :

PHP
archive.php

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.

PHP
page.php

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.

HTML
page.twig

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 :

PHP
header.php

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 :

PHP
functions.php

Et du coup, dans votre template, vous pouvez simplement itérer sur menus.main :

HTML

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.

Conseil

Timber permet de simplifier l’écriture de bon nombre de fonctions de WordPress, comme la boucle, les taxonomies ou encore les menus.

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.

Timber

Timber

Helps you create themes faster with sustainable code. With Timber, you write HTML using Twig Templates http://www.upstatement.com/timber/

Par Timber Team & Contributors

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.

Shell

Il suffit ensuite d’ajouter la dépendance dans functions.php :

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

13

Questions, réponses et commentaires

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

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

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

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

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

        1. Maxime BJ

          Le 12 mai 2022

          Oui tout à fait, par contre ce ne sera pas au programme de la formation.

  3. 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 🙂

    1. 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 !

  4. Adam Refined

    Le 1 juillet 2023

    Hello, le lien vers la doc Twig mène vers une ancienne version (Twig2) :).

    1. Maxime BJ

      Le 1 juillet 2023

      Oui il va falloir que je mette à jour la formation là ! Merci

      1. 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 🙂

        1. 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 !

          1. Adam refined

            Le 15 septembre 2023

            Merci, je vais suivre tes conseils U+1F44D…

Laisser un commentaire