DEV Community

Yongyao Yan
Yongyao Yan

Posted on • Originally published at

Set Up Twig for Web Projects in WampServer on Windows

Twig is a popular template engine for PHP programming.
WampServer is a web development environment on Windows, and it allows you to create web applications with Apache, PHP and MySQL. In this post, we will show you how to set up Twig in WampServer on Windows.

1. Install Composer

Go to the website of Composer, the dependency manager for PHP. Download and run the Composer's Windows installer, Composer-Setup.exe. It will install the latest Composer version on your Windows. PHP 5.3.2 is the minimum requirement for Composer to run, while Twig 3.x needs at least PHP 7.2.5. Therefore, we can choose PHP 7.2.10. During the installation, it will ask you the PHP's installation path.
If PHP is under the WampServer folder, you can select its path, for example:

Enter fullscreen mode Exit fullscreen mode

By default, the Composer batch file, composer.bat, is installed in the directory as below under Windows 10:

Enter fullscreen mode Exit fullscreen mode

Once the installation is complete, the above path is added to the system's path so that
we can run Composer in any directory through Windows command line.

2. Create a new web project in WampServer

It is simple to create a new web project in WampServer.
Go to the WampServer's root directory: C:\wamp64\www.
Create a folder for your web project, for example: C:\wamp64\www\twig-test. Done!

3. Install Twig for your web project

To install Twig, we need to open the Command Prompt in Windows and
change the current directory to the new web project's folder: twig-test

cd C:\wamp64\www\twig-test
Enter fullscreen mode Exit fullscreen mode

After that, install Twig via Composer:

composer require "twig/twig:^3.0"
Enter fullscreen mode Exit fullscreen mode

Then, Twig 3.0.5 is installed under the folder twig-test\vendor.

4. Test the Twig template

First, under the web project folder twig-test, create a subfolder themes for template files. In this folder, we create the template file index.twig as below.

<!DOCTYPE html>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing the Twig Template</title>
    <h1>Hello world</h1>
    <p>I love {{ fruit }} !</p>
Enter fullscreen mode Exit fullscreen mode

In the above code, fruit is the variable passed to the template.
The double-curly-brace {{}} is used to print out the value of the variable fruit.

Second, under the folder twig-test, create a PHP file test.php to render the template.

require_once './vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('./themes');

$twig = new \Twig\Environment($loader);

echo $twig->render('index.twig', array("fruit" => "watermelon"));

Enter fullscreen mode Exit fullscreen mode

In the above code, first, Composer's PHP file autoload.php is included to map the Twig's namespaces to real folders. The loader \Twig\Loader\FilesystemLoader is then created to look up templates in the ./themes directory. The \Twig\Environment object, $twig, is initialized with default configurations. The template file index.twig is finally loaded and rendered with an array as the parameter. In the array array("fruit" => "watermelon"), the variable fruit and its value are defined.

To check the result, open an Internet browser and access the PHP file test.php. For example, in the address bar, type http://localhost/twig-test/test.php. You will see that the template file is rendered and the variable's value watermelon is passed to the template.

Thanks for reading!
To find more programming tutorials, please visit:

Latest comments (0)