 So we're going to talk about WordPress advanced development and I want to talk more specifically about theme development today. So my name is Jeremy Madder. I'm a project manager and partner at Attitude, a web agency based in the innovation part in Osam. And I'm working with WordPress since 2010. So quite a long time now. Quick summary, I will talk about the history of the development tools that I use in my workflow. Then I will speak about the development guidelines and then more tools, more in the WordPress world in the area of development. So imagine me like 10 years ago in my bedroom using text edits for building websites. So my first website was built with just text editing software. So there were no error management. So everything I did, I had to edit properly. I made a lot of mistakes, breaking sites, etc. And I worked also with Pytida, which is a software to transfer files into a server. After I discovered Dream World. Let me just talk about... It's not getting worse. The interesting thing about Dream World is that I was able to have the coding software and the file management system in the same environment. So I could use only one software to do both. You're really in the surprise. Yeah, it's complicated. So there is a problem with the function. So after I began to get interested in Coda, which is like Dream World. You have the file transfer. You can also code. But you can add a lot of modules on top of that to help you code better. For example, if you know about SAS or SCSS, it's just an improved SCSS language where you can have variables, do functions, etc. And a separation of MAMP with a software that was able to put a PHP server on my computer really easily. And we had database management, etc. So Coda, I tried to use afterwards a local dive file wheel, which is an interesting software because it's specifically made for WordPress. So on it you can create a site. It will install WordPress, the database, in a few seconds on the Internet. And more importantly, you can also share the website with the teammate. So you can export the website and you can just drag it into the software and have all the environments, database, and stuff already here. So in terms of collaboration, it was more or less interesting. And then, very important, Git. Git allows us developers to version our code. So every modification we have to commit it on the Git server. And then we have a history of all the modifications that we did. If we work in team, it's also really interesting and important, sorry, because you can also see which changes your teammates did on the same website or playing and stuff. And that's the end to be a little bit more complicated. Okay, now Atom is a much more hackable code editing software. We can add a lot, we have a lot of modules on top of that to also increase your workflow like Kona. And we can also work with Vagrant, which allows us to install the development server on our computer and still Git. And then also really interesting, NPM, Node Package Manager. So it's a manager for JavaScript packages, yarn, which is the same as the competitor. And then also Composer, which is a PHP dependency manager. So the idea of all these tools, so explain that. I didn't go in with nothing at all. And now I use a variety of small tools, packages, etc. The goal is really to improve your workflow, bring more productivity in your work and also have more quality in the code that you want. So yeah, while all this is doing productivity, I thought a bit about it. Sorry, my notes are not showing. So productivity, collaboration. When you work with a team, we need tools that can be efficient and save you time. We have reliability. We need tools also that can help you create stuff, not create problems. And finally, more structure also. It's important when you develop to have a structure that all the people can also understand in the five structure of your project. So now, what about WordPress? There are some development standards. You can see the codex. There is the theme development standards. Also the WordPress coding standards. But there is a few best practices about how to organize your project. I don't know who here ever built a theme from scratch. Great. So you will get mine completed. So there is a few best practices because you can do your theme, organize it as you want. If you respect the theme development standards and the WordPress coding standards, you can have which folder that you want to organize for your stuff you access in the theme. So what we need for development standards is first coding conventions. But more than WordPress coding standards it's like linters. This is like small packages that you can have to make some highlights on your code when you do a mistake. So it helps you code better the best structure possible and avoid mistakes. Of course, don't repict yourself. So you have to build something that you can reuse and also the small components that you could have. You don't want to regret them when you need small assets in the libraries. So this is more about the performance stuff. It's really important to have all the JavaScript, CSS files minified and a small number of files as possible. And then do not reinvent the wheel. Of course, you have to use things that are already available for you. You don't have to reinvent it every time. So now I'm going to talk about frameworks because I said a lot of stuff and I'm getting to my point. So I want to talk about three frameworks which introduce the MVC concept. The MVC concept is relatively simple. So it's an acronym. You have the model, which is the database. The view, which is the thing that your user is going to see. And then the controller, which will take the request as the database and then set it back to the view. In this concept, you have a separation between your front-end code and your backing code. So your code is really more organized and you will see later that the folder structure kind of makes sense and allows you to have more comprehension for your teammates or other people in how you get this view. So the first framework that exists is Timber. Timber has also the object-oriented code, so MVC, and it works with the tweak engine and the tweak template engine. Then we have Femosis. That does quite the same thing but offers the possibility to choose one to use tweak or blade. We talk a bit more about blade layer. And finally another one, Roots, which we get more deeper into it. So Roots is a development framework. It's divided in three products. So we have trellis. We go more deeply into all the description of those products later. Bedrock and Sage. So trellis. Here is the folder structure. Let's look at what it creates with vagrants and a virtual box. A small circle on your own computer. So you can run afterwards or press with all the PHP stuff. So some other development tools that are really helpful, like email hub, which is a small email inbox for developers. And then you can see that you have your root folder on the site. Then the trellis folder with all the stuff related to your environment. And then all this stuff and we are going to get deeper into that. So, now Bedrock. So Bedrock is a WordPress developer boilerplate, sorry, with modern development tools. It's easier to to configure it and there is also a new proof structure. So here you have the regular WordPress file structure that you may know. And there is the Bedrock file structure. So here you have the site folder that we saw on the last slide. Then you have the first config folder with environments. Okay, what are those? Of course you have a development environment. It's the one that you have on your computer and you are working with it every day. And then we have a staging environment. It's basically a place where you can put your site doing some tests and showing it to your end customers or some testers. The idea is not to push modifications directly on the live website because you can break it. And then you have finally the production environment which is the one that is up and running and it's like two customers. So in these slides you have a lot of small configurations options that you can have that's naturally important for today. You have the vendor folder which will hold all the composer dependencies. And then the web folder which is subsidized in a map folder where there is all the content of the WordPress website and then the WP folder which contains the core all the files that is contained in the WP include and the WP admin folder. And now there is Sage. So Sage is the WordPress started team with modern development workflow. I'm going to go also explain everything. So you have your basic theme and it's divided with a lot of other folders. So you have first the app folder which will contain the main part of all the PHP of your team. You will have a controller folder which will include all the controller's files. So every time you have to make a loop or I don't know yet the author name or email etc. a lot of stuff you can write your code in the controller and then you will have a method to grab it in the view in these slides. So the idea is really to separate all the PHP code and the HTML as much as possible so it's really, really well. Okay, so we have the configuration file that is forward. Sage introduced a build function so every time you run it it will take all the assets that are in this folder so the fonts, the images, the scripts and the styles will combine them and meet them so you have the less amount of files and it will be also much smaller in size. So then in resources you still have the assets and then we have all the views here is all the layouts and the partials. This is where we put all the regular template files like your page templates the category templates that you can have. Those are the few benefits that you get in Sage so you have the asset compilation I talk about it, a quick setup you also have the live reload and compilation integrated with the browsing so every time you do a style modification you will see it automatically in your browser. It's well integrated with advanced custom fields and then, like I said you have the controllers which are here and the views and they are separated. Sage use Blade is a template engine which use I'm sorry, don't remember the main thing is it's taken from the Lara.NET framework which is a framework PHP framework used to build the RedBest application so it has some time it's what it uses now. An example now this is what what page the PHP looks like in the framework and the scores you can see PHP, HTML now PHP again HTML etc. So that's not really readable. Now to compare this is the page the PHP has played so it's the same template in Sage so you can see there is no HTML here you have sections and some new kind of markup that you have to learn within the template engine the includes which will lead to other parts ok so what do you prefer to read between this and that I think this is the most redeveloped thing that depends on your approach so you will now where is all my HTML going there is a this is good all the HTML is contained in a general template which is called app where you will have all your HTML markers and all the things that are part of the WordPress term so you have a single file where you can do all the change of your general website HTML structure now a small word about components I've talked about reusing things etc. so imagine you have an alert here it's a a danger alert a variable for the title and a variable for the content so the idea is afterwards you will be able to reuse that data code everywhere you need to in your website so you will simply just do that so you call the components called alert so it's just a relation between the main here and here then it goes in the variable the title which goes here and then the content so with that you can quickly build a website without headaches and it goes really quickly now in terms of preferences that's the example from the documentation obviously it's just a simple website but you can see that with the asset magnification and the compilation the website loads pretty fast from beginning so the framework will allow you to to have a faster website from the start with less optimization in the future of course then we will have to reduce the size of all the assets that you would put in your content use a caching plugin to to imply the HTML and also serving a caching version of your websites so now to finish so I explained from where I come from and where I'm at today it took me quite some of some long times approximately 10 years but I was not doing this professionally at the beginning but it is not to be scared of all the tools that are presented here if you are not comfortable with it you need to practice to experience and really go out there in order to master them and then be able to create more structured WordPress things thank you I thought you were going to present the teamware framework what could be according to you like the main differences with what was finished I haven't really go deep in the teamware framework there is an expert here I think the main difference is that the teamware is providing a framework you certainly find one the teamware is a framework just for giving things so you have the object oriented from online and you have also the tweak template engine in the rooms you have of course Sage which is a team with also the object and their use competitor of the template engine but it also introduce the server and the boilerplate inside to help you with website deployment and updates to ask if you are building all the sites from scratch with templates like this or with frameworks like that or you also sometimes have the problem that the budget is so small that you cannot really put it on scratch and have to use something else yeah I think both but now our company has a strategy for only custom made websites it goes through the user experience the design and of course the development the benefits it's of course cost a lot more but you can really do whatever you want in terms of functionalities the issue that we had with for example premium things that we team forward on premium things is more sometimes when you have to do some tweets and adapt the templates to fix the needs of your project scope and we have also other issues when we were updating those websites all the team options were gone and the sit was as beautiful as before yeah answer to your question the names of the tools that you presented to use whether you show the icons of the tools yeah the frameworks the teams for coding which is what I told yeah even there okay add to a brand okay these websites do you deploy them to just run the middle hostings or do you have to change things the structure that is different from normal WordPress works it depends it depends on your hosting because you really need if you deploy a website with vagrants etc we need to have good access on the server to make it work so sometimes if the customer doesn't have the server that goes with all those tools we just push the the team and the database on the staging or for the website and do small adjustments the benefits that we have with all the configuration is that we can quickly set up a project between the developers in the company because we are in the project files there are some small configuration files with all the dependencies and then you just have to install them and run one or two commands in your terminal and you can have the project it's an alternative to work out by flywheel it does kind of the same thing but you know what's happening and you can it's more easy for developers to go into the code than the very shelf problem that's what developing in the end when you you can put it on a normal WordPress website that you create with Apache and you don't have to change them in the end when you put the website online do you have to change settings on the server or can you just create WordPress and put your theme on that it depends on the hosting that you are putting the website in here and the question is ok so we are going to the next one if you want to discuss more about it and other questions that come don't hesitate to come and speak to me