{"id":237284,"date":"2016-01-27T16:12:21","date_gmt":"2016-01-27T23:12:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=237284"},"modified":"2017-04-10T18:30:16","modified_gmt":"2017-04-11T01:30:16","slug":"templating-languages-and-wordpress","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/templating-languages-and-wordpress\/","title":{"rendered":"Using Templating Engines to Streamline WordPress Theme Development"},"content":{"rendered":"

The following is a guest post by Charlie Walter<\/a>. Charlie has written for us before<\/a>, when he’s not making me extremely envious<\/a>. Now he’s back to share something completely different. We’re going to learn about methods he’s learned for streamlining WordPress theming using templating engines.<\/em><\/p>\n

Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.<\/p>\n

WordPress is a natural environment for us to see how templating engines work, not only because it’s template-driven, but because of its reliance on PHP. WordPress itself is lauded for its low barrier to entry for content publishers, but the knowledge of PHP that it requires for heavy customizing makes it a somewhat higher bar for developers wanting to get into the game beyond basic theming.<\/p>\n

<\/p>\n

How Templating Engines Work<\/h3>\n

At its most basic, a templating engine is a package that is included in a project that allows us to compile one language into another.<\/p>\n

I liken it to foreign language proficiency. Yes, you took four years of Spanish instruction in high school, and you might be able to read and write it on a decent level, but it’s still very hard to put a complex string of words together. If you had an app on your phone that could take your Spanglish<\/a> and translate it into beautifully composed Spanish, that would be akin to what a templating engine does for PHP.<\/p>\n

Let’s look at the basic example of the WordPress loop in vanilla PHP:<\/p>\n

<?php if ( have_posts() ) : ?>\r\n  <?php while ( have_posts() ) : the_post(); ?>\r\n    <article>\r\n      <h1><a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?><\/a><\/h1>\r\n      <?php the_excerpt(); ?>\r\n    <\/article>\r\n  <?php endwhile; ?>\r\n<?php else : ?>\r\n  <p><?php _e( 'Sorry, no posts matched your criteria.' ) ?><\/p>\r\n<?php endif; ?><\/code><\/pre>\n
…and the same, but in Twig:<\/p>\n
{% for post in posts %}\r\n  <article>\r\n    <h1>{{post.title}}<\/a><\/h1>\r\n    {{ post.excerpt }}\r\n  <\/article>\r\n{% else %}\r\n  <p>{{ __('Sorry, no posts matched your criteria.') }}<\/p>\r\n{% endfor %}<\/code><\/pre>\n
If that doesn’t deserve a happy sliding penguin, then I don’t know what does.<\/p>\n
<\/figure>\n
Different Templating Examples for WordPress<\/h3>\n
I am going to run through several templating engines that can be used to make WordPress theme development that much more fun to write. In each case, we’ll give an overview of the templating engine itself, an example of how it can be used with the WordPress loop, then resources for plugging them into WordPress.<\/p>\n