Timber Creating Beautiful WordPress Themes with Elegant OOP Code with Twig Template Engine

Timber allows you to create completely customizable WordPress themes faster and with more sustainable code. Timber allows you to write your HTML using the Twig Template Engine separately from your PHP scripts.

single.php
$context = Timber::context();
$context['foo'] = 'Bar!';
$context['post'] = Timber::get_post();
Timber::render('single.twig', $context);

single.twig
{% extends "base.twig" %}
{% block content %}
	<h1 class="big-title">{{ foo }}</h1>
	<h2>{{ post.title }}</h2>
	<img src="{{ post.thumbnail.src }}" />
	<div class="body"> {{ post.content }} </div>
{% endblock %}

What is Twig?

Twig is a PHP template engine. Its syntax is derived from Jinja and Django templates. Fabien Potencier maintains this open-source product, which is released under the BSD License. Armin Ronacher designed the initial version. Since version 2, the Symfony PHP framework has included bundled support for Twig as the default template engine.

  • Twig is a modernization template engine in PHP.
  • Fast: Twig compiles templates into plain, efficient PHP code. The overhead relative to conventional PHP code was kept to an absolute minimum.
  • Secure: Twig provides a sandbox mode that evaluates untrusted template code. This enables Twig to be used as a template language in applications where users can change the template design.
  • Flexible: Twig relies on a flexible lexer and parser. This allows the developer to build custom tags and filters, as well as create its own DSL.

PHP Vs Twig template Engine

PHP 	
1:
<?php echo $var ?>
<?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>"

2:
<?php
$users = array(/* Your array of user data */);

if (!empty($users)) {
    foreach ($users as $user) {
        echo ""* "" . $user['name'] . ""\n"";
    }
} else {
    echo ""No users have been found."";
}
?>"	
	
	
3.
<?php
// Include the layout template
require_once ""layout.php"";
?>

<?php // Start content block ?>
<?php ob_start(); ?>
    Content of the page...
<?php $content = ob_get_clean(); ?>
<?php // End content block ?>

<?php // Include the content block inside the layout ?>
<?php include ""layout.html.php""; ?>"	
Twig Template	

1: 
"{{ var }}
{{ var|escape }}
{{ var|e }}         {# shortcut to escape a variable #}"	


2: 
"{% for user in users %}
    * {{ user.name }}
{% else %}
    No users have been found.
{% endfor %}"	

3: 
"{% extends ""layout.html"" %}

{% block content %}
    Content of the page...
{% endblock %}"	

Installation Twig

Install Composer and run the following command to get the latest version:
composer require "twig/twig:^3.0"

 Creating Beautiful WordPress Themes with Elegant OOP Code with Twig Template Engine
https://twig.symfony.com/

What is Timber (Timber WordPress Themes)?

Timber allows you to create completely customizable WordPress themes faster and with more sustainable code. Timber allows you to write your HTML using the Twig Template Engine separately from your PHP scripts.

This cleans up your theme code, allowing your PHP file to focus on data/logic while your Twig file focuses entirely on HTML and display.

file extension is .twig

{% extends "base.twig" %}

{% block content %}
  <h1 class="big-title">{{ foo }}</h1>
  <h2 class="post-title">{{ post.title }}</h2>

  <img src="{{ post.thumbnail.src }}" />

  <div class="body">
	{{ post.content }}
  </div>
{% endblock %}

Installation of Timber (Timber WordPress Themes)

Timber lets you manage your theme using PHP and Twig (HTML) files. This separates logic (receiving content from WordPress) from presentation (adding tags, classes, and so forth). Object-oriented posts, terms, users, and more make it easy to interact with WordPress objects, just like Rails, Django, Laravel, and other platforms.

Install timber in an existing project.

To install Timber, run the following command:
Composer requires timber/timber.

Now, in which folder do you execute the command?

You may decide where to include Timber(Timber WordPress Theme) in your project. Some developers prefer to install Timber as a theme requirement, therefore they run this command from the theme root (e.g., /wp-content/themes/my-theme/).

Others want to utilize Timber as a WordPress dependent, therefore run the command above from the WordPress root (e.g., /var/www/). If your theme or project is not already set up to use Composer’s autoload file, add the following line to the top of your functions.php file.

// Load Composer dependencies.
require_once __DIR__ . '/vendor/autoload.php';

// Initialize Timber.
Timber\Timber::init();

Use the starter theme.

If you want to utilize Timber’s Starter Theme, run composer create-project. Run the command below from your WordPress installation’s wp-content/themes folder.

composer create-project upstatement/timber-starter-theme --no-dev

This command will install the Starter Theme, including Timber as a Composer dependency.

Access the Manage Themes page in your WordPress admin (Appearance → Themes). Select the timber-starter-theme theme from the previous step (or whatever name you gave it).

Reference:

  • Installation Guide – https://timber.github.io/docs/v2/installation/installation/
  • Twig The template language used by Timber.
  • Timber Starter Theme The “_s” of Timber to give you an easy start to the most basic theme you can build upon and customize.
Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen + 9 =

Web.com Site Builder Coral Draw - thewpstarter
You May Also Like

How To Add Custom CSS To Contact Form 7 Web Forms?

Contact Form 7 (CF7) is a popular WordPress plugin which enables you…

WordPress Beginner: are WordPress developers in demand?

Table of Contents Hide WordPress’s Market Share: Accessibility and Versatility: High Demand…

What does a WordPress developer need to know?

Table of Contents Hide Developer ResourcesCoding StandardsBlock EditorCommon APIsThemesPluginsREST APIWP-CLIAdvanced AdministrationWordPress PlaygroundHere…

Unleash the Power of White Label WordPress: A Complete Client Success Guide #1

Discover the power of WordPress white labeling! Explore the benefits, step-by-step installation,…