 He is a full stack developer. He makes themes and plugins. And for him this introduction is enough. Assalamu alaikum everyone. So let's check this one first. Okay, it's working. So my name is Mubin Abdullah. And I have started my career as a UI UX designer. Later I jumped into front end development. And when I was working in front end development, I got a chance to know about WordPress. And then I started my career. I converted to WordPress development. And now I'm a proud full stack WordPress developer from last 5 plus years. The topic today, the topic on which I will talk today is Theme to Everment with Sage 9 and dry templates and using Laravel's blade engine in Sage 9. So the first question is what is Sage? Sage is not a theme framework, but it's a started theme just like underscores. How many guys have you used underscores? Okay, that's a great number. Unlike underscores, like in underscores, you can have a good jump sort. But unlike underscores, it have a modern WordPress development workflow which you can use. Like if I say underscores is 100 hours start, then Sage is a 10,000 hours start because with its company like browsing, your development is very fast. Why Sage? Why don't we use Sage? Why don't we use underscores? So in underscores, we don't have modern development workflow which is just a WordPress theme. But in Sage, we have a whole modern WordPress workflow where we have things like a modern build process, template inheritance and improved project structure and blade template engine. So first of all, I will talk about a modern build process. So Sage-Prony theme was released in 2013. It was released in its first version. Just like other starter themes, it doesn't have any modern development workflow. And after the major updates, like its name was Roots then, after some major updates, the grant was introduced as modern WordPress development workflow and in Sage 6IS. In Sage 7, the grant was changed to Gulf and in Sage 8, they renamed the Roots to Gulf and now the major release is Sage 9 which was introduced in 2018. So what's new in Sage 9? In Sage 9, they have introduced Larville blade engine, that's a templating engine and a better file structure. Also, they replaced Gulf with Webpack with which you can compile your Sage files to CSS files, convert your ES6 JavaScript with Babel and you can optimize images as well. So this was a modern build process. The next thing is why we should use Sage, the next reason is template inheritance. So the template and inheritance is something new in WordPress theme development which is commonly used in some other frameworks but not in WordPress. The only Sage is providing this template and inheritance functionality. What is it? With template and inheritance, we can make a base layout file and in that file, we can include all the common Web elements like headers, sidebars, footers. So we don't have to write get header, get footer, get sidebar again in our theme template files. So this is template inheritance which is a very useful feature of this Sage 9 and you can call it as a theme wrapper as well. And improved project structure. So in this project structure of Sage 9, they have removed all the common files from the main theme directory. In other themes, you can see functions.php, index.php, single.php or other template files in the main directory of that theme. But in Sage 9, they have changed all the structure. They moved all the files into resources and views. So I will talk about those in upcoming slides. Blade template engine. So WordPress lacks a real blade template engine. How many people have used Laravel or know about Laravel? Great. So Laravel is using Blade for a while and it's quite good as it provides a lot of functionality unlike deep tweak or moustache. Those are also template engines. What Blade provides us is it provides functionality to write PHP codes in its views and template files as well. So I do typically don't recommend Sage for the new WordPress developers like if someone already built themes with other starter themes or built theme from scratch, they should work on Sage 9. But if someone is new in development of a theme they should practice more on normal theme development from scratch. So I'm giving you an example of pay.php which you can see in your theme template files. This is the pay.php file built in underscores. You can see something like this in underscores but if I will use Sage 9 this will be the code in pay.php file as all the extra things like get header, get sidebar, get footer are already in theme wrapper in the app.blade.php file which is a theme wrapper of Sage 9. So in all the child templates like pay.php, single.php, archive.php you won't have to write all those code again. So that's what template inheritance is and that's the reason because blade engine was integrated. So starting a project before starting is Sage 9 we of course have some requirements. The first requirement is get. It's extremely most important to have a local development workflow for building a WordPress theme. Like once your theme is done on local then you can migrate it on your live server. With git you can sync all the live server your local server. So I will recommend every developer to use git and all the WordPress themes or plugins, projects, PHP. So you will need a minimum version of PHP that is 7.1.3 for Sage are greater than that. Some of the features in Sage won't work in the version below 7.1.3. Of course the latest copy of WordPress is required for building a theme in Sage. So Composer. Composer is a PHP's dependency manager. It is required to install the Sage as our started theme. The next one is Node. You probably hear the name of Node. So Node is required a 6.9 minimum version for Sage and if there is above version that will work with it too. And the last one is Yarn. Yarn is just package manager just like NPM. So NPM was used in Sage 8.5.1 when Sage 9 was introduced Yarn was replaced with NPM. So to install Composer you can run this command on command line and if you want to install it on Windows then there is a setup which you can download and install Composer. By installing Node.js you can have package manager to install on Windows and on Linux or Mac you can run this NPM command line and just like that you can install Yarn as NPM package so you won't have to run your tasks with Bower, Gulp or Grand. Yarn will do its good work. So starting a project first you will have to go into theme directory with command line and there you will have to run the Composer command which is create project. So you will have to write Composer space create project and then Sage and then the name of the theme you want. So right now it is your theme name you can replace it with whatever the name of theme is and if you don't have Composer like for some reason you can't install Composer then you can get the repo from GitHub of Sage or you can download the zip file. So this is the theme structure for Sage and you can see here in the root directory there is no index file there is no function.php there is no single blade single archive or page.php file so what happen is they move all the functionality files in app folder which you can see there will be controllers there will be helpers and in resources folder there will be use files where you can see all the templates like single.blade.php and page.blade.php and in assets resources and assets you can find all the JavaScript files CSS files, images and fonts to optimize. Here web pack or yarn will work to compile like compile Sage to CSS ESX to JS and optimizing images so tasks like that can be run by yarn. So after installing the Sage with Composer then you will have to install the dependencies you can see the dependencies in package.json file there are two type of dependencies the one is the other are just dependencies dependencies can be used for requiring bootstrap, find awesome and stuff like that while the dependencies can be used to run the tasks like image optimization Sage to CSS compiling so there are some available commands for yarn a yarn build that is used to run that can be run on local to compile all the assets in local development workflow and yarn sort is yarn sort can be used to run the browsing tasks with which you can see all the changes on run time without reflection of your browser and yarn build protection can be used to compile all the assets if you want to move the theme on a live server. So after installing theme all these types you can see the Sage 9 page like this one there you will have to plan some do some planning for the theme you will have to make some dummy content like if you want to make a bootcamp site then you will have to make some products so that you can design those pages you will have to make some content then you will have to create a sitemap of a whole website so you will have an idea like how much work you have to do and the last thing is you will have to keep the site functionality apart of the theme like if you want to make a some post if you want to make some text on this then you will have to make plugins instead of making all these in functional.php file and the last is blade template and I already explained what template inheritance is and if you are using blade then you don't have to worry about using the function like escape underscore URL the sanitizing function blade does all these tasks automatically and with blade you can you don't need to create a functionality in views you can create all the functionality in controllers and then you can access those functionality and just like that you can make global data so you can access all the files and inside 9 they also introduce controllers there is some specific controller for say 9 with which you can also pass the data with controller that's an alternative way and there are blade directors blade directors are like just like short course you can hide all the ugly code with blade director you can make a blade director on controllers or other files and then you just have to run the blade director when it will do all the work and some of the developers might have an idea about name spaces name spaces are used to like removing the conflict in removing the name collision and the last one is beautiful looking code it is totally clean code with blade 9 all the structure theme code is totally clean and neat so that's it I guess any questions you can send me an email or