Twig Templating for Friendly Frontend Devs

Welcome to Twig! If you're a frontend developer and you're using Twig in your project, then this course is for you! We'll talk about how to use Twig from the ground-up, clearly pointing out its syntax and then graduating to some really neat and advanced tricks. Twig is awesome to work with, so don't just use Twig, master it!

We'll learn:

  • The Twig syntaxes: {{ }} and {% %}
  • Functions and filters
  • Debugging with the dump() function
  • Handling arrays and objects
  • Template Inheritance (extends & block)
  • Tests, looping tricks, and shortcut syntaxes
  • Macros (Twig functions)
  • Whitespace control, escaping and more!

Ok, let's go!


Your Guides

Ryan Weaver Leanna Pelham

Questions? Conversation?

  • 2015-09-11 weaverryan

    Hey again!

    I wanted to make things even a little easier, so I've just updated the code download. If you re-download, you won't need to worry about the "Composer" step above. The README.md in the code download also has details on how to get everything up and running. If you have any issues, let me know and we'll make sure we get them ironed out.

    Cheers!

  • 2015-09-11 weaverryan

    Hey Danny!

    I just hit you up by email, but in case anyone else has the same question, make sure you change the URL to execute the index.php file - so in your case, http://localhost:8888/twig/start/index.php. That file then executes templates/homepage.twig (so make sure you rename homepage.php to homepage.twig - we do that in the first chapter).

    Also, to code along locally, you'll need to download Composer (https://getcomposer.org/downlo... into the root of the project (i.e. the "start" directory) and then run "php composer.phar install".

    Cheers!

  • 2015-09-10 Danny Avery

    So, I'm rendering http://localhost:8888/twig/start/templates/homepage.php and nothing seems to be connected. (i.e. Bootstrap, etc) Also, when I go to place this "<h1>{{ pageTitle }}</h1>" in homepage.php, it renders the text as follows "{{ pageTitle }}". I am kind of lost as to where to begin with this project due to a lack of clarity. Can I please get some help? Thanks!

  • 2014-07-18 somecallmetim27

    I really love the videos you guys put out. They're really well organized and I genuinely learn great things easily from your tutorials. :)

  • 2014-06-30 weaverryan

    Hi there!

    Actually, you're doing everything perfectly. I've copied your code into a gist so it's more readable (code isn't so great in the comments): https://gist.github.com/weaver.... And basically, what you're doing is perfect, so it *should* be working just fine.

    Are you getting an error or just no value is printed? Also, try simply putting:

    {{ dump() }}

    temporarily. This will dump all variables you have access to. This will help you make sure that you have access to the variables that you think you have access to.

    Let me know what you find out!

  • 2014-06-30 capSix

    Hello. Thank you for you reply. Correct, my issue is to render the pages. I have created arrays in my app.php file, example:
    echo $twig->render('index.html.twig', array(
    'item'=>array(
    'home'=>array(
    'title' =>'Home',
    'url '=>'/',
    ),
    'about'=>array(
    'title' =>'About us',
    'url' =>'about-us.html',
    ),
    )
    ));

    Main
    thing is i'm not sure how to link then from the html, i have tried
    adding on the {{ item.about.url }} block, but doesnt seem to pick it up.

    I'm sure it's something pretty basic and simple, but have been struggling to make it work.

    As a ref I've followed your video Twig-The Basics...

    Do you think you could help me out with this?

    Thank you very much, really appreciated.

    Thank you!

  • 2014-06-27 weaverryan

    Hey there!

    Thanks about the videos :).

    So when you're using Twig standalone, it's not concerned with how you create links from one page to another. It really can't be - because it doesn't necessarily know that "about.twig" lives at /about and "homepage.twig" lives at "/". So, it's your responsibility to make the links between the pages.

    But, I have a feeling that I'm not actually answering your question :). So let me know if I'm not and pass more information - like what your link code looks like and any errors, etc.

    Cheers!

  • 2014-06-24 capSix

    Hello. I have a silly question. How can I render my twig templates from an array.
    Example, I have rendered the parent & child templates, however if I want to link them form the nav menu, nothing seems to work. I have used the example above as I am using Twig as standalone to my project, not with Symphony.

    Can anyone help please. Much appreciated. Thank you !
    Great job with all the videos, btw.

  • 2014-05-29 SHirshak

    really knpuniversity is great > thanks for the best tutorial...you gies don't know you have cleared all my confusions

  • 2014-04-28 weaverryan

    Hi there!

    Actually, it's not *really* possible. The reason is that, strictly speaking, Twig just returns text. But to redirect, you need to set a 301/302 response with a Location header. That kind of logic is done in whatever layer is actually *calling* Twig.

    The same seems true on your case - when I access a page (and you look up the page in the database, for example), you should determine before calling Twig that this is a page that is just a URL there and redirect in PHP.

    Now, technically you *could* redirect in Twig just by writing some JavaScript and printing out the target URL via Twig inside a JavaScript string. That'd work just fine - it's a bit of a hacky way to do it, but I'm not here to judge ;).

    Good luck!

  • 2014-04-25 MPH

    Is it possible in a twig template to add a redirect from an edit form? I am creating a news page where non-html users can fill out a form, submit and the twig template lays out the page.

    That said, I want to give one option to copy/paste a URL in if they just want the headline to link to a URL instead of a page they are creating. Does this make sense...is this possible?

  • 2013-11-29 weaverryan

    Hi Dennis!

    Can you explain a bit more what you'd like to see and why? Are you referring to the Twig filters - i.e. having a page to see the before and after affects of applying the filters? Or are you maybe talking about the activities? If you have a few minutes, I'd love to chat - you can email me at ryan@knplabs.com.

    Thanks!

  • 2013-11-28 Dennis Gearon

    IT would be nice to see the before and after, textual output, and HTML rendering of same for all the filters

  • 2013-10-10 weaverryan

    Thanks again John - the activity code wasn't updating correctly. It should be better now, but I'm going make some changes yet to be sure.

    Again, thanks for letting us know :)

  • 2013-10-10 John

    Hi Ryan, cheers for the update. I think there is another small issue here: http://knpuniversity.com/scree... I don't think the product object has the "postedAt" variable sent to it.

  • 2013-10-10 weaverryan

    Hi John!

    It looks like your answer was right - the grading was too tight! I've fixed the issue (https://github.com/knpuniversi... and it should look good now. The rendered dump will look a little ugly (since we're showing the HTML source, not the rendered HTML) - we'll add a rendered HTML view soon that'll make it look better :).

    Thanks for reporting the grading bug!

  • 2013-10-10 John

    On http://knpuniversity.com/scree..., I've tried to add the line of code "{{ dump() }}" but it still comes up as wrong. Is there an answer sheet somewhere I can check? As I'm pretty sure my answer is correct.

  • 2013-07-18 enkuso

    Good cast for beginners,

    Now I need more advanced twig tutorial. ;-)

  • 2013-07-16 KnpUniversity

    Thanks for the typo catch! We've updated activity 1 :)

  • 2013-07-16 KnpUniversity

    Nice catch! We've got that updated :)

  • 2013-07-16 Pascal Borreli

    .product-price div does not exist

  • 2013-07-16 Peter Sergeev

    there is no product-price div now

  • 2013-05-21 Pieter Lelaona

    great !!! owesome !!! thanks.. :)