{"id":767,"date":"2019-11-21T21:22:04","date_gmt":"2019-11-21T14:22:04","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=767"},"modified":"2020-06-14T20:29:57","modified_gmt":"2020-06-14T13:29:57","slug":"what-is-timber-library","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/what-is-timber-library\/","title":{"rendered":"What is Timber Library?"},"content":{"rendered":"\n

Timber is a plugin to separate PHP and HTML code<\/strong>. It makes your code cleaner and more maintainable. A great tool if you want to create a theme from scratch.<\/p>\n\n\n\n

Let’s take a look at Timber in action. Here we have a standard posts loop<\/strong>:<\/p>\n\n\n\n

<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>\n  \n<article>\n  <h2>\n    <a href=\"<?php the_permalink(); ?>\">\n      <?php the_title(); ?>\n    <\/a>\n  <h2>\n  <p>\n    <?php the_excerpt(); ?>\n  <\/p>\n  <time>\n    Written by <?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?>\n  <\/time>\n<\/article>\n\n<?php endwhile; else: ?>\n  <h2> Sorry, no post found <\/h2>\n<?php endif; ?><\/code><\/pre>\n\n\n\n
With Timber, we split that into two: (1) PHP file<\/strong> for data processing and (2) Twig file<\/strong> for HTML templating:<\/p>\n\n\n\n
<?php\n$context = Timber::context();\n$context['posts'] = Timber::get_posts();\n\nTimber::render( 'index.twig', $context );<\/code><\/pre>\n\n\n\n
...\n\n{% for p in posts %}\n<article>\n  <h2>\n    <a href=\"{{ p.link }}\">\n      {{ p.title }}\n    <\/a>\n  <h2>\n  <p>\n    {{ p.post_excerpt }}\n  <\/p>\n  <time>\n    Written by {{ p.author.display_name }} on {{ p.post_date | date }}\n  <\/time>\n<\/article>\n\n{% else %}\n  <h2> Sorry, no post found <\/h2>\n{% endfor %}\n\n...<\/code><\/pre>\n\n\n\n
All values that is passed in when calling Timber::render()<\/code> will be available to use in the Twig file, in the case above: posts<\/code> data.<\/p>\n\n\n\n
Twig Syntax<\/h2>\n\n\n\n
Below is a brief introduction to Twig language. Visit the official docs<\/a> for more info.<\/p>\n\n\n\n
ECHO VARIABLE<\/strong><\/p>\n\n\n\n
{{ var_name }}<\/code><\/pre>\n\n\n\n
COMMENT<\/strong><\/p>\n\n\n\n
{# Use curly brace with hashtag #}<\/code><\/pre>\n\n\n\n
FOR LOOP<\/strong><\/p>\n\n\n\n
{% for p in posts %}\n  ...\n{% endfor %}<\/code><\/pre>\n\n\n\n
CONDITIONAL<\/strong><\/p>\n\n\n\n
{% if var == \"...\" %}\n  ...\n{% elseif var >= 10 %}\n  ...\n{% else %}\n  ...\n{% endif %}<\/code><\/pre>\n\n\n\n
FILTER<\/strong> – Run a function by passing in the variable<\/p>\n\n\n\n
{{ p.post_date | date }}  {# Format the date #}\n\n{{ p.my_custom_field | shortcodes }}  {# Run the shortcode #}\n\n{{ my_array | length }}  {# count the array #}\n\n...<\/code><\/pre>\n\n\n\n
EXTENDS & BLOCK<\/strong> – Extend is to inherit another template while Block is to override certain part.<\/p>\n\n\n\n
<nav class=\"top-nav\"> ... <\/nav>\n\n{% block content %}\n{% endblock %}\n\n<footer class=\"main-footer\"> ... <\/footer><\/code><\/pre>\n\n\n\n
{% extends \"layout.twig\" %}\n\n{# Override the block content in layout.twig #}\n{% block content %}\n\n<article>\n  <h1> {{ post.title }} <\/h1>\n  {{ post.content }}\n<\/article>\n\n{% endblock %}<\/code><\/pre>\n\n\n\n
You will learn a lot more about Timber by taking a look at our basic theme<\/a>. That theme has no styling and lack features. It is only intended for learning purposes.<\/p>\n\n\n\n
If you are looking for fully-featured theme, try the official starter theme<\/a>.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Timber makes developing a custom theme much easier and manageable. It applies the core idea of MVC framework which is to separate logic and interface.<\/p>\n\n\n\n
If you are interested to learn more about Timber, check out  the following:<\/p>\n\n\n\n