Home

PHP file basics

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.), which become configuration files for corresponding .twig templates.

	$data = Timber::get_context();
	$data['posts'] = Timber::get_posts();
	$data['foo'] = 'bar';
	Timber::render('index.twig', $data);

Twig Basics

This is where the good stuff happens.

Echo/print arbitrary variables

Normal

	<?php echo $foo ?>

Twig

	{{ foo }}

Echo/print properties / methods of a WordPress Post

Normal

	<?php the_title() ?>

Twig

	{{ post.title }}

If statement

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 %}

WordPress loop

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>
	{% endfor %}
	{% if !posts|length %}
		<li>Sorry, no posts matched your criteria</li>
	{% endif% }
</ul>

Including files

{% include 'my-map.twig' %}

If you need to include via a function (like wp_head or wp_footer):

{{function('wp_footer')}}

Documentation

Check out the complete Twig Documentation for more examples.

Contributing

Pull requests are highly appreciated. Feel free to report a bug, typo, enhancement or a feature you want to add to the plugin.