Curious about Twig?

This is a talk about Twig given at WordCamp Ann Arbor 2015.

Transcript

1. Curious about TWIG? Lightning talk Peter Shackelford @pixelplow
2. Twig the flexible, fast, and secure template engine for PHP
3. This is a lightning talk for more check out: Timber: upstatement.com/timber/ github.com/jarednova/timber/wiki and TWIG: twig.sensiolabs.org
4. <?php // the query $the_query = new WP_Query( $args ); ?> <?php if ( $the_query->have_posts() ) : ?> <!-- the loop --> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; ?> <!-- end of the loop --> <?php wp_reset_postdata(); ?> <?php else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?> $args = array( 'numberposts' => 3, 'post_type' => 'post', ); Ye olde standard loop
5. In the next 15 minutes: Syntax Routing/Controller Template inheritance
6. Logic View HTML WP_Query Conditionals Routing .php .twig WP template hierarchy or function.php themename/views
7. Twig defines three types of special syntax: {{ ... }} {% ... %} {# ... #}
8. {{ ... }} "Says something": prints a variable or the result of an expression to the template.
9. <h1 class=“article-h1”>{{ post.title }}</h1> {{ post.content }}
10. {% ... %} "Does something": a tag that controls the logic of the template; it is used to execute statements such as for-loops and if statements.
11. {% if not loop.last %} →Stuff happens here {% endif %} {% for post in posts if post.has_term('dairy') %} <p>This product contains cow water.</p> {% else %} <p>I am dairy free!</p> {% endfor %}
12. {# ... #} "Comment something": it's the equivalent of the PHP /* comment */ syntax The content of the comments isn't included in the rendered pages.
13. Twig also contains 31+ filters, which modify content before being rendered. The following makes the title variable all uppercase before rendering it: {{ title|upper } The slice filter extracts a slice of a sequence, a mapping, or a string. This returns the first four posts: {{ posts|slice(0,3) }}
14. {# Get first two posts in array, print title in title case, if there is a subtitle print the subtitle #} {% for post in posts|slice(0,1) %} <h1>{{ post.title|title }}</h1> {% if post.subtitle %} <small> {{ post.subtitle }} </small> {%endif%} {% endfor %}
15. Controller/Routing: - defines what - how many - where Using WP_Query + Twig
16. Logic View HTML WP_Query Conditionals Routing .php .twig WP template hierarchy or function.php themename/views can be configured
17. index.php // Get standard theme and WP info $context = Timber::get_context(); //Get posts + args $args = array( 'numberposts' => 3, 'post_type' => 'post', ); $context['posts'] =Timber::get_posts($args); //Twig file that will render the data Timber::render('index.twig', $context);
18. <?php // the query $the_query = new WP_Query( $args ); ?> <?php if ( $the_query->have_posts() ) : ?> <!-- the loop --> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <h2><?php the_title(); ?></h2> <?php endwhile; ?> <!-- end of the loop --> <?php wp_reset_postdata(); ?> <?php else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?> IN CONTROLLER: PHP IN TWIG FILE: TWIG $args = array( 'numberposts' => 3, 'post_type' => 'post', ); $context['posts'] = Timber::get_posts($args); {% for post in posts %} <h2>{{ post.title }}</h2> {% endfor %}
19. Template inheritance
20. BASE LAYOUT COMPONENT
21. The extends tag can be used to extend a template from another one. {% extends 'component.twig' %}
22. Blocks are used for inheritance and act as placeholders and replacements at the same time. {% block title %} {% endblock title %}
23. When a template uses inheritance, it's possible to render the contents of the parent block when overriding a block by using the parent function {{ parent() }} Great for prepending or appending to an existing block.
24. component.twig {# A component twig with a thing block and a boondoggle block #} {% block thing %} <p>This is a great big {{ thing }}.</p> {% endblock thing %} {% block boondoggle %} <p>Come get your {{ thing }}.</p> {% endblock boondoggle %}
25. component-copyright.twig {# gets component twig and appends copyright and date after thing block #} {% extends 'component.twig'%} {% block thing %} {{ parent() }} <p>copyright {{ "now"|date("Y") }}</p> {% endblock thing %}
26. base.twig {{ function( 'get_header' ) }} <div class="row"> <div class="small-12 columns" role="main"> {% block content %} {% endblock content%} </div> </div> {{ function( 'get_footer' ) }}
27. main-sidebar.twig {% extends 'base.twig' %} {% block content%} {% embed "article.twig"%} {% endembed "article.twig"%} {% embed "sidebar.twig"%} {% block author%} {% endblock author%} {% endembed "sidebar.twig"%} {% endblock content%}
28. http://twig.sensiolabs.org/ https://wordpress.org/plugins/timber-library/ http://github.com/jarednova/timber/wiki http://wordpress.org/plugins/debug-bar-timber http://www.slideshare.net/javier.eguiluz/twig-tips-and- tricks http://notlaura.com/the-twig-for-timber-cheatsheet http://hugogiraudel.com/2013/11/12/themes-layouts- twig/