{"id":10259,"date":"2014-03-11T21:57:43","date_gmt":"2014-03-11T20:57:43","guid":{"rendered":"http:\/\/flaven.fr\/?p=10259"},"modified":"2026-09-16T10:07:54","modified_gmt":"2026-09-16T08:07:54","slug":"twig-wordpress-timber-timber-une-maniere-astucieuse-dutiliser-twig-dans-wordpress","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2014\/03\/twig-wordpress-timber-timber-une-maniere-astucieuse-dutiliser-twig-dans-wordpress\/","title":{"rendered":"Twig, WordPress, Timber &#8211; Timber, une mani\u00e8re astucieuse d&#8217;utiliser Twig dans WordPress"},"content":{"rendered":"\n<p>  <!--  Twig, WordPress, Timber - Timber, une mani\u00e8re astucieuse d'utiliser Twig dans WordPress --><br \/>\n  \t<!--  Twig, WordPress, Timber, symfony, Template, Theme, Plugin, Php, Webdesign --><\/p>\n<p>Voil\u00e0 une d\u00e9marche qui t\u00e2che de r\u00e9concilier deux approches diam\u00e9tralement oppos\u00e9es : \u00e0 savoir l&#8217;approche MVC propre \u00e0 Twig et le CMS WordPress. En substance, cela se pr\u00e9sente sous la forme d&#8217;un plugin nomm\u00e9 Timber et d\u00e9velopp\u00e9 par Jared Novack. L&#8217;objectif affich\u00e9 du plugin est d&#8217;avoir \u00e0 disposition au sein de WP, le c\u00e9l\u00e8bre moteur de template Twig, bien connu des adeptes de Symfony.<!--more--> <\/p>\n<p>Les tutoriaux vid\u00e9os sont limpides, cela pr\u00e9sente progressivement toutes les potentialit\u00e9 de Twig, une fois le plugin install\u00e9, de l&#8217;utilisation des &#8220;Advanced Custom Fields&#8221; aux fameux &#8220;Custom Post Type&#8221;.<\/p>\n<p><b>Pour mener ce test \u00e0 bien, l&#8217;installation \u00e0 \u00e9t\u00e9 faite sur le WP version Version 3.8.1 en anglais ainsi que deux plugins additionnelles<\/b><\/p>\n<p><strong>Plugins utilis\u00e9s sur le WP version Version 3.8.1 en anglais<\/strong><\/p>\n<ul>\n<li>Catch IDs 1.1<\/li>\n<li>Advanced Custom Fields 4.3.4<\/li>\n<\/ul>\n<p><b>La promesse de Timber<\/b><\/p>\n<blockquote><p>\nHelps you create themes faster with sustainable code. With Timber, you write HTML using Mustache-like Templates\n<\/p><\/blockquote>\n<h4>Pour en finir avec les boucles (loop)<\/h4>\n<p>Une des promesses \u00e9videntes, c&#8217;est de simplifier \u00e0 l&#8217;extr\u00eame le code afin d&#8217;avoir une parfaite dichotomie entre le code et l&#8217;affichage, les IHM en gros les vues. <\/p>\n<p>    Nous allons modifier un des th\u00e8mes livr\u00e9s par d\u00e9faut avec WP, l&#8217;inusable <code>twentytwelve<\/code> dont nous allons modifier le code.<br \/>\n    Une fois install\u00e9 le plugin, la premi\u00e8re chose \u00e0 faire est de cr\u00e9er un r\u00e9pertoire <code>views<\/code> dans le r\u00e9pertoire du th\u00e8me en l&#8217;occurrence :  <code>\/wp-content\/themes\/twentytwelve\/<\/code>.<\/p>\n<p>    <b>Ce plugin pr\u00e9sente des avantages p\u00e9dagogiques en effet, il est une bonne introduction \u00e0 Twig ou m\u00eame \u00e0 Mustache pour ceux d&#8217;entre vous qui connaissent WP mais manque de pratique dans la maitrise des moteurs de templates.<\/b><\/p>\n<p>Les premi\u00e8res vid\u00e9os vous montrent de mani\u00e8re tr\u00e8s didactique comment se d\u00e9brouiller avec Twig dans WP.<\/p>\n<p><b>Modification apport\u00e9 \u00e0 <code>index.php<\/code><\/b><\/p>\n<pre lang=\"php\">\r\n    \r\n          \/* Insert tpl_timber_welcome.twig*\/\r\n          $content_twig = array();\r\n          \/\/ $content_twig ['manchette'] = 'C\\'est le chapeau d\\'introcution \u00e0 mon blog en fran\u00e7ais';\r\n          \/\/ insert the id of the page in the get_post function\r\n          $content_twig ['manchette'] = Timber::get_post();\r\n          \/\/ Timber::render('tpl_timber_welcome.twig');\r\n          Timber::render('tpl_timber_welcome.twig', $content_twig);\r\n\r\n    <\/pre>\n<p>    <b>Le fichier <code>tpl_timber_welcome.twig<\/code> qui est appel\u00e9 dans <code>index.php<\/code> pour afficher notre <code>Advanced Custom Fields<\/code><\/b><\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n      &lt;!-- tpl_timber_welcome.twig --&gt;\r\n      &lt;header class=\"entry-header\"&gt;\r\n        &lt;h1 class=\"entry-title\"&gt;Message written in tpl_timber_welcome.twig&lt;\/h1&gt;&lt;br&gt;\r\n        &lt;b&gt;{{manchette.post_title}}&lt;\/b&gt; &lt;em&gt;{{manchette.post_date}}&lt;\/em&gt;\r\n        &lt;blockquote&gt;\r\n            {{manchette.post_content}}\r\n        &lt;\/blockquote&gt;\r\n        &lt;br\/&gt;\r\n        &lt;p&gt;\r\n        Suivez-moi sur Twitter  &lt;a href=\"https:\/\/twitter.com\/{{manchette.mon_compte_twitter}}\" target-\"_blank\"&gt;({{manchette.mon_compte_twitter}})&lt;\/a&gt;\r\n        &lt;\/p&gt;\r\n      &lt;\/header&gt;\r\n      <\/pre>\n<p>      <b>La commande pour afficher dans une vue notre custom post type cr\u00e9e avec le plugin <code>Advanced Custom Fields 4.3.4<\/code> dans un groupe nomm\u00e9 Manchette Message Groupe<\/b><br \/>\n      <code>{{manchette.print_r}}<\/code><\/p>\n<h4>G\u00e9rer les post_type avec Twig dans WP<\/h4>\n<p>    On va profiter d&#8217;un avantage indeniable de WP \u00e0 savoir les post_type pour se faire, on \u00e0 utiliser un plugin maison pour g\u00e9rer des citations nomm\u00e9 <code>bf_quotes_manager<\/code>.<\/p>\n<p><b>Les 5 citations que nous allons utiliser.<\/b><\/p>\n<ol>\n<li>\u00ab La politique est une guerre sans effusion de sang et la guerre une politique sanglante.  \u00bb de Mao Ts\u00e9-Toung<\/li>\n<li>\u00ab La bont\u00e9 est un amour gratuit.  \u00bb de Henri Lacordaire<\/li>\n<li>\u00ab L&#8217;homme commence par \u00eatre un tube digestif, ensuite un sexe, parfois un cerveau.  \u00bb de Jos\u00e9 Artur<\/li>\n<li>\u00ab Si par nature, l&#8217;homme est une b\u00eate de sexe, j&#8217;ai toujours eu des animaux de compagnie.  \u00bb de Mae West<\/li>\n<li>\u00ab Tous les gens sont pareils : crevant de peur \u00e0 la pens\u00e9e de la mort et obs\u00e9d\u00e9s par le sexe.  \u00bb de Claude Mauriac<\/li>\n<\/ol>\n<p>  <b>Les citations saisies dans l&#8217;interface du plugin<\/b><br \/>\n  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/03\/timber_for_wp_post_type_1.jpg\" width=\"500\" height=\"313\" alt=\"Twig, WordPress, Timber - Timber, une mani\u00e8re astucieuse d'utiliser Twig dans WordPress\"><\/p>\n<p>  <b>Le rendu dans la vue <code>archive-bf_quotes_manager.php<\/code> \u00e0 l&#8217;aide de <code>timber-archives-quotes.twig<\/code>et de <code>tpl_timber-bf_quotes_manager.twig<\/code><\/b><br \/>\n  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/03\/timber_for_wp_post_type_front_2.jpg\" width=\"500\" height=\"313\" alt=\"Twig, WordPress, Timber - Timber, une mani\u00e8re astucieuse d'utiliser Twig dans WordPress\"><\/p>\n<p><b>L&#8217;interface de debug offerte par Debug Bar combin\u00e9 \u00e0 la Timber Debug Bar, deux plugins indispensables et compl\u00e9mentaires<\/b><br \/>\n  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/03\/timber_for_wp_post_type_debug_3.jpg\" width=\"500\" height=\"313\" alt=\"Twig, WordPress, Timber - Timber, une mani\u00e8re astucieuse d'utiliser Twig dans WordPress\"><\/p>\n<p><b>Une vue de Timber Debug Bar<\/b><br \/>\n  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/03\/timber_for_wp_post_type_debug_4.jpg\" width=\"500\" height=\"313\" alt=\"Twig, WordPress, Timber - Timber, une mani\u00e8re astucieuse d'utiliser Twig dans WordPress\"><\/p>\n<h4>Les extraits du code pour faire touner Twig avec notre post_type de citation <code>bf_quotes_manager<\/code><\/h4>\n<p>   <b>archive-bf_quotes_manager.php<\/b><\/p>\n<pre lang=\"php\">\r\n\r\n           $context = array(); \r\n           $args = array(\r\n                   'post_type' => 'bf_quotes_manager'\r\n               );\r\n           $context['posts'] = Timber::get_posts($args);\r\n           Timber::render('timber-archives-quotes.twig', $context);\r\n   <\/pre>\n<p>  <b>timber-archives-quotes.twig<\/b><\/p>\n<pre lang=\"javascript\">\r\n     <!-- timber-archives-quotes.twig -->\r\n     {% for post in posts %}\r\n         {% include \"tpl_timber-bf_quotes_manager.twig\" %}\r\n     {% endfor %}\r\n   <\/pre>\n<p>   <b>tpl_timber-bf_quotes_manager.twig<\/b><\/p>\n<pre lang=\"javascript\">\r\n   <!-- tpl_timber-bf_quotes_manager.twig -->\r\n   <article id=\"post-{{post.ID}}\" class=\"post-{{post.ID}} page type-page status-publish hentry\">\r\n   \t\t<header class=\"entry-header\">\r\n   \t\t\t\t\t\t\t\t\t\t\t\t<h1 class=\"entry-title\">{{post.title}}<\/h1>\r\n   \t\t<\/header>\r\n   \t\t<div class=\"entry-content\">\r\n\r\n   \t\t\t{{post.get_field('bf_quotes_manager_main_text')}}\r\n   \t\t\t<br>\r\n   \t\t\t<b>{{post.get_field('bf_quotes_manager_main_author')}}<\/b>\r\n\r\n   \t\t<\/div><!-- .entry-content -->\r\n   \t<\/article>\r\n  <\/pre>\n<p>Pour m\u00e9moire, pour avoir des temlplates qui rapatrient vos <code>post_type<\/code>, il suffit de cr\u00e9er deux nouveaux fichiers dans notre th\u00e8me nomm\u00e9s de la mani\u00e8re suivante : <code>single-{post_type}.php<\/code> qui va prendre soin du chargement du post-type \u00e0 l&#8217;unit\u00e9 et <code>archive-{post_type}.php<\/code> qui va prendre soin des archives, en gros de toutes les publication.<\/p>\n<p>  <b>Conclusion : On peut consid\u00e9rer que Timber\/Twig offre des avantages ind\u00e9niables pour une personne ayant des notions plus abouties de programmation. C&#8217;est pour ceux qui ignorent encore <code>Twig<\/code>, c&#8217;est l&#8217;occasion de se familiariser \u00e0 Twig utilis\u00e9 notamment dans la framework symfony. En clair, il peut y avoir de gros avantage \u00e0 combiner un d\u00e9veloppement WP classique et les avantages offerts par le moteur de template Twig.<\/b><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Le site officiel -> Timber: WordPress + Twig<br \/><a href=\"http:\/\/jarednova.github.io\/timber\/\" target=\"_blank\">http:\/\/jarednova.github.io\/timber\/<\/a><\/li>\n<li>Timber docs \u00b7 jarednova\/timber Wiki \u00b7 GitHub<br \/><a href=\"https:\/\/github.com\/jarednova\/timber\/wiki\/Timber-docs\" target=\"_blank\">https:\/\/github.com\/jarednova\/timber\/wiki\/Timber-docs<\/a><\/li>\n<li>Le compte du cr\u00e9ateur @jaredNova<br \/><a href=\"https:\/\/twitter.com\/jarednova\" target=\"_blank\">https:\/\/twitter.com\/jarednova<\/a><\/li>\n<li>Timber Pt. 5: Templates for Custom Post Types<br \/><a href=\"http:\/\/www.youtube.com\/watch?v=19T0MStDLSQ\" target=\"_blank\">http:\/\/www.youtube.com\/watch?v=19T0MStDLSQ<\/a><\/li>\n<li>Using the Timber Starter Theme<br \/><a href=\"http:\/\/www.youtube.com\/watch?v=fGqbt84SkrQ&#038;list=UUb-xvhzF-67Sc3NsBKh2_0Q&#038;feature=c4-overview\" target=\"_blank\">http:\/\/www.youtube.com\/watch?v=fGqbt84SkrQ&#038;list=UUb-xvhzF-67Sc3NsBKh2_0Q&#038;feature=c4-overview<\/a><\/li>\n<li>ACF (Advanced Custom Fields) Cookbook and Timber<br \/><a href=\"https:\/\/github.com\/jarednova\/timber\/wiki\/ACF-Cookbook\" target=\"_blank\">https:\/\/github.com\/jarednova\/timber\/wiki\/ACF-Cookbook<\/a><\/li>\n<li>Timber<br \/><a href=\"http:\/\/wordpress.org\/plugins\/timber-library\/\" target=\"_blank\">http:\/\/wordpress.org\/plugins\/timber-library\/<\/a><\/li>\n<li>Write WordPress themes with beautiful, simple markup + code<br \/><a href=\"http:\/\/timber.upstatement.com\" target=\"_blank\">http:\/\/timber.upstatement.com<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Voil\u00e0 une d\u00e9marche qui t\u00e2che de r\u00e9concilier deux approches diam\u00e9tralement oppos\u00e9es : \u00e0 savoir l&#8217;approche MVC propre \u00e0 Twig et le CMS WordPress. En substance,&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2014\/03\/twig-wordpress-timber-timber-une-maniere-astucieuse-dutiliser-twig-dans-wordpress\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Twig, WordPress, Timber &#8211; Timber, une mani\u00e8re astucieuse d&#8217;utiliser Twig dans WordPress<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Timber permet d'int\u00e9grer Twig dans WordPress, combinant MVC et CMS. Utilisez des outils comme Advanced Custom Fields et Custom Post Type pour des r\u00e9sultats optimaux.","bf_ai_og_title":"Timber, Twig et WordPress","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3444,3449,3452],"tags":[3515,20,106,182,305,126,2069,1957,2198,2223],"class_list":["post-10259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-databases","category-tutorials-how-to","category-wordpress-cms","tag-claude","tag-php","tag-plugin","tag-symfony","tag-template","tag-theme","tag-timber","tag-twig","tag-webdesign-responsive-agile","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2Ft","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2014\/03\/timber_for_wp_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10259"}],"version-history":[{"count":7,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10259\/revisions"}],"predecessor-version":[{"id":10272,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10259\/revisions\/10272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10265"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}