Twig est un système de templating PHP. Il permet de créer des squelettes de page qui seront ensuite transformés en page HTML.
Timber permet d’utiliser Twig avec Wordpress.
Je n’ai jamais apprécié, la façon dont sont créés le thème Wordpress, utiliser PHP comme système de templating est une idée très moyenne par rapport à la lisibilité qu’apport un système de template. Ne seraissent que parce que PHP encourage les développeurs de thème à faire « à leur sauce ».
Un système de template a tendance forcer une méthodologie et donc faciliter le travail entre plusieurs développeurs.
Il ne faudra pas rentrer dans la tête du développeur initial pour modifier le thème. Ou apprendre un des nombreux frameworks de templating Wordpress.
Il y a d’autre défaut au système de base de Wordpress, mais ce n’est pas l’objet de cet article.
Installer Timber et mettre en place les bases :
Copier le dossier wp-content/plugins/timber-library/timber-starter-theme dans le dossier thème de Wordpress.
Renommer le dossier pour qu’il colle avec votre thème et éditer style.css pour adapter les valeurs, cela correspond à notre nouveau thème.
Tout le sale boulot de ce système est fait, la majorité des fichiers templates Wordpress sont déjà remplit avec les codes twig qui vont bien :
On trouve par exemple ce code dans single.php :
$context = Timber::get_context();
$post = Timber::query_post();
$context['post'] = $post;
$context['comment_form'] = TimberHelper::get_comment_form();
if ( post_password_required( $post->ID ) ) {
Timber::render( 'single-password.twig', $context );
} else {
Timber
::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context );}
Il appelle par défaut le fichier single.twig, sauf s’il trouve un fichier spécifique single-ID_or_type.twig.
A partir de là, on travaillera principalement avec le sous-dossier templates qui contient les fichiers .twig.
Template :
Le template principal se nomme base.twig et contient le squelette principal du site. Ce squelette sera alors étendu par les autres squelettes. Par exemple dans page.twig :
{% extends "base.twig" %}
{% block content %}
<div class="content-wrapper"> <article class="post-type-{{post.post_type}}" id="post-{{post.ID}}">
<section class="article-content">
<h1 class="article-h1">{{post.title}}
</h1> <div class="article-body"> {{post.content}}
</section>
</article>
</div><!-- /content-wrapper --> {% endblock %}
On étend base.twig en surchargeant le block content.
La documentation de timber et au besoin, documentation de Twig, contiennent tout ce qu’il faut savoir.
Plus vraiment d’excuse donc pour développer sans moteur de template !