-
-
Notifications
You must be signed in to change notification settings - Fork 506
Home
jascha ehrenreich edited this page Feb 28, 2014
·
59 revisions
Before sending WordPress data to the .twig
file (where the fun happens), you must set up the page's data inside of your normal theme files (like index.php
, single.php
, archive.php
, etc.). Instead of holding your HTML, these now become configuration files for corresponding .twig templates.
$data = Timber::get_context();
$data['posts'] = Timber::get_posts();
$data['foo'] = 'bar';
Timber::render('index.twig', $data);
This is where the good stuff happens.
Normal
<?php echo $foo ?>
Twig
{{ foo }}
Normal
<?php the_title() ?>
Twig
{{ post.title }}
Normal
<?php if( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail() ?>
<?php else: ?>
<img src="<?php bloginfo( 'stylesheet_directory' ) ?>/images/thumbnail-default.jpg" />
<?php endif; ?>
Twig
{% if post.thumbnail %}
<img src="{{post.thumbnail.src | default(bloginfo('stylesheet_directory')~'/images/thumbnail-default.jpg')" />
{% endif %}
Normal
<ul>
<?php $query = new WP_Query( array( 'post_type' => 'post' ) ); ?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li><a href="<?php the_permalink() ?>"> <?php the_title() ?> </a></li>
<?php endwhile; ?>
<?php else : ?>
<li><?php _e( 'Sorry, no posts matched your criteria.' ) ?></li>
<?php endif; wp_reset_postdata(); ?>
</ul>
Twig. WordPress specific snippet
<ul>
{% for post in posts %}
<li><a href="{{ post.permalink }}">{{ post.title }}</a></li>
{% else %}
<li>Sorry, no posts matched your criteria</li>
{% endfor %}
</ul>
{% include 'my-map.twig' %}
If you need to include functions like wp_head
or wp_footer
:
{{function('wp_footer')}}
See "Integrate With Wordpress" for more advanced usage.
Check out the complete Twig Documentation for more examples.
Pull requests are highly appreciated. Feel free to report a bug, typo, enhancement or a feature you want to add to the plugin.