 Hey what is going on everybody my name is Raddy and today we're going to explore the full site editing in WordPress by building a custom blogging team from scratch. You might be wondering what is full site editing? FSC for short represents a major shift in a way that WordPress website can be created. It is a tool that comes with WordPress 5.9 and above that allows you to build fully working based on drag and drop blocks. Before we begin let me know what you think of the full site editing in the comments below. Smash the like button and consider subscribing for more videos like this. Alright before we begin I just wanted to show you super quickly what we'll be building today. We're going to be building everything that you see here from scratch. So we're going to look into the project structure, the team setup, the team styles such as the colors, topography, element and much more. We'll look at the team settings that include things such as layout, pallets, topography, spacing etc. We'll look at some of the team parts such as the header and the forcer. And we'll look into creating page templates such as this page here and also the blog post page as you can see inside here. And as we go along you will see some of the issues and some of the benefits of using the full site editing. One thing that I wanted to stress is that I can't cover absolutely every single style and every single setting in this video because there are far too many. But hopefully at the end of this video you'll be able to change the styles of your website. You'll be able to add other settings and so much more. All that said let's get started. In this video I'm going to be using Laragon for my development environment which is basically going to allow me to install WordPress locally. Of course there are other great alternatives such as exam and local. I'm going to start this project from zero which means that I'm going to install a brand new WordPress website. But if you already have WordPress website installed somewhere and you have the latest version feel free to skip this section. Send this let's get started. The first thing that I'm going to do is create a new WordPress website. On the menu quick app and then click WordPress. This is going to ask me for a project name and I'm actually just going to call it WordPress. Okay and this will install the latest WordPress on my local environment and I should be able to access it under WordPress.test. All right now that my website is ready I can click visit site. And this will open the browser as you can see under WordPress.test there will be admin install which means that we can configure the WordPress installation app. So I'm going to choose English United States as default and press continue. Now let's give our website a name. I'm going to call it paperless. This is what I called my team. So I'm just going to stick to this and then for the username I'm going to click I'm going to have admin and for the password I'm going to keep it simple and put password. Of course I need to confirm the weak password in here. We are developing locally so it doesn't really matter and then I'm going to add my email. Once we're done let's click install WordPress and give it a couple of seconds. And now we can log in to the admin panel. Click login and the username is admin and the password is password. Remember me and login. As you can see I am currently on the latest version here which is currently 6.0 and this version includes default site editor so we don't have to install anything else. If you hover over appearance I'm going to zoom in a little bit. If you hover over appearance you should see the editor here and as you can see currently is in beta. Let's have a look at the teams that we currently have. So if you go to appearance and then teams this is where all the teams are stored. Here we have 2022 2020 and 2021. We definitely don't need any of those teams because we're going to be starting from scratch today but if you wish to keep this one 2022 basically you can use this one as a blueprint. You can look inside the files you can see how the team is structured and of course you can reference some of the settings as well. So the next thing that we need to do is start creating our team. So to do that we're going to have to locate our website. So under LaraGun I can actually go here if I click on here root this will give me all of the projects that I have and the one that we just installed is called WordPress. So if I click on this this is essentially a normal WordPress website and in order to find the teams all we need to do is go under WP content and then teams. So this is where all of the teams are and if I was to delete the first two for example and remove them like so then if I go back you will see that if I refresh they disappear and we only have the 2022 team. So we know that we're working in the right project in here. Obviously you don't want to delete the wrong files or another project but so this is the folder where we want to be inside teams and this is where we're going to be creating our new custom team. So to do that I'm going to create a new folder right click new folder and I'm going to call this team paperless. This is what I call it. Of course you can call yours whatever you like it's just a name and then inside this folder is where we're going to be adding all of the team files. Now before we begin adding any of the team files I actually want to insert the screenshot of the team which is going to be essentially this image here for team. So I want to copy and paste it super quickly. So I'm going to paste it super quickly here and the image is called screenshot.png. If I do view large icons you'll see that it's just a normal image and I've put the name of the template in here paperless and the dimensions of this image is 1200 by 900 pixels and very important this is called screenshot.png. Now that we have the team folder created here it's best to just open it in our favorite code editor and for me this is vjuctd code. To do this I'm going to do left shift right click open power share window here. You definitely don't have to do this. This basically CDs to the folder that we just created for the team and I can just do code column and then press enter and this will open vjuctd code with the folder open inside here on the left side in the explorer. If you don't want to do the command line the power share thing basically all you have to do is open your code editor and go on the file and then open folder and find the folder manually. That's all there is no difference whatsoever and we are now inside the team folder that we just created. So what I'm thinking to start with is let's quickly create all of the files and I'm gonna super quickly give you an overview of what they do but as we are developing the team you will get very familiar with each file and at the end of this video you will know how they all work and why they're there. Let's start by creating the first folder which is going to be called assets. So the first folder is essentially going to contain all of our assets such as CSS, fonts, images, JavaScript and so on. So let me show you an example. Let's say we want to have a folder for CSS. This is where we can add additional star sheets. Then we can have a folder for any fonts that we wish to download and use locally. We can have a folder for images IMG for short and we can have a folder outside this. We can have a folder for JS JavaScript. I'm not gonna add any files in here just yet but this is how you can structure your assets and now the next folder that we need to look at is parts. Let me first of all create some new folder parts like so and inside this parts folder essentially we can create custom parts for layout. So for example we can create a header part. So let me just create a header dot html. So this has to be dot html by the way not PHP has to be dot html and let's say we want to have another custom part for layout and we can call it footer dot html like so. Now of course you can add as many as you want and later on I'm going to show you how to use them but for now I'm just going to have the files here just so you understand what they do. They're not going to break the layout or anything like that so don't worry about them just yet. The next thing that we can do the next folder is going to be called templates. So let's create a new folder templates and inside this folder essentially we're going to have templates for many of our pages. For example we can have a template for our homepage we can have a template for the blog post we can have a template for the search page and so on. Let me start by creating a few of them and you will understand what I'm talking about in a few minutes. If I was to create a new page inside here maybe we can have 404 html and then maybe let me just close them I don't know why it keeps opening them let's close that as well. So on the templates let's have another one archive dot html html like so. We can also have we can also have index dot html which is going to be essentially the default homepage of our website but we can also change that later on which I will show you how to do. We can also have page dot html. We can also have search dot html and we can have for example single dot html which is going to be the blog post. So blog post search so if you want to have a custom search page this is going to be the pages template homepage template and so on. Let me close this and let's finish off the rest of the files and the next file that we need to do is functions dot php. Now this file needs to be outside those folders next to the screenshot. So what I'm going to do is create a new file and let's call it functions dot php. Let me close this as well and the next file that I need to create is index dot php functions is going to have a lot of the setup for template but not only that you can do all sorts of custom functions for your website you can add styles here you can add fonts it basically you can do pretty much anything with functions but I'm going to show you how to use it in a second as well so everything is going to be clear the next thing that we need to create is index dot php so index php like so and this page is actually not going to have anything in it I assume that this page is here for legacy purposes because this is how WordPress used to work but inside here we don't have to have anything but we do need to have the index dot php page the next thing that we need to do is create style.css so new file style.css and we also need the team team.json file so team.json file is essentially the configuration file for the team styles and block settings we're going to be working mostly in the team.json file the style.css is kind of like self-explanatory we we can add custom styles in there if we wish to or we can add styles in the assets folder as well I can show you both but one thing that it's important to start with is the style.css if we open the browser super quickly I want to show you something if we go to the official documentation which is developer.worldpress.org slash teams slash basic slash main dash stylesheet dash style dash css this is where we can find an example of the style.css this is going to be the information of our custom team so I'm going to copy this super quickly and paste this inside style.css and then we can change a couple of things for example the name feel free to choose whatever you wish I'm just going to do paperless team paperless and then I'm going to do let's say the team URL can be ready dot dev slash paperless dash team then the author can be just me ready and then the author your right can be ready dot dev and so on I'm going to leave all of this as it is and say all teams should be available now inside WordPress so if I go back and go under team and press and click on appearance here you will see that we have the paperless team that we just created inside here so I can actually activate this and start using it so if I do activate this is now the active team and if I was to go to the website which is WordPress dot test for me you will see that we have empty template index and as I said earlier index is or home page so if I was to go back to the code editor and go to templates and open index I can just put rad save go back and refresh and you will see that rad is now rendered which is awesome but I'll probably change the settings in a second so we're using an actual page for the home page which I'll show you in a second so I'm going to remove this from the index dot html and save it close that's absolutely fine we can close the style.css and we can close the team.json as well and the first thing that we need to do is concentrate under functions.php once we get past the functions.php everything else should hopefully be a little bit more fun to do if we open the browser one more time and if you go to developer.wordpress.org slash teams slash block dash team creating dash new dash team dash using dash d dash site dash editor one of the examples here is basically setting up the team defaults and registering support for various WordPress features so we do need to have this all right and we need to copy this one here I think here's the second one so what I'm going to do copy this and go to functions.php we need to open php in here and paste this super quickly so what we can change in here is the actual function we can name this whatever you like instead of my team we can name a paperless theme support I can copy this change the function and change the action here as well and that should be good if I save this you can go back to the website and refresh whoops that's a little bit zoomed in and as long as you have no errors in here we should be good to go now the next thing that I need to do is add the style.tss file and I couldn't figure out where I actually found it it's somewhere in the documentation I don't know where exactly it is I did want to copy and paste it but instead what I'm going to do is super quickly write it for you and explain what it does so what I'm going to do is underneath here I'm going to create a comment super quickly you do slash star and then you can just put dashes if you want to make it pretty and then inside here I'm going to do enqueue styles enqueue styles and we need to close the comment like like so with a star and slash all right the next thing that we need to do is include the style.tss to our project to our team so we can write styles and I'm also going to show you how to create a custom style sheet somewhere in our assets.tss so for example let's create a new style sheet here so what I'm going to do new file and I'm going to call this one blocks.tss so I'm going to show you how to include this as well let's go back to functions.php so we start with function and the function can be called whatever you like I'm going to call mine paperless styles paperless styles like so open and close parentheses and open and close curly brackets so this is our function and inside here is where we're going to be enqueuing the styles so essentially we want to use a function called wp enqueue and I've already opened the page inside here just so you can see it super quickly so this is the code reference that you can go to the developer.worldpress.org website and have a look but this is how the function goes I know it looks a little bit strange but if you scroll down a little bit you will see that the first thing that the function has the first parameter is called handle this is the name of the style sheet and it should be unique the second one is the four URL of the style sheet which I'm going to show you how to get and then we have the depth and the default value is an array and so on so this is what I'm going to be doing and let me go back and you see how it works so inside here let's put a little comment we're going to do inside here let's put a comment register style sheet wp underscore enqueue underscore style just like I showed you and as I said the first parameter was the name which needs to be unique so I'm going to call my paperless style the next option was the actual directory so we need to grab the source sorry so we need to grab the source of the file and to do this I can use the get style sheet URI get style sheet underscore URI and we close this function this function will essentially get the style sheet dot css URL in here and just do it first we don't have to do anything else but I'm going to show you another example in a second then the next option was array as default and then we have the version for the version we can do wp get theme and then this is going to be a function like so get and then oops inside here let me close it so quickly so you can see the version like so and we need to close I think by mistake I deleted one of the parentheses so we need to close them on mine is kind of like as you can see it's highlighted and that should be good to go so this was actually taken from the official documentation but some reason I can't find that so I'm going to put it in here and the next one that I want to show you how to do is the assets css blocks so this is going to be almost the same but we need to change the actual URL in here so the actual folder path so let me show you how we can do this so I'm going to copy this by doing alt shift down this is going to duplicate the line as I said earlier this needs to be unique so I'm going to put style that paperless style and then maybe we can do dash blocks like so so instead of get style sheet you're right now we can change this to get template directory you're right this is going to go to the main directory of all themes here so what I'm going to do let's remove this super quickly and we can do get underscore template underscore directory underscore you are right like so and we should be good to go and the next bit we can we can remove all this leave us the food and what we can do is put dot and then finish off the directories so we need to go inside assets now and then css and then block blocks or block css let's have a look how I called it so asset css blocks okay I call the blocks so it needs to be blocks dot css and this is how we enqueue the styles but this is not done just yet as you can see inside here we have add action so we need to have the same thing for this so the function can be triggered and we can add the styles so what I'm going to do is I'm actually going to copy this and paste it underneath here and instead of after setup team we need to change this to wp enqueue scripts so wp underscore enqueue script and we can change this to the function that we have here so copy paste that's it if we want it to be consistent just like inside here this is the original from the team so what we can do is copy the if statement wrap everything inside here so this is basically checks if function paperless team support exists but this time it's going to be paperless style so if this function exists then obviously run the code and then we can have and if like so inside here and that should be good so as long as these two are the same yep we're good all right so what we can do now is go back to the website paperless make sure that the team is actually active so as you can see the team is active here and if we go to the actual website let me zoom in refresh as long as everything works in here we should be good so what I want to demonstrate now is if we do control and you to inspect the source code of this page what I want to see is whether we have the style.css inside here so if I scroll down a little bit you see the first link in here so we have team paperless style.css we just included this which is awesome and if you look just below it we have that we have the paperless folder asset css blocks.css so this is how you can include multiple star sheets just make sure that the names are unique the id is unique and that's pretty much everything I can think of here so now we are actually done with the functions.php and we can close it and focus hopefully focus on the fun part of this tutorial let's go back close functions.php and make sure that you have saved everything now that we have pretty much everything set up let's remove some of those pages from here as we won't need them anymore and let's change the home page to be an actual page from WordPress so what I mean at the moment we have empty template index and essentially this is using the templates and the index.html from here now what I want to do I want to create a custom page for the home page but I want that to be inside my actual WordPress website so what I mean is if we go to the dashboard super quickly I'm going to open in another tab I'm going to create two pages I want to create a home page inside here so we can edit it whenever we like with the editor so what I'm going to do instead of creating a new one I'm gonna edit the sample page here so let's click edit and then let's just call this one home so we know what it is and of course you can change the slug from here the permalink so I'm gonna just click home and update we have a little bit of the food content here which is absolutely fine this will come in hand in a second but if we go back and if you go to the actual website one more time so WordPress.test you'll see that we still have empty template index and this is because it's still using the index as our home page so what we need to do is go to the dashboard go to settings and then reading from here we can choose a static page by click on this radio button and then selecting the home page to be home that's it we don't have to do anything else and save the next thing that I like to do and this is totally preferential you don't have to do this is I like to change the permalinks so if I was to go to permalinks as you can see you have a lot of choice from here you can have explain they their name and so on so essentially what this does is this is gonna be your website name and then how your permalinks are displayed in terms of like how you are out is structured so for example inside here we have the website name and then we have a post name so sample post I don't really like this I like to have blog in between so we have the website we have maybe a custom page and then we have blog slash the blog title so what we can do in here is we can create a custom one I can just do blog and we need slash before as well so blog slash post name that's what I want and as I said this is totally optional and I'm going to click save changes and now if I go to posts and if I view this hello world post you will see that it goes under WordPress dot test blog and then the post name here which is how I like to structure my website all right now before we do anything else let me show you the editor so I'm going to close those two and let's go back to the dashboard and click appearance and then editor inside the editor is essentially where you can edit pages and templates so if you click on the WordPress logo in here you will see that we have the editor we can edit site at the moment we edit in the page template which is this one here on the templates page.html as default and then if you click on templates you will see that we have some of the templates that we created earlier in this tutorial such as the 404 archive index and so on the good thing about this is that they actually give you a little bit of a description what they do which is great and also you don't have to create them manually inside a code editor you can actually create them from here if you wish I felt that it was just much faster to get the whole project structure earlier on in this video and now we can concentrate on building stuff the next thing that I wanted to show you is the template parts which is the parts inside here so we have these folder parts and inside the parts folder earlier on in this tutorial we created the footer and the header obviously they're empty but if you go back you can see the template parts in here you can obviously create a lot more and you can also edit them just by clicking on the actual template and you can start building the footer for example in this case by adding elements and so on so okay let's go back to the home page and as you can see we have empty template page and I know that this might be a little bit confusing but essentially I want to use this template page.html and I want to pull out content from the actual pages from the actual pages which are inside here so pages so I want to pull out content from those pages what we need to do is go to the editor click on templates and as we are using a page as a template now we can click on this if we click on toggle block insert here and search for post and then post content we click on this this should take the data from the actual page and if I was to save this and go to the actual website you will see that we have some text and this text is actually coming from the home page which is on the pages and then home so if I was to edit this and add something it doesn't really matter what it is let's say you can do slash by the way and add whatever you like so for example heading and let's say heading one and what I can do is like this change the heading to heading one and update so if I go back to the website you will see that we're getting heading one and so on so we can start building blocks now the reason I'm doing this right now is because I want to add a couple of elements on the page so we can see how our website is changing so we can see that our typography is working we can select different colors we can do different layout widths and so on so what I'm going to do I'm going to build a couple of elements and then we're going to start by creating the actual team so let's go back to the page here so what we can do is create a couple of headings first of all and we already have a paragraph maybe we can add a button and so on so in order to duplicate this heading I can do control shift and D and as you can see this is duplicating so I can duplicate this a couple of times maybe we can have heading two heading three heading four and heading five I know they don't look very good at the moment but that's absolutely fine we're gonna edit absolutely everything and make it look nice and I think there is one more heading so let's do heading six as well and of course we're gonna need to change the setting so this is setting one this is heading two this is heading three this is heading four five six okay so if I was to update this go back to the home page we have the headings I'm not sure if I'm zoomed in yeah I'm zooming quite a lot so that's why they look this way but this is the way they look as the food so this is 100% it doesn't look too bad of course we'll fix everything and if I go back for example we could also add a button or something so I'm gonna press enter and let's add a button and and I'm just gonna put button like so so this is the full button let's update it and let's go back as you can see this is the full button nothing special all right now that we have a couple of elements on the page I think now is a good time to have a look into the settings of our team and the styles now let's jump back into vg studio code and let's open the team.json file so as you can see this is a standard.json file which means that inside this json file we're gonna be defining objects and properties it's fairly simple and you'll get the hang of it but as we build up stuff in the team.json file it's gonna get a little bit hard to see in a way it's like I think there is too much information but the more you do it I guess the easier you get so the first thing now we need to do is open and close curly brackets everything that we're gonna write in this team.json file is gonna go in these curly brackets and because there is a lot of settings and they're very hard to remember what we can use is the schema provided by the WordPress team so if you do double quotes and add schema I'm gonna show you what is this but essentially you want to add a URL this URL comes from the official documentation so I'm gonna quickly copy and paste it so the URL is https column slash slash schemas.wp.org slash trunk slash team.json and what this does is it allows vg studio code well my editor in this case to help me with auto complete so if I was to put comma now and if I was to start another line so double quotes we're now getting suggestions which is amazing so this is gonna help us auto complete any style settings and so on this is perfect now the next thing that we need to set up here is the current version which is version number two if you don't put a version this is gonna default to version zero I believe and it might not work with the latest Gutenberg blocks and also basically you want to have version two and also you want to have WordPress 5.9 and above so make sure that you update your WordPress website and you have version number two otherwise the settings might not be the same and they might not work let's do another comma and then inside here we can start looking into the settings and the styles so these are gonna be the two main sections that we're gonna focus on today and we'll probably add some template parts later on so this is the two important things that we need to look and settings is essentially where you define your block controls for the layout colors typography spacing borders and so much more and styles is where you apply your colors font sizes typography elements you can target different elements such as the headings you can change the buttons and so much more so we will explore quite a few options in here but let me get started with settings so inside the settings as you can see we have curly brackets in here as well and we can write the settings inside here so all of the settings are gonna go inside the curly brackets and we can start with the layout I believe that this is a good one to start it's a little bit complicated to navigate but I'm gonna try to explain it as much as I can it can be a little bit confusing this one so let's start by writing two double quotes and then layout here it is auto complete kicks in and I'm just gonna press enter so for the layout if we do double quotes you will see that we only get two options content size is the default width of the blocks and you can also set white size for white blocks if you wish to and I'm gonna show you and I know that this doesn't make any sense in the moment but I'm gonna show you an example so for example let's set content size to be something like 800 pixels comma and then we can set the white size to be a little bit bigger maybe something like 1183 pixels let's save this and let's go back to the website and if you refresh you'll see that nothing has happened this is because we need to have a container and then we can tell the container how we want it to be displayed but let me show you something else if I was to edit this page so let's click edit page I'm gonna open a new tab here look at what happens so this this text is now kind of like in the middle and this is because we've set the content size to 800 if I was to change it to 900 save let me refresh and you see what happens now it goes a little bit wider so this also controls the editor size so I'm gonna put it to 800 so this also controls the editor size inside here which is great so I'm gonna refresh it one more time and now let me show you how we can use the well essentially this is still full width so nothing is happening here I can refresh and nothing is kicking in and this is because we need to be using the group from the editor here so let me show you if you jump back to the editor and click on the plus sign here and search for group and let's add a group somewhere it doesn't really matter and actually this is not only available group it's available on other elements as well but let me show you what I mean so now that I've dragged a group inside here what I can do is if we go to the view list I can drag everything inside this group first of all it's a little bit hard here we go you just have to wait a couple of seconds sometimes and it works so now that we have everything inside the group if I click on the actual group you will see this icon here and with this icon we can change the max width and the wide width and we can also have a full width now this is gonna be a little bit confusing but let me update go back and nothing happens now this is because it's a little bit weird but this is because we need to set this group we can set it to inherit the default layout so if I set it like so and update you will see that now it's changing it's a little bit weird how it works but you'll get used to it when we start building or header or footer you understand how it works but let me show you something else now now if I jump in and if I change this to wide width and save it it also won't work nothing is happening and this is because we need to have another group inside in order for us to be able to use those alignments it's a little bit strange also the alignment doesn't just work on groups it works in other on other elements as well but this is the best way to show you I guess so let me create one more group and the way I think of groups is kind of like a container so I'm gonna drag this one here and then I'm gonna open the list and what we can do oh it's already inside this group so now what I can do is select everything by holding shift and then let's jump inside brilliant now inside here as long as I have this one set to the inherit the full layout inside here I can mess around so I can have this to 800 pixels wide let me update and as you can see nothing changes and now let's set it to wide and if you go back you will see that it's now white which is perfect and if we change it to the last one which is full width let's go back boom it's full width so this is how the alignment the layout works it's a little bit tricky but once you start using it will make a little bit more sense and now let me pull it back to what should we put it back I mean let's put it back to none and I'm actually going to change the value in there as well so I'm going to update this just so we have everything in the middle it's a little bit better to see I guess and if I go back I'm actually not going to have white size and content size I'm going to set both of them the same but of course depending on your layout you might wish to have two and I just wanted to show you a super quick example of why you might want to do that if you wish to create a layout where the content is a little bit inside and then you have a bigger image so that will potentially allow you to do that and also why not have different widths I think it's a pretty useful feature to have anyway all right so let's move on to the colors if we go back to the editor here and if we select the heading one you will see that on the right side there are a couple of options that we can use we can change the color of the text we can change the background we can change the topography and so on starting with the color here if you click on it you will see that we have a couple of default colors so if I was to click on the red as you can see the heading becomes red and so on so what if we wanted to bring our own branding colors in here now I'm going to do control and z to reverse this update there and I'm going to show you I've already prepared my branding colors for this website they're a little bit boring but it doesn't matter too much so for my branding colors on this website particularly I have a very dark color which I'm just going to call black it's not fully black but it's very close this is a gray color and this is a kind of like a dirty white color it's not fully white but these are my branding colors not the most exciting colors but that's what I've chosen so far so what I'm going to show you now is how we can add the custom colors let's jump back into teams.json and we need to be inside settings so as long as you are here inside the curly brackets let me zoom in even more as long as you're here inside the curly brackets outside the layout so just outside the layout we can put comma and then we can do color inside the color we can bring in the palette so double quotes palette like so and inside the palette is where we can define a couple of colors so to define colors we need to define them in curly brackets like so and inside here if you type if you start typing with the double quote as you can see we have three options so let's start with the slug the slug actually has to be unique and I'm gonna show you something super quickly let's say I want to name my first color black like so and let's say the actual color hex value is 131313 that is the actual one and then last but not least let's give it a name now the name you can call whatever you like I'm gonna call it black here and save now technically speaking this won't work and the reason for this is because black is already taken so you kind of have to have a unique slug and let me show you what I mean if I go back to the website not only you can see that inside the text here we have black but also if I go to the website right click inspect and then if we click on the body here just so we can see the variables available you will see this dash dash wp dash dash preset dash dash color dash dash black and this will we can't overwrite so we'll have to be unique and you might be thinking well why don't we just call all colors foreground background primary secondary and so on and you can do that that's what most people do but I just wanted to be very descriptive this is a preference and what I'm gonna do is instead of black I'm just gonna call it paperless black as we called all team paperless and this is gonna be a little bit more unique and we'll be able to see in the variables a little bit easier yes so if I save this and let's go back and refresh the page here I'm still selecting the body and if we scroll down a little bit you will see that we have a new variable called paperless black here well it's WP preset color paperless black and we have the hex value now we can actually reuse this variable throughout the entire website you can add it into your CSS if you wish and so on so this is the great thing about the teams.json file is that you have all of your settings in one place and you can reuse them throughout and the other thing that I wanted to show you now is that if we close this super quickly and if you go back to the edit page I'm refresh hopefully now if I click on the heading and go to color you'll see that we have team colors so we've only added one so we have one in here and you can do exactly the same thing with gradients but on my website I'm not gonna have any gradients so I'm gonna skip this part but gradients are more or less the same just have a look into the documentation if you need to add them and you understand straight away how to add them it's more or less the same as adding a normal color also I wanted to mention that these colors are also available in the background here they're available anywhere that has color all right let's jump back into visual studio code and add the other two colors so I'm gonna copy this put comma paste I'm gonna paste one more and this one is gonna be gray I'm gonna change it to gray and the gray color is gonna be eight eight b eight b eight b that's absolutely fine and this one is gonna be white and the white color is gonna be f7 f7 f7 and I'm gonna color white like so let's save this go back refresh and let's have a look as you can see we have the three colors here and you can add as many as you want but that's what I have in my design let's move on to the topography as you can see with the topography here it's uh it's the default topography so it doesn't look very good let me quickly pull up my design here in Figma and for the headings today I'm gonna be using Stozyl which is an Adobe font and I'm gonna use for the body for the text I'm gonna be using Inter which is a Google font now the reason I wanted to have two different fonts is because I wanted to show you two different ways of including a font and in fact there are many ways but I just wanted to show you two ways the body font we're gonna actually download from Google and include in a folder and this one I'm actually just going to link this in my star sheet so let's start with the body font which is Inter first of all let's go to the search engine search for Inter and the first link should be Google font today I'm gonna be using let me deselect them just so you see but today I'm gonna be using the light one 300 select and I'm gonna be using the regular one 400 select this one as well and as you can see this lists the fonts here on the right side and it gives us a couple of options you could include this link inside the functions dot php if you wish to you can import this into your style if you wish to or you can download them I've already downloaded this font I'm gonna skip the downloading bit here but click on download and this will give you a zip file with the font all right let's jump back into visual studio code I'm gonna go to the explorer assets fonts and inside here is where I'm gonna paste the font so I'm gonna open this reveal in file explorer I'm gonna paste into here and I've actually copied every single font but I'm only gonna be using regular and light okay so if I close this go back to visual studio code here the font and let me show you how we can include the body font the first thing that you need to do is make sure that you're in settings we can be just outside the color so if I click on color we can just start from here comma and then inside here we can start with typography and let's start with the font families so for the font families and inside here we need to open curly brackets and close curly brackets so now let's start double quote and font family inside here we can write the font family you can find it from the google page so is enter sand serif I'm gonna copy this super quickly and I'm gonna paste it inside here of course you can have full back so I can write more fonts like let's say ario and so on and then comma for we also need to have a slug so this one is gonna be a unique one I'm gonna color enter like so and we need to give it a name and the name can be our body text and it's just called enter last but not least because we're gonna have two weights in here so we're gonna have a font weight 300 font weight 400 yeah the regular is 400 so we're gonna have two and let me show you how we can do that so after the comma we can do font face and inside font face we need to open and close curly brackets and start listing the first one so this is gonna be font family and I can copy it from here paste it comma and then inside here we do font weight the font weight for the first one is gonna be 300 comma and then we can do font style if you wish and this is gonna be normal then we can do font stretch and there are a lot of options that you can use if you wish to I'm gonna put normal and the last thing that we need to do is locate the actual font so we need to do source and then column and inside brackets like so we can start typing file column dot and then we can start writing the photos so the photo inside here is assets font and enter and then we choose the font so in this case we're gonna do assets font enter and then in dash light which is this one here and the extension is oops dot ttf like so and that's pretty much it and the other thing that we can do is put comma in here and add one more oops sorry the comma needs to be inside here so comma let me save it and prettier kind of fixes for me so I'm using prettier and this is why my jason is looking quite well organized so we need to copy this paste it here and everything stays the same except this goes to 400 and this goes to regular instead all right let's save this and if you go back to the website and refresh you will see that nothing is actually happening this is because we've actually included the font it's in all settings but we're not using it yet and this is where things are gonna get a little bit confusing but I feel like I need to do it now so you understand how it's done so essentially we need to go out of settings now I need to close this and we need to start writing the styles otherwise it won't make sense if I write all the settings first writing them step by step is going to be much better let me know in the comments below by the way if you have any suggestions so what we need to do is we need to open styles so comma after the settings and we need to start styles inside styles is where we can target the typography so for example let's do typography and inside here is where we can actually set the typography so let me show you what this means essentially let's do font family and now if you remember in the settings we just created various areas we just created this into font family and essentially this creates a variable for us I'm gonna save it super quickly go back and I'm gonna try to show you I'm gonna do right click inspect and if you go to the body one more time we should be able to find the around the bottom I believe here it is the view dash dash wp dash dash preset dash dash font dash family dash dash into and here is the font so essentially I can use this variable in fact I'm gonna copy it and put it in the styles so if we go back to the styles from family we can do va just like in CSS where you add a variable and we can input the variable name that we just created all right let's do comma and let's have a look at the other options and for example an important one can be the line height which I want to set to 1.75 and of course I can actually create a custom variable for this as well and I might show you how to do this later on so let's do it like this comma and then let's put font size to be one rem for now save it in fact it's going to be one rep let's save this and let's go back to the page now and refresh okay as you can see the font is looking much better now not only the body font has changed but we also have well the font's changed pretty much everywhere inside the buttons the body text and also the headings but for the headings we're actually gonna be using the other one which is a Stozyl and I'm gonna show you how to add that now so for the Stozyl one let's copy the name super quickly and let's go back to Ecosia so let's put Stozyl font and if we go I think this is a yeah this is an Adobe font so the first page here and I need to sign in super quickly I have to sign in and now if you scroll down a little bit you will see this button here add to a project click on it and inside here you can create a project or select an existing one so I've already created this one here as you can see paperless FAC team and this should give me if you see you can select what font you want I want the regular and the boat in fact I just want the boat sorry and then I can save this now this is gonna give me two options this is gonna be give me the link which I can do inside the functions or we can import it so what I'm gonna show you now is a different way I'm gonna import this into my CSS and if I grab this import here from here like so and if you go back to Visual Studio Code go to explorer openstyle.css and inside here let me close it inside here we can paste it and we can and we can put a little comment so this can be so this can be adobe font okay so this is an option it's probably not the best one but I just wanted to show you how to do it anyway so now that we've included this font let's have a look at how we can change our headings I'm gonna save this close it and in teams.json we're gonna have to scroll back up and in font families is where we can add a new one just like this after font families after the bracket we have one font and in another set of curly brackets is where we can add the other font so underneath here comma open and close curly brackets and inside here is where we can add the other font and I'm just gonna write it super quickly just because it's easy so I'm gonna do font family and this one is gonna be called Stosio and then we can give it a backup if you want area like so and this is gonna be sans serif like so comma then we can add the slug the slug is gonna be just Stosio and last but not least we're gonna have the name which we can call headings Stosio like so save so this is gonna create a variable for us and we don't have to include it like we did with the source we've included it in the style.css of this makes sense and this is not gonna work just yet so if I was to go back and refresh the page nothing is happening and this is because we actually need to use the variable that we just created and target the headings so if we inspect this go to the body sorry one more time and I'm gonna stop doing this but if I inspect this and go to the bottom you will see that we have the font family insert variable and we have the font family Stosio now we need to use this variable here for the headings and let me show you how we can do that next all right so for the headings we need to go back and we need to be inside styles so as you can see here I've got themes of Jason and stars as long as you click on this this should tell you where it starts and closes so under the typography we can actually target individual elements and to do this you put comma and then you do elements inside the element is where we could target or heading so for example h1 for the h1 inside here we can do typography and for the typography we can do font family and we can set the variable that we just created dash dash wp dash dash preset dash dash font dash family dash dash Stosio perfect close this and put a comma and then we can do font weight if you wish and a font weight I believe is 800 for this one because I want it to be both comma and then we can do line height and the line height can be 1.3 for this and we can also create a custom variable for this and maybe I can show you that in a second and then we can do another comma and do font size and inside here is where we can put the font size for example just for now let's do 42 pixels just so we can see so save this go back to the website and refresh as you can see the font has changed and also the size has changed which is awesome so this seems to work now we should go back for the font size the line height and so on we can actually create custom variables instead of hard coding like so and the reason for this is because if you have variables like them it means that you can reuse them in your CSS anywhere and it just makes things a little bit easier I guess but at the same time it's kind of like the whole JSON gets gets a little bit more complicated let me show you how we can change this into a variable into a custom variable so first of all we need to go back to settings so settings in here I can click on this to locate where the ending is here it is so technically speaking just after this one this settings is the typography the last one that we've written and just after the typography I can add a custom setting let me show you what this means so I can do custom and inside here is where we can create any custom variables so what I'm going to say is the first one is going to be typography and then by the way you can call this whatever you like and then inside here we can put font for example font size like so and inside the font size is where we can have different font size inside the font size we can have all sorts of font sizes now I've already prepared a few but as we are working on the heading let me start with the heading and I'm going to show you the rest so for the heading we are going to be creating a custom variable so let's do heading one for example heading one just to be very descriptive for this tutorial but you can call it whatever you like and then inside here is where we put the size so let's say 52 pixels okay so if I was to save this I'll go back to the website I'm sorry about this but let's inspect it one more time refresh go to the body and then let's have a look at the last variables so as you can see we now have a custom typography font size heading one variable here that we can use so I can grab this go down to styles we install here then we go to elements h1 so this is the heading one and instead of font size 42 I can replace this with variable and put the variable here technically speaking if I was to refresh the page now this should work I don't know if I changed the value let me just inspect this super quickly so you can see that the font family has a variable but the font size does not so I wonder what I've done font size that's actually safe refresh I just had to maybe refresh a couple of times but as you can see now we have font size and if I hover it says 52 so as you can see the font size is 52 which is not great for responsive web design and in the themes.json there is not really a way of doing media queries unless we use tss which means that we need to do something else in order to have responsive fonts so if I was to scale this for mobile of course I don't want the heading to be that big I want this to scale so what we can do is we can actually use the css clamp property and calculate how big we want the heading to be on small screens and large screens so let me show you what I've done I'm gonna I'm gonna quickly bring my design here and if I go here to the left side and zoom out a little bit you'll see that I've already calculated the small heading so this is there for the small screens and this is for the large screens I know it doesn't look very tidy but I've done this super quickly and as you can see we have different rem values this is the small rem value and this is the large rem value now you might be wondering well how did you get to those values first of all design your website the way you want maybe you should design bigger headings and then you should design how you want them to look on small screens and then once you decide and I know Figma works with pixels but once you decide you can convert your pixels all right so if I click on the heading one and if I inspect super quickly you'll see that this is 39.8 pixels so you can grab the pixels and just convert to your rems and this is what I've done and then I've done the same for the small headings now after this what I've done is I went to this website here I went to this website here the clam calculator I will paste this link in the description below by the way and what I've done is I've taken the minimum size and the max size so let me take the minimum size for example for the heading one paste in here and I'm gonna get the big heading size and oops and paste this in here and now this will calculate obviously you can change the values here to suit you and your design but now this is going to calculate the first and I can literally copy this bit here actually I can't I'm going to have to copy everything and then edit it and now if I go back to the theme.json file where the variable is where you need to locate it let's go up where did it go okay here it is topography font size heading one so instead of putting 52 what I can do is put the let me let me make some space so all we need to grab is the clamp here remove this and then I can just replace the value in here and this clamp property is essentially going to help us make our font responsive if I was to go save this and if I was to go back and refresh let's talk with the device toolbar super quickly and look at how my font is going smaller and then when I go up it's going slightly bigger I could have potentially made it even smaller I guess but I like it this way anyway and I think that this works for me so what I've done is I've gone to my design and I calculated every single font so I done it for heading one heading two heading three heading four heading five and I put the clamps so what I'm going to do now is do that super quickly all right let's put common here and let's copy this a couple of times so I'm going to copy one time here remove this and I'm going to copy copy a one two three four I think that should be enough one two three four five six perfect and then inside here I'm going to paste we need to remove the comma at the end by the way and inside here I'm going to replace the clamp values that I've already calculated so I'm not going to waste your time with this calculate your own ones if you wish or post the post the video and just save them if you wish so I'm going to copy them super quickly and paste cool now that we have those values in here we should have the six variables if I was to go back to the website refresh inspect and go to the body one more time I'm going to be continuing doing this I guess for the rest of the tutorial and if we go down to the bottom you will see that we are getting all the topography here one two three four five six but they don't work just yet and this is because we need to go back to the JSON file go down here to elements and we need to add a couple of more elements so we need to add the rest so I'm going to do let's copy this we need to do comma now the comma needs to be yeah the comma needs to be after this sorry so comma and let's copy all of this and for example this is going to be h2 and this is going to be h2 is one h3 h3 which uses the h3 variable h4 h4 h5 h5 and last but not least h6 six save if I go back to the website refresh as you can see they're all looking great on desktop and if I was to inspect and go down they will shrink which is exactly what I want of course if this does not work for you what you can do is use media queries and just target the headings with their unique class names let me just have a look super quickly they do not have class names so you can just target h1 h2 h3 and so on and write media queries inside your style.css if you wish to now that we have this done let's have a look at what else do we need to do okay one thing that I mentioned actually is the line height so the moment the line height here is actually hard coded and if you wish to we can create more variables just like we created the topography font size variables we can create more custom variables and just for this example let me show you one more and we're going to do line height instead so we can do I think outside topography maybe we can do line height so I'm going to do common and then we can do line height and for the line height inside here we can set a couple of different line height for example you can have tiny tiny can be 1.15 we can have small so the small one can be 1.3 and in fact this is what I'm going to be using and then we're going to have medium this can be 1.4 for example and then we can have normal which is 1.6 so I should be able to get this variable if I go to the website inspect refresh it's just easier to grab the variables like this and if I go down we should be able to see it hopefully uh yep I need the small one so I'm going to grab this and go back to the headings so we have heading one instead of doing line height manually here we can do it with a variable and paste the variable inside here just like so and that should work as well so I'm going to copy this and do it for the rest of the headings just so we have it so and safe that should be exactly the same as before so as we are still speaking about topography let's go back to the editing page here refresh this and let's have a look at what's happened as you can see all of the font has now changed as well inside here it looks very pretty the headings are working and everything is looking good one thing that you might notice here in the block panel here on the right side you will see topography and we have a couple of default sizes so we have 13 we have 20 36 and 42 and what I want to show you now is what if you want to add custom ones I don't know if you notice on my design here is that I had also regular text medium text and small text now this actually goes across for the big screens in here that I designed so I'm going to be using those three values to have custom made in here so let me show you how we can do that in order to do that let's jump back into the team.json let's go up and find settings so settings we need to find topography and inside topography this is going to be just outside here so let me show you so just outside the font family we basically want to add another object and give it some properties and the object so as long as we go under font families which is here it's very hard to see and we do font sizes so for the font sizes we can do it exactly the same as we done it with colors so inside here we open and close curly brackets and we do double quotes slug and then for the slug we can do small for example and then comma this can be size and the size I've already calculated to 0.64 rem comma and then we do name which can be small with capital letter now I can copy this three times comma paste comma paste and I can change the values super quickly this is going to be medium I'm going to copy it paste it change it to capital and for the size I'm gonna go with 0.8 and the last one is gonna be regular and for the regular let's go with one rem which is usually equivalent to 16 pixels save this go back to the page refresh and look at what happens to topography now I'm gonna select something and now we only have three sizes we have the small small one the medium one and the regular one so this is how you can change this all right the next setting that I want to have a look is spacing now spacing is kind of important because sometimes in your layout you might want to add custom padding and custom margins this is what exactly spacing does and I'm gonna show you how to add it in team Jason we need to go to settings so here it is whoops a little bit confusing here it is settings let's go down to where it ends we can just add the last setting after is this the custom okay after custom is absolutely fine so we can just do a comma here and we can start with spacing here it is and for the spacing as default it's actually set the padding and the margin is actually set to false so we just need to enable it to do this we can do padding and this needs to be turned into true then we can do common we want margin and this needs to be turned into true common and then we can do different units so units is things such as oh this was nice the auto complete was really nice for this and all I need to do is save and this is going to make it look nice so the units the pixels m's, rems, vh, the vw and percentages of course you can remove some of them if you don't want to but these are all the units and I'm gonna show you how this works now if I was to save this go back to the page refresh all right now if I was to click on any of the elements here you might not be able to see yet and this is because not all elements can have padding and margins I think the headings if we click on them you can go to dimensions here and you can actually change the margin if you wish and you can unlink it if you want to change the top what is this the right bottom and left and you can see here we have pixel but if I click on it we have percentage m, rem, vw and vh so you can change the margin here but let me show you the padding as well so for example I could use a grip for this example so let's drag a group I'm going to drag here on top and for the grip if I click on it you will see that inside here we have dimensions and we have padding so on this group let me add a background color of black and then as you can see here we have padding so I can add 20 pixels this is and it doesn't seem to be doing anything maybe we can add it more okay here we go this added 40 pixels I can go 60 and this adds padding of course I can unlink it and just do it to the top so I can do 10 to the top right it can be just six whatever or zero and so on so we can unlink it and do whatever we want but also if we click on here we can enable margins as well so I can enable margins and do exactly the same thing here 10 or let's say 100 as you can see this moved everything so the margins and padding are now working and this can be quite helpful when you design your layout I'm going to remove this and remove this block and consider this part as done all right let's update this and let's have a look at the next option which is border border is somewhat similar so if you want to enable the border for example you might want to add a border on a container we can do that so to enable the border we need to jump back into settings here and I can go after spacing I can go here so I can do common border I believe that everything is turned into force so we just need to do exactly the same thing as here and turn everything into true open and close curly brackets and inside the curly brackets we open and we start with for example the radius and instead of force we do true common after this we can do color true after this we can do style and then this can be true and then the last one is going to be width and we can put this to true as well save this let's go back to the page refresh and let's have a look on what we can add border okay maybe we can add border on this maybe the button let's have a look if I click on the button yeah we can add border on the button for example so let's say we want border radius as you can see this changes the button what else can we do I'm sure that you can do a lot more things maybe not maybe not here let's add a group or something yeah I need to unclick this click plus and then group okay I'm gonna add a group here and then for the group let's just change the background color to this pale pink and let's click on it and then let's have a look okay we get a lot more options now now we have the width so let's say I want this to be four as you can see this is making a border and let's say we want to change the style to dotted or dashes or dots something like that and then of course we have the option for color so I can change the border color to red then we can also mess with the radius in here like so and this is the border done that's pretty much here and let's delete this and move to the next part so I'm gonna remove this group update and let's have a look what we have next all right we actually done with the settings now and we can look into adding some more styling so for the styles let's look into how we can add color so for example you might want to change your background color and you might want to change the text color so what I'm gonna do is let's go back to theme go back to styles here if you go down you'll find styles and anyway in styles we can even write it here on top if you wish we just need a comma what I'm gonna do is select color and just make sure that you have comma so I'm gonna have this on top here and for the color as you can see we have background gradient and text for the background let's choose one of all variables so I'm gonna do val and this is gonna be dash dash wp dash dash preset dash dash color and this is gonna be dash dash white so this is a default white color that comes with WordPress but of course feel free to change to whatever you like and let's add one more and this is gonna be the text so I want to change the text color to the one that we added and this is gonna be variable and then inside here we can do dash dash wp dash dash preset dash dash color dash dash paperless black let's save this and let's have a look whether we can see the difference now this should be black and now if I refresh I can't really see the difference but I'm hoping that this change that I can always inspect I guess um font size yeah maybe maybe we can just change it to something like let's say red for example refresh all right so as you can see now the text is red and for some reason I was refreshing quite a lot and it wasn't working so sometimes you're gonna have to refresh a couple of times but as you can see this is now red which is good and I can put it back as the way it was all right this was the original so paperless black and if I was to refresh as you can see again let me just save it one more time again it's not refreshing which is a little bit weird maybe I can copy this paste in a new tab nope maybe I can change the background color to red let's have a look save now okay so maybe I can do ctrl 5 f5 okay ctrl and f5 worked so as you can see the background is now red and the text is now the color that we wanted from the variable hopefully if I go back now ctrl z twice save this and if I refresh okay the refresh just doesn't seem to work but if I do ctrl f5 uh that worked earlier I'm gonna make some more change so save save one more time save refresh refresh ctrl refresh come on okay here we go after so many refreshes it actually worked so I don't know whether this is like some sort of a caching problem or a bug but as you can see it's now working and all I did was pit refresh million times all right you'll be glad to hear that the last thing that I'm gonna do in this video is to change the button because I don't like the default button in my design all of the buttons are square so I'm gonna show you how to do that and this is another style element all right as long as we install we can actually target different blocks so what I mean by this is that button is an actual block if I go to the editor inside here are the blocks so there is styles for pretty much all of the blocks but they're also limited so the button is a block that we can definitely target let me show you how we can do that if I go back let's go into styles so let me say all right styles here let's just go back to the bottom here so we need to put a comma and then inside here we can do we can do blocks and inside the blocks we can then target different blocks such as the button so to do this inside the curly brackets here we can do core and then as you can see these are the ones that we can target and in this situation we're gonna target the core button press okay and inside here is where we're gonna put the settings right so for the button I want to target the actual border and let's do border and inside here we can target the color and I'm gonna set it to the current color and also let's target the border radius so here it is radius and I can just put this as zero do I need to put pixels probably not all right let's save this and see whether this makes any changes this is the button here the original button we refresh we refresh and nothing happens I wonder what I need to put pixels one sec so zero pixels save this and refresh okay either way it doesn't seem to be working maybe I can do control and f5 all right I think that this is going to be one of them things that you're just going to have to for some reason it's just not refreshing maybe I can put the question mark again I'm pretty sure that this should work I'm going to keep refreshing and maybe write some finance 12 pixels refresh save now let's write zero this should work unless I modified the actual button didn't modify the actual button earlier oh okay okay this is my fault is because I set a custom radius to this button and now of course this is gonna follow the actual settings on here okay sorry about this what we can do is drag a new button that hasn't been modified of course I could have reset that one is what I'm going to drag it here and what did you go what happened okay button and drag one inside here okay button so this is a default button right nobody no radius nothing has changed I'm gonna update this let's go back to the page and refresh okay sorry about that so this is the default button if I was to change the radius to 12 let's say pixels this should modify all right what about if I was to drag a new button so I don't know whether this is a bug but I'm gonna refresh this one more time oh okay interesting so this all right so now that I've changed this to 12 this is working but the front is not working and I can okay it worked and I can guarantee you that is just one of them things that it wasn't refreshing for some reason I don't know if I'm having a caching problem but it's good that you are seeing this as well but anyway so this is actually working and now if I put it to zero let's say zero let's go back to this page and refresh this now has no border radius and if I go to the front page refresh okay it's doing the same thing again but hopefully if I maybe save something on the page test maybe that would clean it up okay I'm pretty sure that this will work but anyways let's continue and let's do some of the other stuff so for example I want to change the color and a little bit of the spacing of this button so what we can do inside the core button we have the border but then after the border we can set a color so comma color and then inside here we can do background and then for the background let's just say red for this and for the text let's just say pink it's gonna be hard to see and we need to put comma save this let's go back okay yeah this is working so for the background let's do the real background which is variable dash dash wp dash dash preset dash dash color dash dash paperless dash black and that's it and for the text I'm gonna do I'm gonna do va and then inside here dash dash wp dash dash preset dash dash color and then dash dash paperless white so save it let's refresh okay this is looking good this is actually working now and I want to do a couple of more things we can actually define the spacing so for the spacing let's go under color comma and then inside here we can do spacing and spacing is basically kind of like the padding top right bottom and left so we can start with the top can we do that spacing oh we need to put padding sorry spacing padding and then inside here we can do top and then top can be 0.7 m space comma and then we can do right right can be 1.6 m then bottom which can be 0.7 m and then we can have left which is gonna be 1.6 m and we forgot the comma in here perfect let's have a look whether this works okay the button changed slightly that's how I want it we can also change the topography for the button so instead of spacing we can go outside here and we can do as you can see we can do topography and inside the topography we can do font size and inside here we can bring a variable so this is gonna be the regular font size so which should be 16 pixels in all case but it's also one ramp so dash dash wp dash dash preset dash dash font size dash dash regular okay then we can bring the font weight which can be set to both or we can bring a variable we're just gonna actually put 800 in here then because I don't think that I have a variable for this yet but then for the line height we can use the regular one I believe so var dash dash wp dash custom dash dash line dash height dash dash normal okay and to be honest that should be good enough okay I'm not sure about the boat now all right maybe we removed the boat and change it to the normal so I'm just gonna remove this slide sorry about that save it and remove it I'm not gonna mess around with it anymore and for now we should be good to go and start developing some of the components for the website but also later on we might come back to the styles and modify things as we need to all right now we can start looking into developing some of the sections starting with the header on the header we are gonna have a menu and we're gonna have a few pages so for this I'm gonna go back to the actual dashboard of the website go to pages and let's create two more pages so the first page I'm gonna do is about and let's just say this is the about page let's publish this let's go back and create one more and this is gonna be the contact page let's publish this as well and let's go back I'm refresh okay we have the pages in here and now we can start building our head up so if you remember at the start of the tutorial we created a few parts in here inside the patch folder we have a footer and we have a header at the moment they're empty but we're gonna be actually using the full site editing tool to build them and I'm gonna show you how to do that now let's go back and click on appearance and then editor if you click on the WordPress logo here and then template parts you will see that we have the footer and we have the header I believe that we actually need to register those parts as well and I'm gonna show you how to do that right now if you go back to visual studio code and the themes we need to be outside the styles or the settings so it's gonna be a brand new object and we can do this at the end I guess and we can just do comma and inside here this is gonna be custom parts and for the custom parts we need to register two of them the first one is gonna be the header so this is gonna be name header and then we need the area which is gonna be header and we also need title which is gonna be header like so and for the other one is let's we might as well add the footer now I'm gonna comma and then this is gonna be footer let's copy it paste in here three times and just change the title okay we should be good to go and now if you go back and refresh this okay we should be good to go so if I was to edit let's start with a header to edit the header you need to click on this link here and this will open the editor sometimes the editor looks like this and if you want to open the settings all we have to do is click on the cog here and if you want to open the actual list view you can click on here and that makes it a little bit better in my opinion let's add a group so I'm gonna add a new block this is gonna be group let's try it in and the reason I'm adding a new block is because I want this block to inherit the default layout which I talked about earlier in this tutorial and as you can see this contains the header now so it's not for width and inside this we can add another element and that's gonna be a row for example let's add an inside and inside the row we can start by adding a logo so let's grab the logo like so and we can upload the logo right now if you click on this here let me drag that in I've already prepared a few assets from my design a few images on the logo is actually png but of course if you have an svg use svg instead because it's gonna look much sharper so I'm gonna drag this in I know it doesn't look good but here it is it's just a paperless logo that I've made I'm gonna copy this this is the 146 is the width of the logo so I'm gonna select it I'll make sure that this is the image width is set to 146 it looks a little blurry to me but we can always fix this later on I'm gonna leave the default styles here with everything and this is an important one I would leave this on so link image to homepage we want when we click on the logo to go to the homepage and I'm not gonna touch anything else this is good enough we can save this and now let's add navigation for the navigation all we have to do is click on the row here and just click on add block so let's do enough and they might ask you to create a new navigation but because I was playing around with this I think that message is now gone but other than that it's exactly the same all I need to do now is click on the plus sign and this is gonna pop up with the pages that we already have so I'm gonna insert the homepage I'm gonna insert the about page and I'm gonna insert the contact page here they are but I also want a little bit of space between them and I find that really hard to do in here it's almost impossible in fact not sure if I'm doing something wrong but it seems to be very hard and the way I managed to do it is by going to the list view and then adding something here whoops we have a custom link as well I'm gonna remove this and we have the three links now and what I'm gonna do is add a little bit of space between them so I'm gonna add a new block here it is spacer and as you can see the spacer is now added and it does it horizontally so we can change the width to 26 or something like this then we can duplicate the spacer by doing either just click on the three dots here and duplicate or you can do control shift and D now work as well and here is the new spacer I can drag it down and we have a little space between the items now the next thing now we need to do is align the objects so the logo and the navigation we have them here and what we can do is click on the row and we can use the justification tool in here so we can justify them to the middle we can justify them to the right left and so on but this option here is if you're familiar with Flexbox this is basically gonna push both items one to the left and one to the right which is exactly what I want just like so so the menu is on the right side we can allow the wrap on multiple lines if you wish and that should be good the next thing that we need to focus on is the menu let's click on the navigation and let me show you some of the options so again you can justify things here if you wish to you can allow wrap to multiple lines and you can change the hamburger menu so if I go to mobile you'll see that this changes to a little hamburger menu which is pretty cool it doesn't look the best and there is not much you can do about it I guess unless you do a lot of CSS but if you click on it it expands with the pages that we have and to be honest it's not so bad I guess you can add other elements in here to make it a little bit better so what I'm gonna do close this and let me just show you that you can change this to menu to say menu instead or you can have the icon you can't have both of them unfortunately and I'm gonna leave it as it is of course you can change the color the font size and so on maybe the font size can be a little bit bigger but I don't have one now I think I've only have the regular I'm gonna leave as it is the next problem that we're having is the spacing on the left side and the right side that's actually a little bit of an issue and let me show you what I mean so if I drag this here I'm gonna link you to this page as well on github which the issue is open but it's kind of hard to have like padding on the side here wow if you want to have a full width website with background colors it's kind of hard to have the padding on the side as you can see on the header here I don't have any padding there are many dirty tricks that you can do to fix it but there isn't I haven't been able to find a good solution but anyways I'm gonna show you what I'm gonna do and what worked for me and let me show you super quickly the first thing that we can do which is the most obvious thing is to click on the row on the group or the group and start adjusting the padding so I could unlink here and let's say we want from top to be 20 and we want the 20 and let's say I want the left side to be 10 and the right side to be 10 now that's okay ish that could work in some situation that might not work but also it's not super flexible because you might want to have a little bit more responsive so the value changes in a way all right instead of zero is actually let's remove those values and I'm going to show you something very strange right now if I was to grab the rows super quickly and if I was to change the background color let's say we want it to be I don't this pink color look at what happened the same reason this is adding a lot of padding to the left uh on the right and actually it's adding to the top and the bottom but because I've over reading it here it's not affecting so if I was to remove the top I don't think that you can see it but okay there is still padding right if I was to remove this one as well there is still padding but if I was to remove it remove the background no padding went to so this is a little bit annoying and a little bit weird I'm sure there is a good explanation to it but I mean I can see why it's happening but it's a little bit weird so what we can do is use this technique to add padding to the left and right top and bottom but I'm gonna customize the top and bottom to 20 just in case just in case and I don't like the space on the left and the right so what we can do is modify this with CSS later so I'm gonna show you this in a second but first let me save this all right one thing that I noticed is that the header does not match the content and and the putter here as well so before we continue I quickly want to look into this and see what's happening I think my trick of adding padding is kind of failing here but we'll have a look now so I'm gonna go edit side super quickly and all I want to look into is the header so I'm gonna click to go here and then go to templates sorry template parts and then header let's edit the header super quickly and have a look what I think it is is that I didn't add the background color on this section by validator on the row instead and I think that this is actually messing up everything so if I was to remove the background from here maybe my trick is not the best I'm not sure but this seems to work now so I'm gonna go to group and put the background color in here like so and now this is actually adding quite a lot of padding so I'm gonna have to modify the top and bottom myself I'm gonna put 20 if that's possible and 20 at the bottom and it doesn't seem to be doing maybe it's the row that I need to modify yep okay zero or in fact we just remove it we just remove it and that should be it save it let's go back and boom that seems to work if I was to inspect it yep perfect all right now if I go home and now we have all header done so this is actual reusable block that we can we can even copy this actually let me show you and we can add it to or but so if you ever wanted to hand this to somebody else or you want to install the theme on another website you can literally paste this in here this is how it works this is basically for the editor how things are displayed inside the editor as you can see he adds a lot of like kind of like inline styles but then those in those styles are also done on the actual div so they can be rendered on the front end if that makes sense so you can have this now and you can give it to anybody and they should be able to drag and drop this part of the website so let me show you what I mean if we go back super quickly to template part as you can see this is modified if I was to clean all of the modifications that would have wiped out my whole header but because I saved it already in here then it's just gonna default to this which is great so I'll definitely suggest you doing that and now let's have a look at how we can install the header on some of the pages so for example we can go to template go to page and inside here is where we can install the header let's add and then I think this is part and I think that we need to do but this is a little bit confusing here but we need to do part and then we can choose part and then here is the header so I can choose the header from here and here it is I can go to the list view and move it up I don't move it up I'll just try it here we go we have the header let's save it and let's go back to the website and I have a look at what's happening all right this is looking great we have a little bit of space the logo is looking a little bit blurry for some reason but I'm sure that we can fix this in a second but that's looking good and if I inspect it and go down to mobile super quickly you'll see that this is also working we have the buttons and so on so in order to fix this gap and use the background color to kind of create this pattern here on the left and right what we can do is inspect this and have a look at what's happening and what I found out that an easy fix could be to use this here where wpblockgrip.hasbackground and we can modify so if I was to copy this I can go to or code editor go to star.css and add it in here and essentially I mean we could modify those values or I can just do let's say padding left for example I can do 16 pixels if I wish to and then adding right I can do 16 pixels and that would kind of fix the issue I've asked to go back let's refresh super quickly and I don't think that the styles are kicking in so one way to see whether the styles are working they should be is to do control and new style.css oh here it is and if I click on it super quickly see that the styles are not there so if I refresh here here are the styles now they are here all right we have the styles now when I refresh and if I go back super quickly and refresh okay this is now working it's moved a little bit and I'm just gonna quickly try to fix the logo I believe that if I zoom out to 100% it's yeah so it's because I was zoomed in and this is a png that's why we should be using svg so I guess but as you can see it's actually looking pretty nice now the next thing that we can do is create butter for website and I'm not gonna waste too much time on it just because you already know how to create templates now so let's quickly jump on the editor here template parts and then put up let's start by adding a group and this group we need to click on in carry default layout and I'm thinking in this group that we just add a logo so side logo here it is actually and I'm gonna leave as it is and if we open the list view here maybe we can add another group with column there's so many ways of doing it I don't know which is the right way or the wrong way but let's go and add another block and this is gonna be group again okay and inside this group we can add columns so for example let's just write that in and for example we can choose 33% so three of them three columns and I click again I guess and here they are and for this I was just thinking that we add a bunch of links so you can do whatever you like but I'm just gonna add a list item here and I'm just gonna say link one link two link three and so on link four and so on so I want to keep it simple here and I can potentially duplicate this control shift and D and this duplicates it and if I grab this handle here I can drag it to the next row and I can duplicate this one more time and drag it to the next row now of course feel free to do whatever you like and for this second block this doesn't need to be inside this one I'm gonna pull this out get out okay need this out okay this is working now and I'm gonna put this one down and I usually you can just okay here it is if you click on this on the group you can click down and this will put the group down if you're struggling to drag it up and down and what I wanted to do in here is obviously I need to inherit the default layout we could have just put everything in one group I guess so we don't have to do that but it doesn't matter too much and the next thing I want to do is if you wanted to add a little bit of a color here we can do here we go and I add a little bit of filing which sometimes we don't actually want so say this and the last thing that I wanted to do is add a little bit of a copyright at the bottom so I'm gonna do another group and then inside here we can add two elements maybe we can add a row and inside the row we can add a paragraph and I'm gonna say I'm gonna copy a copyright symbol and I'm gonna say 2022 ready and then I'm gonna copy a dot element here and then say build with WordPress and then we can maybe link the RSS so the RSS feed link is usually post-sitemap.xml but I'm not sure whether you need to install the SEO plugin it doesn't matter too much it's just an example so I'm gonna use it like so we can also link this to WordPress but for now I'm just gonna use an empty link like so and later the next thing I want to do is add another item in here and maybe we can just say something like cookie policy and link this as well I'm gonna link it to nothing pretty much but I just want it to be a link and then we can use the old trick where we space we just apply a step between and we can allow wrapping as well so this is fully responsive now I don't fully like how those two elements are touching so potentially on the top one here maybe I can give it a little bit of padding let's have a look I can do padding to the bottom 20 pixels like so it's saving okay that's looking okay a little bit boring with the colors now let's have a look at how this photo looks on the actual website so if you go to the website right now we don't have the photo we only have the header so let's go to edit site click on the WordPress logo go to our template we can go to page and then we can just drag another one template part I'm just gonna dry this at the bottom and then we can choose and then we can choose the photo here okay so this isn't too bad the only thing I forgot to do is to put this inside so I'm going to save it work in a little bit slow for some reason maybe I can restart the server insect and let's go to the website scroll down to the bottom and as you can see we have the logo and we have three columns and if I was to put this to mobile you will see that they're stacking now the columns and so on but obviously there are a couple of issues this needs the padding so I can do the trick with the background and this needs to go inside because it's for it so let's do that first of all let's go back and give this group whatever it's inside so I'm not sure what this is gonna work let's see if I can add background to this okay that works right away and he added a little bit of padding that already looks good and for this row here oh that needs to be inside the grid I can try to drag this in okay perfect and now on this group I can click here inherit the foot lap save let's refresh the front and that's looking professional I would also add a little bit of space for this actually it looks quite quite bad like that so what I'm gonna do is uh where is it here is the editor I can close this one actually so we don't get confused and for this one here I'm gonna add a little bit of padding maybe we add where's the padding here it is maybe we add padding of 20 to the top and maybe we add padding of 60 to the bottom and save let's refresh this and this looks a lot better now one thing that I spotted right now actually which I totally forgot about is the links as you can see these are the default link colors and we can actually change them as well 3d jason file let me show you how we can do that so let's go back to visual 3d code inside the team.json we can go and target the link element just like we targeted the headings so inside elements we can scroll down to the bottom here we can do comma and then we can target the link so inside the link we can target the we can target quite a lot of stuff actually but once I do one hopefully as you can see you have active state focus state hover state border and so on I'm just gonna do the colors super quickly so this is gonna have text the records text like so and we can just put a variable so this can be the this can be the the main color which is which is the paperless black oh I can see it here so I can copy this one here paste it and there and now actually thinking about it let's let's change anyway and let's refresh and as you can see the links are now the black color which is great and of course feel free to do the hobbies and so on so we have a beautiful header we have a beautiful foot in here and now we can concentrate on the homepage all right and let's not forget to actually save a photo because if we go back let's go back here template part and we have the photo so if you were to clear customization this is gonna wipe out everything and your photo will be gone so I'll definitely suggest you to go to the footer and this might be can I copy all of them let's have a look I'm not sure this is gonna happen let's have a look copy and I'm gonna paste this in the photo uh block color yeah I think yeah I think that has done it maybe I should have done it in one block that would have been fine as well but yeah that's done it so technically speaking if I worse I'm gonna show you super quickly if I was to go back template parts and clear all customization this is going to remove everything and set it as default whatever is in the html so if I was to refresh now the photo should be exactly the same as it was but if I was to remove this and just put right let's just put right and refresh it as you can see right but yeah that's how it works definitely a good suggestion is to save your blocks just in case you clean them out and now as you can see this is as default and I've actually done the header as well so I can potentially clear any customization and if you ever want to do customization on top of the default header that you have a footer you can do them and they'll be saved in the database and as you can see you'll have this little dot on top on how this makes sense the footer should be back and we can now focus on the top area of the homepage all right so now that we're done with the page template we only have a header and the footer all of the pages should be exactly the same so if I was to click on about you'll see that we have the header and we have the footer if we click on contact we have the header and the footer which is great that's exactly what we wanted and I wouldn't worry too much about this being full width now the reason I've done it this way is because if we edit this page then we have the option to have stuff full width and we have the option to have things constrained just like the layout is right now and one thing that I notice now is that the pattern is a little bit different here but I can always change this later on let me close this and let's focus on the homepage so if we go edit page let me remove visual study code as well so if we click edit page let's remove all of the items from here so we have a group just because this group is containing everything in the middle of the website if you want a full width you don't take this and then inside this group we have all of the stuff that we don't need anymore so I'm gonna click delete if that's possible no should be possible remove blocks here we go so we're starting blank let me update this and let's go to the homepage all right we're starting blank now and let's build the first thing I want to do is kind of like a big hero image and for that we could use the cover block let's click on this and search for cover and cover is basically an image with text on top of it it's pretty cool so I'm gonna upload a new image and the image that I want to upload is here in the post there's some reason they're not popping up here they are so the image I want to use is going to be this one and they will be linked in the description below let's open it and as you can see the image is looking pretty cool and I can write some text now inside here I can pretty much drag anything this is a paragraph and I'm gonna just write some text let's say explore the most beautiful places to visit this summer and we can also change the color of this if you wish to white let's say this is this is a paragraph so we can definitely put a custom size of one I'm not sure whether we need this maybe we can do a one point two all right this is looking great and let's add a heading for example heading like so and there is another way of adding stuff is all I forgot to show you but I'm gonna show you in a second so for the heading let's say we type I'm gonna copy and paste some places to visit this summer I can centerline this and I can take I can do text white if this works yep that seems okay one thing that we can do is if we click on the actual cover this is really cool you can have a fixed background you can have a repeated background and also you can change the focal point here so if I wish to I can change it like so so it looks a little bit better maybe and let's update and the other thing I want to change is this looks a little bit too dark for my liking so if I scroll down a little bit you can see opacity so we can change the overlay of this which is great and I can just change the opacity like so but now we might have a little of an issue with the color combination because as you can see actually this is really clever it tells you that the color combination isn't great for readability stuff so potentially let's have a look I'm not sure if I like it with black I would rather do this and maybe make it a little bit darker but obviously you can mess around with this so update this let's go to the home page and let's have a look as you can see this is contained which is actually fine this is how I had on the original design but the good thing about that the stuff that I've done so far is that we can always go back and we can always go outside the script so if I was to go outside the script okay like so and if I give this to be instead of none I can give this to be full with let's update it and this is another way of and this just gives you more options I guess and I can always adjust the image a little bit because it doesn't look that great now so I can adjust it like so update and let's refresh maybe there is a fine line here I guess because it's so stretched in my okay that looks fine I guess but the only problem with the full width here is that if you have a big 4k monitor it might not look as great so I'm gonna leave as it is you know how to have a box anyway okay let's go back and have a look at something else let's add a button as well so for example we can press enter and this is what I wanted to show you if you do slash you can actually start off in what block you need which is really helpful so I'm gonna need a button and I can just press enter and just let's say read more like so and we should be able to adjust this button so that's middle and justify center perfect so that's what we want of course we can modify this a little bit I think this needs to have a little bit of space below if that's possible no I probably need to have in container you know container maybe I can do a little margin on the button instead let's have a look no not allowed so these are the things that you're gonna have to look into and work out I guess maybe that's a good idea maybe I can just put a little bit of space so I can do type spacer or separator space I think it would be better I can just do this so this won't be visible on the front end it's just gonna make some space the text isn't perfect obviously but you can always work it out if you when you have the time all right that's that's good enough obviously mess around to make it perfect and let's move on to the next section which is the actual blog post now I actually don't have any blog post so what I'm gonna do is I'm gonna quickly go back to the dashboard and then I'm gonna add a couple of posts with some images and some categories so let's add a new and let's say my first we need to have a category for example let's say holiday is this gonna work yep that's absolutely fine tags yeah let's add some tags actually I'm only gonna do it on the last one so we don't have to do it on all so I'm just gonna add an image for this and let me drag an image I didn't actually prepare too many images so I'm gonna drag two images here that I can use and I can just maybe repeat them a couple of times just to save time okay I'm just gonna add this one here obviously add your alt text and so on and insert this is the first post let me I'm not gonna write anything here as well I'm just gonna do one blog post that has pretty much everything inside it so first one let's have a look this is just another post and I'm gonna set another image here maybe this one publish and that's absolutely fine maybe I can just do I don't know maybe I can just do Australia update it go back refresh and I'm just gonna have to do this a couple of more times I'm sorry about this all right this is gonna be the last one that I'm gonna do and I'm just gonna copy some text for this blog post to make it look presentable and I'm gonna input some images just so it's like a full blog post you know and then we'll we'll come back I've just went to Wikipedia and just copied a little bit of text just so we have something on so let's update this and that's it so we have a couple of blog posts here and we can go back to the homepage and look into how we can add them in here so this is the actual homepage that we are editing earlier make sure that we are all up to date and saved okay the way I'm thinking about this is that on the left side I want to have all the blog posts and on the right side I want to have a sidebar in order for us to do this what I'm thinking is that inside this group potentially we can add a column so I'm gonna add call and the one I want is maybe 70 30 and we can always further modify later on so this is looking okay maybe we need a little bit of padding on top so I can always click on the group here and just add padding on top 20 we can always adjust it later on and then for the left side we can use a query loop which is going to bring some blog posts first so query loop inside here trees pattern for the query lift or star blank let's have a look at the patterns so okay so this is kind of like listed which doesn't look bad at all maybe we can try this one this one looks very good so this is you know I really like this one so I'm gonna use this one here originally I was thinking of something oh that looks that looks really nice as well you know I'm gonna go for this one because this one looks nice so what I'm gonna do let's choose this query loop and this is going to loop a few articles for a blog post so there are a couple of things that we need to modify in here as you can see it doesn't look that great but what we can do we can click on this button here the display settings and we can start modify for example we might want to have four blog posts and now this is gonna give us four blog posts and so on but also what I don't like is how this is all squished so we can always I think that we can just drag this in let's have a look okay so if you click on one of the columns there are two columns here one two so if you click on one of them we can adjust the width so what I'm thinking is if I was to do this that's looking okay but that doesn't seem to look okay I'm gonna put this I probably should have calculated this to be honest or does it just squish the other one let's have a look 39 and 64 no so maybe that can be 20 30 and that can be 70 right there needs to be a little of a balance so maybe we can go to 60 and this can be 40 right and also we can also modify the image here so if I was to click on the column I believe that if we click on the actual image here we can actually change the width and the height so what we can do is if I was to change the height to this I know it's gonna it's actually not squished in here it's good it's covering so potentially we need to find let's say 400 we need to find a sweet spot for this and let me just quickly save and see how it looks maybe we just need to and this is a little bit of a tricky situation but what we can do is let's try to make this one a little bit smaller so I'm gonna make it h4 potentially or h3 h3 looks good the image feels a little bit better now maybe we can say maybe we can say cover that's absolutely fine and if I click on this column here maybe we can align everything in the middle I think that's gonna make everything look a little bit better we can definitely also go to those which column is it those two columns and we can modify them a little bit maybe we can make this one a little bit smaller so instead of 33 let's go with 25 and does this need to be changed let's have a look okay that might just work if I update it and refresh the page yeah okay that's you know what that's looking much much better now the next thing that I want to do inside here I also want to bring in the categories and maybe we can add read more links so to add read more link as you can see if we can just put read more like so and dash it just work show link on the new line that's absolutely fine and the post data is absolutely fine but I also want to bring the post category so to do this we can add new post category here we go post category and we can just drag this in here we go it says Australia I think there is a lot of space and what's happened to the image don't know what's happening to my images maybe I need to update and refresh okay the images are back that's good so that doesn't look too bad but there are a couple of issues I want the image to be a little bit larger kind of like a square so I think let me click on this and let's edit it a little bit more so what I'm gonna do is make this a little bit like that but also we're having a little bit of a problem with the exit here we're gonna have to fix this as well let me refresh and basically I want less exits maybe we need to stop around here I'm not sure how many words this is but we'll figure out so what I'm gonna do I'm gonna jump back into visual studio code and let's open the functions dot php so in order first to limit the exit we can write a custom function here and the function goes something like this function give it a name I'm gonna call it exit length and then inside here we pass a variable of length and turn and then we need to return how many characters we want so let's try with 40 characters and then we'll fix it as we go along and also we need to add this add filter and then this filter is called exit length and I should have called the function something else now because all right maybe we can do custom exit length sorry about this and then we can trigger it here we can reuse the name here because this was already exit length I don't want to confuse it okay so I'm gonna copy a quick comment here and paste it and I'm just gonna give it a customizing the exit length maybe with s cool let's refresh and we have an error on line 50 and this is because I probably didn't close it so let me close it save and go back and that's it it's because I didn't close it all right the exit has definitely worked out a little bit better so what I'm gonna do is maybe go for 30 that's that's working for me I think that should work maybe maybe 25 I'm trying to be picking up all right this is working quite well and I'm starting to like the way this looks in fact I do like it I do like the way this works it's looking pretty clean so I might leave this the way it is and of course I didn't add any other any other text for either post but what I can do quickly is just add some lower revs which I actually have in hand so I'm gonna quickly speed up this video and show you right now that I've added some content look at how beautiful this looks like in fact I was gonna do some further modifications on this and I might show you how to do it as well but this is actually looking pretty good to be honest all right the next step that I want to look into is the sidebar so for the sidebar we've kind of already created this column here if you look into it's getting deep but if we go down you will see that we have where is it column here all right column on the left side and column on the right side so inside this column I want to kind of like make a little profile for the writer that is doing the blog so let's add for example an image and I've already saved an image for this from my original design so what I'm gonna do is drag this beautiful image which I'm struggling to find right here it is it's gonna be this one coffee go I call it so I'm gonna add this this can be a line centered so it's centered in the middle of the column like so maybe we can give it a little bit of a description let's make some and up super quickly I'm gonna add if I can click on this can I know okay no I can't that's weird but maybe I can do the plus sign and do your paragraph and here we go it adds a paragraph or we can do it for here so what I was gonna do is maybe we just say hi my name is my name is Laura I am a professional professional writer and store I'm professional storyteller like so dot and then we can centerline this to make it look nice and this is already looking nice actually let me go to the right side and the next thing I was thinking of is to add a search bar here so oh did you see this plus sign somewhere oh oh here we go it's popping up so what I was gonna do is a search bar we can just drag one in not gonna do anything with this you can modify the but it looks like you can modify the position of the button then you can use even a button icon okay that looks pretty cool I like that so we're gonna put this at the bottom here maybe and instead of optional placeholder let's see maybe like search for articles dot the dot I think that would work we can also change the colors and so on but I'm gonna leave it as it is that needs to be aligned centered just in case as well and let's have a look at what else we can do maybe we can add some categories so what I'm gonna do is I'm gonna add a little heading here and say categories so for this we might have to change it to something small so big h5 that would do categories looking good and I can just do enter and then we can start typing categories okay these are the categories that we added for the blog post so they're looking good so we can display this as a drop down show the post count I like that so I'm gonna leave this on top level now I'm good I think this is already looking good but one thing that I don't like so much is the dots let me update this and see how our website is starting to look this is actually starting to look quite nice maybe I can do it a little bit of spacing here but these are minor things and I don't like how much I don't mind the bullet point so much but I don't like how much padding there is on the left side and unfortunately I don't think that there is a way of modifying this so the only way I can think of is to actually inspect this and find what class is here so for example WP block categories is what we could potentially use to modify that means that if we modify the every single list with that class name then this is going to be on the entire website which I don't really want so I actually want to make this little list unique so what we can do is let's go back and if we click on the actual category list we can go to advance and we can give it a specific class name that we can start so for example let's say category sidebar category sidebar let's copy this and let's update it let's go to the homepage refresh nothing happens obviously and let's quickly go to the quick to the editor and then let's go to star dot css and add a round here so this is going to be a class name of category sidebar and we can just modify some of the margin and padding and remove the list so let's do margin of zero adding of zero and then we can do if we want to remove the bullet points we can do list style type and then save this of course we can put nice informative comments in here such as category sidebar and if I go back and refresh um nothing is happening nothing is happening I believe that this is because it's probably cashed the css again so let me try control and f5 okay control and f5 worked but I also don't like the spacing between them so maybe we can modify that super quickly so we have a list and maybe we can just do maybe we can just do padding bottom on the list or margin whatever let's have a look let's add this for now so for category sidebar we can copy this and we can do inside here we have a list and for the list we can do padding bottom of 10 pixels for example let's okay this seems to work and we can modify just like this and the only issue with doing it this way is that if you go back to the actual editor and you refresh your backend website will not match with the front as you can see we still have the points the bullet points here but if you go to the front we don't so that's one of the downsides I guess but I would assume that but I would assume that at some point we'll be able to modify absolutely everything and make the websites the way we want the last thing I wanted to do is play some sort of an alphabet here so let's go back and add something else so I'm going to do enter maybe okay yeah awesome and I can do image like so and I can just upload the image that I've prepared for that so maybe your block has an add I'm going to do this have it in here every center line of course you can link this to your art I'm going to put a link like so and press enter update here we are we have a little add and the spacing is a little bit off so definitely could add a little bit of space let me add spacer and we can just put this on top update yep something like this that would do the job all right our homepage is more or less done now of course there is so many things that we could modify and let me finish off by showing you how we can create the other pages and how we can create the block place so for example for the other pages will be exactly the same as we done just here so what you want to do is go to about click edit page and you can start adding columns and what's not if you don't want your page to be full with as I showed you earlier in this tutorial you can go grab a group and just tell this group to inherit the default layout now I can drag this paragraph in here inside the group if I try here we go if I update it and if we go back you'll see that the page is now here and maybe we can do this page as well later on depending on how time goes first of all let's quickly look this into mobile view so if I was to scale down everything seems to work and everything is stuck in this seems to work quite well but one thing that you notice is the spacing issue here as well let me remove this so you can see a little bit better but yeah the spacing issue is still there which I really don't like so what we're gonna have to do is let's go back edit the homepage and click on which is it I think we need to locate it this this group here potentially yeah if we give this group a background color of white it gives us the little spacing go back refresh and now our website is a little bit more aligned but now I like I would like this box to be a little bit wider maybe I'm not so sure maybe like so I don't know I'm being too picky now I don't know maybe a little bit wider it doesn't matter too much you can always mess around with this and make it a little bit nicer all right before we continue with anything else there are two other things that I wanted to show you and one of them is that we can actually further modify this we can add the order in here we can add the date and things like that and also I totally forgot to add pagination so let me show you how we can do that we go back to editing the site so I'm going to click edit site and the first thing that we can look at is how we can add more stuff in here so for example if you want to add the order you just drag the first order in here and that should work straight away you might not want to have the image you can just remove it and this will give you the order and the same thing you can do with a date so if I press enter I can just search for date like so first date and that would give you the date and so on let me just show you super quickly it won't look very nice the moment but I could potentially put them in one row and fix some of the spacing and I think that actually could look pretty nice so these are things that you can further modify if you wish to make your site better but I'm going to remove them now and save this and one last thing about this you can actually modify this through the teams.json file as well and this is called query loop so if you were to go back in visual studio code super quickly and open the team.json file locate where your blocks are so in styles blocks we have them in here as you can see the last one the top one we have is the latest post that we modified but inside here you can find some other settings for the query loop so if we do call slash query you can see that you can modify the actual query loop entire thing I believe then you can modify the pagination the pagination name numbers previous title quote pull quote and so on just to show you an example I haven't messed around with this too much but just to show you an example let's go with the query and inside here if you don't know what the options are obviously you can start tapping double quotes and let's say we want to change the color right let's choose color inside color we can do background gradient text I'm gonna go for text and I'm just gonna put red for this example so let's save this super quickly let's go back and refresh as you can see this is now changing the text as red and I believe that you can do some modifications to the other elements such as the title but you'll have to mess around and figure it out all right the next thing that I wanted to show you is how we can add the pagination now the pagination is a little bit tricky to add so what you have to do is go here select the query loop and inside the query loop there is gonna be this plus sign here so hopefully if you start searching for pagination it should come up is sometimes the first time I've done it it just wasn't popping up for some reason but if you select the query loop then click the first sign it will pop up and here it is of course we can a lot middle and maybe we can justify it to the center like so and also maybe we can just give it a little bit of padding on top can I do that nope but it looks like you can change the arrows here which is pretty cool but you cannot give it any padding which is which is weird I guess what you can do is put this into its own row and give the row a little bit of padding let's see how this looks anyway it might be just fine all right this is just fine of course you can further modify this as well with the theme.json as I showed you just a few seconds ago but I think this should be good enough all right the next thing that we need to focus on is the actual blog post so if I was to click on any of the current blog posts that we have for example this one here you will see that we have empty template single post this means that we need to modify our template and design it the way we want to display the information now I've already got an idea how to do this so if I show you quickly my design here what I want to do is I want to have two columns one on the left side here and one on the right the right column is going to have the title we're going to have by the Saudi water the date that it was created and manually I want to insert how many minutes this is going to take to read and also on the left side here I was thinking of something like table of content I probably won't do this because that's going to need a plugin and it makes things a little bit more difficult which you'll see in a second but we can maybe do the latest articles and maybe an advert and so on so this is the plan let's jump into the website quickly and have a look what we need to do so if we go back to the website and click edit site we need to navigate to the template so we can click on the WordPress logo here and go to templates and the one that we need to edit and the one that we need to edit is the single post all right let's click single post and let's start by adding the parts so I want to add the header and the footer so part template part I'm going to click it twice so we get two of them and then if I select the first one here I want to choose the header choose that and then for the second one I want to choose the photo that we created earlier so let's save this all right to bring in the post content let's toggle the blocking setup and let's first of all group everything so I'm gonna create a group click on this and this group needs to be above oops needs to be above the footer and below the header and I'm gonna click inherit the full layout so we have all layout in the middle so inside here is where we can add some of the article stuff such as the title let's say title and we need the post title so I'm gonna click on this and as you can see this comes up with post title and we need one more so let's click on the plus button and search for actually that's search for post all right this is not working we need to maybe press enter and type slash and then post what do we need post content all right this is gonna bring the content and let's have a look what we have so far so I'm gonna save this and let's go back to the website so if we click on the first article here you will see that we're getting the title and we're getting the content from the blog post and of course if I edit the blog post we can modify the title the blog post and so on so that's perfect we don't have to do anything here we can go back and we can continue developing all that so what I wanted to achieve is the two columns to do this we can go into here and drag a column let's click on column and I'm going to go for 3070 and then we can modify it so the left one if I select the left column this can be 25 just so we match the homepage and the right side can be 85 like so I think that should be fine and what we can do is put the title in here so I'm gonna grab the title and put it into the second column and also need to grab the post content into the second column here all right this is great but this needs to be moved up and that should be the first step if we wanted to let's refresh this okay this is looking great but if you wanted to create this dead space in here I don't know which way I prefer it but if you wanted to create this dead space in here we might have to create this in a separate column what we can do is duplicate the columns here and what I'm going to do is delete this post content from here and delete the title from here so now we have an empty column here we have the title and then we have the other column here let's add the advert for now so I'm going to do image and then the advert is this one here select there and save so if we were to refresh this is kind of already looking like all design but I want to centerline this and I want to add the rest of the stuff so let's click on the title we can click here add align text center that's the first step and then on the left side maybe we can add some more stuff let's add the you might also like so I'm gonna add a heading and say you might you might also like and I'm just gonna put the I'm gonna make this as h4 maybe h5 yeah h5 looks a little bit better and then I was just gonna do now I was just gonna do latest post like so and that's it so I'm gonna move this at the top here and I'm gonna move this as well and save let's have a look at what we get now all right we're getting close and now one thing that it's going to be a big issue obviously I want this part here to be part of the template so we don't have to add it to every single blog post but unfortunately we won't be able to do that what I mean by this is those two values here so they're coming from the database and their dynamic so they will work I can make these these two as a template and they will work but this won't work because I need to modify this on every single article automatically let me show you what I mean let's develop this and we'll figure out as we go if we go back and develop the next section so I'm gonna go inside this column here the top columns inside the right side column let's add a row so I'm gonna click here and let's look for rows and inside the row I was thinking of grouping every single element into its own container and the reason for this is because I noticed that the autoblock has the padding functionality but for some reason the date does not which is a little bit of pain so what I'm gonna do is add everything into its own container and to do this we're gonna have row and inside the row we're gonna have to have another row so inside this row now we can add let's say an image and media library and I've already uploaded the three icons that we need so this is gonna be the user one I'm gonna select this I did choose PNGs but obviously if you have SVGs that would be a little bit better so what I'm gonna do next to it here if I can it's a little bit hard so what I'm gonna do is I'm gonna add a new block from here and I'm gonna say order so post order is the one I need and that's it the important bit here is that we need to click on the row the row this one here and we want to centerline everything so align middle and also we want to justify item center so they in the middle here that's great what I can do is add a little bit of padding to this row so we push the other item so inside here we have the row let's add a little bit of padding to the right I couldn't figure out a better way of doing this but this should work just fine so I have some padding and now we can duplicate this let's do click click here duplicate for control shift and D and now let's replace this with the date it's a little bit hard okay let's change the image first of all replace and then open media the date here we go that's cool and it's a little bit high oh here we go I can now click here and do date so post date is what I need and that's done let's add one more so I can copy this row one more time duplicate and then inside here we need to change the image place go with the time and then let's go so this has to be a paragraph because it's gonna be written manually so I'm gonna add a paragraph and let's say this post takes nine minutes to read like so but also because we added padding to this row there might be offsets the left a little bit so I'm gonna do is click on this row and remove the padding on the last one okay that looks like a little bit more scented so if I was to save this and go back so we have one problem here I forget to remove the image let's go back let's click on the post order and remove the image by toggling this off save it and let's refresh one more time all right this is not looking too bad actually the only thing that can spot is that none of these things are aligned well so I'm gonna have to fix that let's inspect there and see what's going on if we go to the actual image here bigger wp block image is the class name you will see that this image is kind of like pushed down what we can do is try to reset the line height on this class so what I'm gonna do is try line height and then zero as you can see this works and now what we need to achieve is add the line height to this class name but we also need to make it unique on only on this row so I don't want this to be affecting every single wp block image so what I'm gonna do let's grab this first of all go to allstyles.css and somewhere here at the bottom inside here we're gonna do line height and set it to zero now to make this unique what I'm gonna do is on the click on the row here so we need to be on the outside row the one that's wrapped in everything this one here and if we scroll down on the right side and we go to advance we can add additional class names so what I'm gonna do is either unique last name for this row so we're not affecting anything else on our website so let's go with something like post information and then we can copy this save and then let's go back to the style sheet and just paste this in front so we are making this very unique and this basically fixes the icon alignment let's save this and go back refresh the actual page and as you can see this is looking a lot better let me show you the problem I was talking about earlier as of now this is dynamic coming from the database this is dynamic coming from the database so if the article was written in an earlier date this will obviously change but this was written with a paragraph which is not ideal so this is gonna be exactly the same on every single blog post if I was to go to this one holiday in Austria it's gonna be exactly the same which is a little bit of a problem so one thing that you can do is remove this all together and this will be absolutely fine your template is gonna be working well if you want this on every single individual blog post it's not ideal but what I figured is that we can actually copy this row copy here and I can actually delete it from the template so move save I know it's not ideal and now if I go to a blog post for example this one here I can edit it and I can paste it that's the only way I can think the easiest way I can think but it's also not the best way so I can put this article takes 10 minutes to read update and we should be okay with this place so if I go back refresh okay this is not too bad obviously there is a little bit of a alignment issue that we can fix but it's not a huge deal I think that the but I can be fixed the issue is that now if I go to another blog post say this one it doesn't have it so you have to kind of like copy and paste this every time which is super annoying so let's do it one more time just to show you I can paste it in here and I can say this is I don't know six minutes to read and let's go back and boom we have it ready this was when the right article is written and we have six minutes read if I was to update the date let's go edit post that should automatically update let's say this was published on the fifth let's update and here we go he actually updated here automatically which is great that's one of the way of doing it the other way of doing it is just removing this what I'm gonna do for now is just actually add it back here and what I'm gonna do is remove the time so and just get rid of this and that should be a little bit more dynamic and now we don't have to oops and now we don't have to now we're gonna have a double but we don't have to do this every time so I'm gonna remove it and let me go to the article as well okay this is the one that we want so oh okay that's absolutely fine so the same goes for the label of contents for wanting to do that I'll probably create a plugin or use a plugin that is already developed I don't I haven't explored this but you can search for plugins and maybe just drop one inside here and hopefully that will automatically pick up the headings of your site and populate and I have seen quite a few plugins that do that but I'm gonna skip this part here now if we were to go back to the website the reason that I went with this design in particular is because I wanted to make it a little bit more complicated and show you some of the disadvantages that we have with the current editor all right so we have this column on the left side and we have this column on the right side so what's gonna happen is when we string the browser this is gonna be at the top and this is gonna be at the bottom which is not what we want so let me show you what I mean I'm gonna scale this down super quickly and as you can see oh I forgot to add the padding as well but as you can see the title is at the top because we've added this in his own container and column but then we have the sidebar here which is not what we want and then we have the actual article I actually want to reverse those two columns when we hit mobile and let me first fix the spacing and then we can figure out that so if I go back super quickly if we click on the group and if we add background this is the hack that we're using today save there we go perfect now if we inspect go down perfect if we were to go back to the editor you will see that there is nothing that we can use to flip those columns I wish there was like a flex option in here somewhere that you can just say all right stack on mobile is pretty cool but I also want to reverse in mobile and we can't do that unfortunately so what I'm gonna have to do is add a custom class and modify this way unfortunately let's grab the column here give it a class name so I'm gonna go here advance and let's give it a class name here I'm gonna say flex reverse order you can name it whatever you like and I'm going to copy this and save so if we were to go back and inspect all out super quickly you will see that these columns have a look these columns are actually already done as flex and we have the class name here that we just added and all we need to do is use flex direction and reverse them for mobile let's go and do that inside here let's add another line give it this class name of dot flex reverse order in here all we need to do is flex direction and we need to do column reverse so let's save this and this is probably going to break the layout okay as you can see now this is at the top and the column is at the bottom and the reason that this is breaking the layout is because it's telling that this is a column and this is a column so they're just stacking in order to fix this issue we can wrap it in a media query that only works on mobile let's go back and wrap this in a media query so add media only screen and and then we put max width and something like seven eight eight pixels and then inside curly brackets we wrap everything like so and push that in so I'm gonna copy a comment and say this fixes block post block post mobile order if I was to go back refresh you will see that this is working and if we toggle the mobile view let's go back let's go down sorry and we have this at the top we have the article just like the way it should be and so on so this is working perfectly fine with some hacks obviously the front page was easy because we have this column on the left side and we have this one on the right and when they stack that's the way one I want them to be a mobile first and then that to stack underneath which is perfect but when you reverse the layout obviously it becomes a little bit tricky and I forgot to remove this edit post remove update cool let's refresh and let's go to the one because he has a little bit more content so I also want to add the block tags I'm not sure if I added any so I'm gonna click edit post and let's go inside here inside post we can go to tags and let's add a few so we can say this is Australia we can say page explore Sydney and so on so add a couple of tags and update this if we go back obviously the tags are not displayed anywhere but we can add them in the template so I'm going to go back to the actual template and underneath here is where we can add them so what I'm going to do is add and then we can just search for tags post tags is the one that I want so I'll click on it and this should insert the post text but I also want to have a little bit of a description what these are so what I'm going to do is add a row and inside the row is where I'm going to add a paragraph so let's just put a paragraph and what I'm going to say is tags like so and then we're going to put the tags next to it let's drag that in so we have the row like so done we have the tags and we have the post text if we refresh go back and as you can see we have tags Australia beach explore Sydney and you can probably modify them as well I assume if you go to the theme.json it's going to be under blocks and then maybe it's going to be core slash tag cloud yeah you can modify so tag cloud I'm not sure what the options are so border color elements filter spacing topography okay not so bad there is quite a lot of options that you can try to work with and modify them to adjust them the way you want I'm going to save this and go back the next thing I want to add is comments and replies to do this we can go back and add them underneath here so let's comment so common loop query might be the one that we need and there is also post comments form but I think this is the one that we need let's click on this and that's looking interesting okay this is looking good but I actually put it but actually went into the row so I'm gonna have to go back and drag this outside this row if I can it's gonna be hard we need to drag it inside here I'm gonna drag inside the column and then push it down like so okay that's looking good save save let's go back and as you can see this is actually looking really nice it's the button is looking really nice I really like this so this is perfect the other thing that you can mess around with is maybe you can have the author in here and I'm what I'm gonna do is let's go back super quickly and add a super quickly so post author I don't know where you went let's go and hear it no where is it I'm trying to find out here it is so I can just move it up and I just want it to be above the post comments and so on so we can say show avatar show bio we can change the text and so on let's have a look at how this works it looks a little bit small but what I can do is just give it a little bit of space between so I can click on the post author and have a look at dimensions so what I'm going to do is a little bit of padding everywhere maybe we can do padding of 20 everywhere and can I give it a border can't give it a border okay so this is a little bit annoying but what I can do is add it inside the row and now I can add the post author order inside the row and now I can give the border on the row here we go so we let's say you have one pixel shall we try dashed and then color can be the theme color here radius I think I'm gonna leave as it is let's save this we need to push this a little bit so maybe margin on the top let's have a look padding and margin so I'm gonna put top to be 20 pixels and is this bottom okay we only have top and bottom here interesting save refresh this is looking a little bit better the text can be definitely bigger maybe we can look into how to do this right now but what is this called this is called the post order this is another issue that we're gonna have if I was to change this into the themes.json file I believe that this is gonna change on the entire website so if I had this on the front page here let's say here I had the order or even so if I go back to the actual block post here that might mess up everything which is not what I want this is a little bit of a disadvantage I guess but there is not much you can do unless you actually give this a specific class name and modify it or of course you can just create a custom block that's cool I'm gonna leave this as it is because it's already looking pretty decent and let's click on this one here and have a look all right this is already looking decent this needs to be changed a little bit but I've already showed you how to add classes how to change them and so on all right I think this is gonna be it for the block post and now let's have a look at some of the pages so the pages we've already kind of done so the pages essentially have a very simple layout we have a header and we have the filter everything inside is the actual page so if I was to click on about you will see that we have the header and the footer so inside here is where we can create a quick of our page I can just edit it and maybe we can just do like before we can do two columns columns split them into we can do the left side to be 25 for example the right side to be 85 we can add an image let's say image and then media library I can you see the really nice image here let's copy some of the information from the front page maybe we can just write in here so I'm gonna write a paragraph I manner is Laura and I can even do this as I don't know instead of pixels let's go with REM and I can just do two REM I don't know something like this will do maybe you can add a contact form and so on and if we go back you'll see that just like so oops I forgot to remove this but if we wait for the page one more time let's remove this super quickly and just like so we created I know it's super basic but we created a very very very basic about page and just like so we can go to the contact page and do the same so if I was to edit this we can go inside here remove this we do need a container we do need a container here so group click on a and inside the group we can add the heading let's say contact page or even you can add the title I think let's have a look so post title yeah you can add the post title and that's just gonna bring the the name of the page so let's do it that that way and after this you might want to have a form but I don't think that there is any forms in let's have a look I don't think that there is any forms installed on in WordPress so you can use a plugin for the form you can use something like contact form 7 save this let's go back to contact as you can see we have contact but this is not in the middle so if you go back click on the group inherit default layout we also probably need to add the background so now that should be fixed all right so obviously inside here we can add or oops this looks a little weird we can put this paragraph inside the group and we can add or form and contact details like so refresh you can definitely install contact form 7 if you go to the dashboard super quickly and go to plugins search for add new you can search for contact form 7 contact form here we go contact form 7 and we might as well install it so this is now installed activates it and hopefully there'll be a block that we can just drag in let's have a look so I'm gonna have to refresh this and inside here let's do contact form 7 drag it in and just choose the contact form one which is the default one obviously I'm not gonna edit it right now and like so go back refresh and just like this we have a little contact form I think that this should be good enough for now let me know if you enjoy this sort of content let me know if you want to see more and thank you very much for watching if you enjoyed the video hit the like button consider subscribing and let me know what you think of the editor in the comments below I'll see you in the next one thank you