 So, hello everyone. How are you doing? Good, good to meet you. So, today I'm going to speak about theme development with Timber and Drake. It will be a tech talk, so quite technological. But I'm sure most of you will just get it. So, quick question. Who in here did work with Timber already? Okay, some people? Not too much? Okay. So, the short thing about me, I'm a software engineer and currently doing my bachelor thesis. And I've been working as a full stack developer with WordPress Borough for four years now. And I'm working for a web-killer web agency in Lucerne right now. And in this September I've become a Timber core contributor. So, I know what's going on right now. So, if you have any questions feel free to ask me after my talk. So, what exactly is Tweet? Tweet is a templating language for PHP. So, what is a templating language exactly? In a templating language you just define placeholders which are afterwards built out by data. So, by programming language, so whether it would be PHP or Java or whatever you have, you just have those templates which will be filled out with the data you provide. So, why should you use it? It's less verbose to use than PHP for templating. So, you just don't need to write echo. So, PHP opening echo all the time. So, that's pretty annoying to do, right? So, Tweet solved this by just using, because it's made for templating. So, not unlike PHP which is made for coding in most of the cases. So, it's shorter and better understandable than plain PHP. And what it also does, it separates the code. So, PHP will be separated from HTML and you don't need to have some kind of mixup from the codes there. And in the end, Tweet is like PHP, it just outputs HTML at the very end. And now we need a second thing because Tweet just doesn't work right out of the box with WordPress, right? So, what we have there is Timber. So, Timber is the integration of Tweet and WordPress. So, it provides us with some very cool data structures that you can use. So, most of you will know about the posts that, so posts and pages. And what Timber provides us with are some very cool objects we can work with and also standardize the way we can work with them. And also menus we can work with users very easily. So, I'm going to show you how right now. So, quick thing about why should one use it? So, it's faster, so you can do the templating much faster than you would if you just had PHP. And the unified APIs Timber provides us with that you are going to work much faster with that. And you have template inheritance which PHP normally doesn't provide. I'm going to show you an example of that later. This is a really, really good way to decouple your templating from each other. I'm going to show you how in a minute. You'll have less codification with Timber and Tweak. And front-end developers, they don't need to know how WordPress works. You can just provide them, they just need to know how Tweak works. So, you can just say how it works for them and they can build their front-end apart from the back-end developers who can then build the back-end stuff. So, that's also, for bigger agencies, that's a very big plus to use Timber and Tweak. And you will also have a better separation of concerns. So, Timber is almost like a MVC approach. So, you have your controller which I'll show you afterwards. There, you prepare all the data you need for the view to work. And then you just have the view which renders all the data. So, this separation of concerns. So, now we need to prepare the data, right? So, in WordPress, you have the pages and posts. So, these are the singular views. And this one is the single PHP. So, for Timber to work, you use normal WordPress, the templates of WordPress. So, in my case, it was the single dot PHP. And you write the setup of the Timber in there. So, that's, you can see that right on the right side. So, the first thing we need to do is to get the global context of Timber. You store global data in there which I'm going to show you later, like menus, logos in the header. So, stuff you just need on every side. Then you'll have page-specific code which is at the second line of code there. So, you'll get the currently active post with the second line. And then we'll write it in the context variable. And then we can output the twig file with our data, which in this instance is the context. So, how does this look like, this twig file afterwards? This is one of the twig files. So, we have the template here. So, you did see that we had a post variable that we used. And we can now use it here in twig as well. So, you would just write post.title and this would output the title of the WordPress post. You could just write post.content and it will output the content of the post. So, these are very structured way and it's very easy to learn for front-end developers who are not familiar with WordPress code. And you'll also have other classes like terms, posts, and these are very unified. So, you could just write term.title and it will get the title too. If you have not WordPress objects, this wouldn't work because it would be name. So, the API there is different but this unifies the APIs. So, use cases for these are page rendering as we can see it here. Or you can also do just component rendering. So, if you have a separate component, you can use separate data to render out this component. And maybe you saw that, the extends and the block. And I'm going to talk about this right now because this is one of the coolest approach that Timber provides us with. So, in most cases we'll have some kind of layout around the page that we want to render. So, we'll have a navigation, we'll have a footer, we'll have a lot of stuff going on which is not the page. And we don't want to duplicate all the stuff all the times. So, what we can do is like here we can write a base.week. I just call it like that, you can call it anything you want. And we can define blocks which can be overwritten by the templates. So, here in my instance I have a block content here. And as you saw in the template before right here, this extends the base.week and it has a block content. And what happens now is that this block content gets inserted right here into this main area. So, that's how it works. Layouting is obviously a very good approach or use case for this example. But you can also do stuff, you can just write down cards. So, you have a card with an image and you have another content. So, let's say you have an image in a card and then you have another card which has other content beneath it. You could just write a card.week which has all the basic information like the image. And then you can extend those cards to have another content in there afterwards. So, this is really cool because it avoids duplication and improves consistency of code. So, now we need the global data. So, we just saw how we would render a page. But in WordPress context you need more, right? You need menus, you need further data, you need a lot of stuff which could be outputted into the page afterwards. So, what Timber provides us with is the Timber context filter. And what you can do there is output the data we need globally. So, this data you write in there, this will be available globally because on each page you'll get the context right on the first line. And there you'll have all the global data in it. And you can access that in the template likewise you would do with a variable you set here. So, now how we can use that? So, we just want to render a navigation now. That's our navigation here. So, that's a really cool feature I like about Timber, one of the most liked feature for me because it's just so easy to do. Because I've spent hours working with the Navwalker of WordPress and it's just a pain to use to fit my needs. So, what I can do here is just four items in this menu and I can just write down the markup code I need all by myself. And also recursively. So, as you know in WordPress the menus they can go down like three or four or even more steps. And what this here does is this is the navigation I'll tweak. And I can include that afterwards again and it will do a recursive structure and they'll have a menu which fits my needs. So, use case for these is obviously navigations. And this is a really cool feature you should definitely try out. Images is another stuff which is very important for almost all websites. So, what we have here is I've got an image that would be an attachment in WordPress terminology. And I just output an image. What I can do now is I can just use the resize filter that you see. So, you just write type resize and I can just write down the dimensions that I want of the image. So, in this context it would be 50 times 50 pixels. But you could just use anything you'd like there. And you can also convert images on the fly. So, if you're always in a shape or PNG or whatever you could also use a filter for that. So, this is really a powerful feature we use it a lot. So, we just generate all the necessary sizes we need. And then you can also do responsive images with this feature which is really cool. And then we have macros. This is another concept but not as used commonly. So, you'll have the macro which is basically like a function. It works like a function which outputs HTML code. So, you would have here in this instance it would be an input which gets rendered. So, it's very handy for form elements but also I just wrote a responsive image macro. So, we can just import this and output the responsive images on each side even with different aspect ratios. And it will generate all the sizes for us which we need for this to work. So, this is also a cool feature. And now we go a little bit deeper. For those of you who have already worked with timber. So, what you can do if... So, timber provides a basic timber post implementation. We can extend this if we want to. Like here in this example. So, what I needed was I needed to work with WooCommerce and timber. So, I needed to integrate those two. And this doesn't work right out of the box because WooCommerce it needs a product. Variable that I can work with. So, what you can do is you can extend the timber post with product in this instance. And in my templates I could now just write post. So, that would be my post variable. And I could just access this product variable right in here. So, I could write post.product.getPrice. And I would have the price of the product from WooCommerce. So, this is also a handy feature if you want to implement WooCommerce. So, what you can also do other things like if you wanted an event. You could write an event clause. And you could use some methods to get the end date, to get the start date, to get the date with a dash in between. You could just write methods for all of those use cases. What you need to be wary of is that when you do timber get posts, you need to translate, like to say what class is used for this post. So, you need to write product, double point, double point clause to get it in this format. Otherwise you just end up with a post. So, you need to tell timber how it should get the data. So, if you now got a sense of how it works, how could you use that? So, our preferred method to install it is as a composer package. But you can also do it on two ways if you use composer. You could install it as a plugin by a composer or by a library. So, this is up to you how you want to do it. You can have a look at the start of theme, which is on GitHub, which will be developed further now. We have got some new ideas, what we want to do. And you could also install it as a normal WP plugin. But this will be probably deprecated for Timber 2.0, as we don't want people to break their sites when they just hit the update button from the plugin. So, we'll see how that works out. So, future prospects. Where are we going? So, Timber 1.8 was released two weeks ago, featuring web WP support, I don't know if you know it. That's a new image format, which you can use to get images like 20% smaller than JPEGs. So, have a look at that if you want. And also many bug fixes, which we did. So, those will fix many bugs they have encountered. And now Timber 2.0 is currently under active development on GitHub. So, have a look there. And it will have a better compatibility with third party plugins. So, this is one of our main concerns, that it does not perfectly work with some page builders. And we'll see how we can integrate those better in Timber 2.0. It will have a lot of internal code improvements, restructuring and stuff. And also the developer API will be improved. So, it will be easier to work with and more generalized and more standardized. And it will probably also see the duplication of Timber as a plugin from WordPress.org. Also, Timber start theme will be updated for 2.0. So, have a look there at how we upgraded this. And it will also feature to improve documentation as a whole. So, I'm at the end. I can show you some of the code. I have five minutes left as I saw. So, we can just have a look at the Timber start theme. So, this is it. You can find it on GitHub. Here we have it. And just have a look at it. So, now we have the signal.php file, which I talked about earlier. Can you zoom in a bit? Yeah, I can. So, that's one of the signal.php file that you see here. And now I can also show you the template file, which is here. Single.twiq. And now here you can see a bit more of an extended version of the signal.twiq. So, the single.php calls this file. Exactly. That's what I meant by... You use normal WordPress files, the template files, as you know them, single.php, index.php. And you render the twiq file from there. That's what basically happens. And so, here you see an extended version. And you see also the nice use of the resize filter here. So, this will just resize the image to 1200 to 300. And this will do it automatically. And you also see post.title, that just gets the title, post.author, that will get the author of the post. Post.content, which outputs the posts. And you can also access comments, as you see here. If post.comments, and you can output all the comments, which you have on the post. It's really standardized and very easy to use, even for non-WordPress people. So, you can see that. I guess I'll show you another one. So, we will have... So, here we get the post, the currently active post. We set it to the context, and render a twiq file here, right here. Now I can show you the accompanying twiq file, which is here, page.twiq. And this works exactly the same. So, post.title, post.content. And also the index files works like that. So, what you can do here is just write for posts in posts, and we can just have a loop of all the posts, which are in this index. Pascal, could you maybe explain the syntax with the array? Sorry, which one? That includes that you're using an array. Ah, yeah, that's... It will look for ts.twiq... Sorry, ts-post.twiq. It will look for this if it's there. And if it's not, it will fall back to ts.twiq. That's just what happens there in syntax. And you'll also have the pagination right here at the bottom, which is also very easy to use if you want to. So it respects the... Yeah, it respects the... Yeah, exactly. It's... You used normal WordPress templates, and you only used them to set up all your data, and then you just rendered a twiq file from there. Exactly. But it's the normal WordPress template. And during the twiq file, the goal is faster than rendering a PHP file? No, that's not the case, but you can just... If you want to, you can have the twiq file to compile to PHP. So you can have this if you want to, and then it's as fast as PHP, obviously, because it's just PHP. Yeah, yeah. So, yeah. How is it for building for clients? It's really quicker. Yeah. Yeah, so, most probably, I'm 20 to even more percent faster than using the normal WP, because I can use all... I can access all the HTML I want to, and normally it's just a bit... So, for example, the navigation is a really good example of making it really much easier to work with than normal WordPress. Yeah. Oh, they're like very easy. So, I see this one is based on underscore, but this has, like, the style of themes with maybe, like, other stuff, like bootstrap or things like this. Well, it's pretty easy to do yourself if you want that to. So, what you need in bootstrap is, for example, navigation, and you can just write it that very, very easily yourself if you want that. Yeah. Any other questions? Yep. Compared to, maybe, Saj, which is one of the very things... Yeah. Having tested both, like, did you make the choice because you thought it was better? I used Timber and Pick before. They used... So, I've worked with Sage a long time ago, and now they just changed to a blade, I think, but I haven't checked this one out yet. Yeah. Would you see no limitations in this one? Yeah, no, there's no limitation right now, and many people are working on it to improve it and stuff, so that's how I know it. And in Sage, there is very much magic going on sometimes, which I don't know how it works, so that's why I don't use it at the moment. But it's got very cool features, too, sure. But you would say which one is maybe a bit simpler? This is really simple. This is basic stuff, and I actually... I started with that. I just included all my changes I wanted, and now we have a custom theme, which we're using, which is based on this one, which is really much easier to understand, and you can make it more complex if you want to. Sure. Any other questions? I guess many of us use as-and-screw-stop-fields a lot. Yeah. Maybe it's going to change a bit, I don't know, but what's going to happen with Tweaking? That's really easy to do, because there's an integration of this in Timber and Tweak. So if you need a field, you can just write post.the-field-name, and you'll have the data from there. Or you can... If you need... Sometimes you need more data than you can write post.get-field and your field and your job. You have your data from Asia. So very, very easy to do. And so about Gutenberg, I guess the team is already working on trying to adapt something, or is it going to change nothing, maybe? I'm not too sure about it, and the answer will be pretty long and not fit into the next one minute. I think Gutenberg, as it's planned by the court team, I think the content is already there. It's actually in the content. Objects of Timber is just like, yeah. Just out of the content. So there will be some changes, maybe, but, well, Gutenberg is not up on the area. So you code your template in the Gutenberg. Yeah, so Gutenberg just will output it in the post.content, and so that's what happens. As long as it's not front-end, there will be a long time until it is also front-end because of the possibility to collect data and to enter data from the front-end as long as it isn't really... So there are no planned changes at the moment because we just don't need to at the moment. But if there is anything we can do, just open an issue and we'll have a look at it. I'm confused. That's good. Okay, so after the end of my presentation, thank you very much for having me.