TWIG with wordpress part2

Featured Image

Using TWIG plug in we made in part1 of this article

It’s highly advised to read part1 first to understand what’s going on.

When our TWIG engine autoloader is ready, and our plugin is activated from wp-admin side, we can go to wordpress themes folder and make new theme folder. Inside our theme folder, let’s make starter file: ‘index.php’ slightly modified to fit our needs:

<?php
wp-content/themes/Our theme folder/index.php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Our theme
 * @subpackage Our theme
 */
$loader = new Twig_Loader_Filesystem(dirname(__FILE__));
$twig = new Twig_Environment($loader, array(
            'cache' => false
        ));
$template = $twig->loadTemplate('index.html.twig');
$template->display(array('variable1'=>$variable1,'variable2'=>$variable2 ...));

After we made that, we should make starter file for out twig theme: index.html.twig and all the other necessary files for our theme with twig templating possibilities.

But, there is one more problem with wordpress: How can we reach easy way wordpress environment functions defined from our TWIG template?

We should pass that variables somehow to TWIG so they can be used.

After some brainstorming, I made to this solution:
let’s make a some kind of proxy class in our twig engine plugin folder so we could pass instance of that class to our twig engine and make all necessary calls to wordpress functions from inside that class. Is that many work to do? Must we define all the wordpress functions inside our class to reach them?
No. Let’s add this to our custom file that we autoloaded in part1, so our file looks like this:

<?php
<?php
/*
…. /wp-content/plugins/wp_twig_engine/Wp_TwigEngine.php
  Author: Darko Goleš
  Author URI: http://inchoo.net/author/darko.goles/
*/
*
class Wp_TwigEngine_Autoloader {
    static public function register() {
        ini_set('unserialize_callback_func', 'spl_autoload_call');
        spl_autoload_register(array(new self, 'autoload'));
    }
    static public function autoload($class) {
        if (0 !== strpos($class, 'Wp_TwigEngine')) {
            return;
        }
        if (file_exists($file = dirname(__FILE__) . '/../' . str_replace(array('_', "\0"), array('/', ''), $class) . '.php')) {
            echo($file);
            exit;
            require $file;
        }
    }
}
class OurTwigProxy {
    public function __call($function, $arguments) {
        if (!function_exists($function)) {
            trigger_error('call to unexisting function ' . $function, E_USER_ERROR);
            return NULL;
        }
        return call_user_func_array($function, $arguments);
    }
}

You see, I used php __call function to make this class somekind proxy for our wp functions.

Let’s see our index.php inside our theme folder now:

$site = new OurTwigProxy();
$loader = new Twig_Loader_Filesystem(dirname(__FILE__));
$twig = new Twig_Environment($loader, array(
            'cache' => false
        ));
$template = $twig->loadTemplate('index.html.twig');
$template->display(array('site' => $site));

you see, now we made instance of our autoloaded ‘proxy’ class an passed it into template.
From inside template we can now call any WP functions that we need:

#{file: index.html.twig}#
{% if site.is_category %}
...
Hello from here
...
{% endif %}

Those two articles about twig was just idea, and I didn’t finish this project yet. I will try to finish this code and also implement ‘yaml’ config file possibilities to be used for wordpress theming, but that will be content of next part. Thanks for now, and I would like you to leave some comments what you thing about this idea.

Cheers

8
Top

Care to rate this post?

Author

Darko Goles

Ex Inchooer

Darko worked at Inchoo as Backend Developer from March 2011 to January 2014

Other posts from this author

Discussion 8 Comments

Add Comment
  1. Very interesting stuff! I’ll be glad to try it out once finished!

    There’s ought to be more people than you and me who’d love using TWIG with WP!

    Keep it up!

  2. @Mikael, thanks for your comment. I didn’t have time to finish it yet, but when I succeed, it will be published here. :-)

  3. Great articles. I’m suprised that using Twig in wordpress hasn’t attracted more attention (and also this post). I have a Django background and smiled when Sensio Labs introduced Twig. Theming in wordpress is painful with all the html intermingled with php.

    Nice use of __call and call_user_func_array, I’ve used them in exactly the same way before.

    Have you got any further since this post?

  4. Hi,

    thanks for this tutorial! Interesting ideas :-) But I have another problem, maybe you can help me.

    I only want to use the {% render %} command of twig in my WordPress templates. It is even not necessary to use twig. I am looking for a way to get the response of a specific symfony2 controller inside wordpress.

    I have a controller action that renders a twig template which contains a html list filled up with items from doctrine. And my problem is that I don’t know how to use this action inside wordpress.

    Does anybody have an idea?

    Kind regards
    Simon

  5. Great stuff! I was looking to use a templating engine on a WordPress site I’m designing, so this is much appreciated!

  6. Gianluigi

    Hi,
    very interesting! I used Twig outside Symfony time ago… amazing!
    so when I see the Twig integration inside WP I became very happy.
    I’m interesting to new application of Twig inside WP have you make some else?
    for example implementation of yaml config?

    thanks a lot!
    Gianluigi

  7. Unfortunately, I stopped working on this, since I switched to Magento last year exclusively :-)

  8. Hi,

    We develop a plugin for WordPress which uses Twig under the hood. It allows you to create template right in the WordPress admin and inject it anywhere in your site with shortcodes. It is called Inject and you can have a look at it in action right here : http://inject.netcod.es
    You can create basically anything like : posts list, author box, social sharing widget, newsletter opt-in widget, a special button to stick anywhere… or more complex stuff !

    Hope this can help…

    Best regards,

    Quentin

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top
  • Wordpress with E-Commerce?

    Wordpress with E-Commerce?

    It is a neat idea for a small businesses. Especially if you want to test your market. However, if you want to switch to an enterprise solution, Magento is the best choice. Take a look at our services and find out what we can do to help.

    Learn more Get a quote
  • Hire Magento Developers

    Magento Certified Developers

    Teams of certified Magento developers are available to work on your next big thing!

    Hire Magento Developers Get a quote
  • Our Latest Project

    Viv & Lou

    Viv & Lou

    When an ordinary gift just won’t do.

    See our work
  • The Inchooers

    Meet The Inchooers, the funny bunch of magento developers.

    Archive