 Welcome back to the channel in today's video. We're going to continue building the layout of our website As you can see that we have the mock-up here Then we also have what our site is starting to look at here So if you missed the last video, please go check it out to see what we need to get to this stage Now I'm basically going to lay out this with bootstrap and then eventually we're going to start adding in the little bits and pieces That are dynamic in terms of nature. For example, this is static code that is here But we shall use the customizer to add this so that we can always quickly change it It's not going to be so many words of text So we'll use the customizer for that and then we are going to use some dynamic placement of our products whether they are variable or they are simple and We'll put them in a pop-up that allows us to select a couple of things The other thing that we'll do is have this mini-cut showing up in the side So if you want to see how we are laying this out, this is the video for you to watch Let's start coding. From our previous video, we've been working on our front page.php file and We've been working with the functions.php to enqueue the scripts and We've done a couple of theme supports and we've added things to our footer and to our header So I'm going to continue with our header because we've not finished adding the logo in the right place And of course from our sketch, we've not added the help sign and also the login for our Customers, so I'm going to start by doing that So we already have a structure that is sort of similar with what we have here With the orange background kind of thing. So we're going to lay out our logo right here Just below this will have our help button right here and we shall have the login button also showing up here I'm just going to duplicate this right under here So that we can use it then I'll make some real estate from my editor And then what we're going to do is we had this sentence begin from here We are going to cut our PHP that echoes our image And then we are going to add it in this location. So I'll just do this hit enter And then I'll tab all of these two Go in a level deeper and I'll just clean this out and then I'll save this So once we've added our logo here, we have also a button that's showing up here And we just need to add this little help statement showing up here So I'm going to take away from this and make this five and then I'll duplicate this to make it one So that we have just one column I'll close this div and then inside here. We're going to have our help So open a span and I'll call it help Now of course our help is going to be leading somewhere So it would be good for me to just add a link. So I'll add an href For this to work and then I'm going to close this off Now, of course, I want the whole spand to be clickable So maybe I'll style it later, but I'm going to put it inside our html Cut this put it in here makes sense for me to just add a pound sign We'll make this dynamic a little later. So I'll save this header Come back here reload And you'll see we have this now. This is with an orange background We do not need that orange background. So all I need to do is just take this off That CSS part that makes this orange reload it We have our button here. We have our logo. We have our help now We can individually Streamline this to make the proportions correct and we're just going to use CSS to do that So I'll add some CSS to this and call it help Button and we have our logo here with the source holds and we can add a class logo image to it So I'll call this image logo Save this and then we shall go to our CSS and access that so assets CSS go to this style We're now going to add our image dash logo and we need to also get our help button From there and add it to our style So these are all individual classes. I'll add some things here What we're going to do with the logo will give it a width will first of all display it as an inline block To allow it to have the properties of being in line and also the properties of being a block So inline block. I'll give it a width of Let's just go back to our style here and look at this So right now this has a width of 200 I'm just going to drop it a bit to 150 and then we'll allow the height to automatically Do its thing. So call this height and I will say auto height Save this and I'll come back and reload and we see this is a little smaller and looking a little bit nicer now with our help I'm going to use of course what we have here So we know this call one spans all the way down and it's a flex element And then we have of course our a tag here Which is not flexible. It's not going all the way a hundred percent So I'm going to just come to this help button. So with our help button, we're going to come and display We're going to help get our help button display flex We are going to go for the width of a hundred percent And then after doing that, we're going to also get the height Of a hundred percent then we shall place items in The center and of course, we're going to be targeting the a tag So we'll go back and reload our page when we reload you'll actually see that This a tag is going all the way a hundred percent in terms of heat and height But when we go to the span our span is only taking up the space that it needs to Take up so I just need to make that take up a space of a hundred percent And then I'll be able to make it align in the center So I'll go duplicate this help a and then I'll target that span specifically and I'm just going to say display block And then I'm going to go for width a hundred and then I'll just change this center to Text-align center set this Come back here reload and you'll see that our help is actually in the middle and our a tag is actually filling up So we have this in the center and that sort of makes us happy now I don't like this stay connected being here. I think it's misplaced with also this being right here So what I'm going to do is just take away this stay connected. I'll come back here Look for this class. I'm going to take away this You don't need it anymore. And then I'll just increase this by two and make this eight. So save this Come back here. Let's reload and you'll see that that looks a little bit nicer than it was before So we'll make a bit of those clean changes along the way as we lay out But right now we need to get everything else stacked in as much as possible So we have our logo. We have our help. We have our button Maybe I'll give this button our orange background. So copy it Come to our button here Save this Reload. Yeah, that's orange as we need it We'll we'll do more along the way depending on how we want to refine all those pieces Now, let me put our image that we're going to need right here Then I'll put in the next pieces. So remember we are using bootstrap to do all of this now We can use this whole container fluid. So I'm going to copy this And then come to our front page here. I'm just going to close the PHP Open this PHP again And then I'll paste this right here I'll tap it in a little bit and Allow us to do much more. So what I'm going to do is take out all these pieces because we don't need them According to our design, we don't need anything in here. We just need to have our container fluid Then we shall put in our background image So from here, I'm going to take this out as well Now, do you remember that in our functions? We added support for a custom header We can now go to our wordpress and just pick this code for the custom header and use that So I'm going to come here look for custom header on Google We'll go of course to our handbook the developer handbook and in here Of course, you can see that you can add more details to the custom header by adding a default image You can add a default color a width a height and so on So what I want to do is just get this image and throw it on the front end So all I need to do is just get this tag That we have here. So I'll copy this Come back to our front page and I'm going to paste this here and I'll just tab this right here So you will see that we have if we're getting the source for the image as image header right here We're also getting the width that we can describe by adding more properties to our theme support for the header So you can add a flex width You can add all these different things all together and you can even add a default image So that when people install your theme, they are not automatically lost But they get something that they can use so we can adopt this and add it to our functions the PHP If we want to make it a little bit nicer So let me also go and pick this up And then we shall replace it with our custom header here Of course, this will allow us to do much more so for the width I'm going to look for an image that's over 1200 in terms of size and then the height We're going to look for something that's about 300 a lot of flex height and a flex width and then in our directory I'll add a header to JPG so that people can always start with something So in our images, we just have only this file which I used to show in our Mac down In our read me file. Let me go to unsplash And I'm going to pick an image from there So let's say maybe we want to get this bottle. I'll download this That's about 1200 I'll save it on my computer And I'm going to come and add it here inside images. So I've added this image in here I'm just going to rename it We're going to rename it to header dot JPG It will remain like that and then let's go to our front page save this Come back to our front page Then try to reload this and see what happens. So we have an image right here That is supposed to be loading, but it's not loading I'll click to inspect it and we'll see that we have our image That's not showing up because we forgot to add the word assets right here So I'll save this. I'll add assets images header the JPG come back here and reload it And you'll see that it automatically gets resized to a height of 300 and a width of 1200 So what I'm going to do is just add some CSS to make this look a little bit nicer Of course, we want it to blow out and go full 100 So we need to add some CSS to that. I'll close off these other files And then I'm going to come to container. So we're going to come to our image here and we'll add a class Of image fluid Then we'll get this take it to our style Image fluid should just display or inline block since we want to use also the properties Of when it's in line then what we're going to do is we're going to choose to have this image and we want it to cover So we're going to go for object fit and we're going to choose cover in this particular case So I'll save this I'll come back here and reload this And you'll see that our image is starting to look nicer. It's just fitting in the height that it's been given However, it's not completely filling all the space that we need here. So So what we want to do is actually we want want to remove this margin right and left The padding right and left and just leave this to consume a hundred percent So with our container fluid, I'm just going to add and Full width container I'm going to copy this Of course save this come back to our style and then I'm going to make this modification to our bootstrap style Now the reason I did not make this Standalone is because I still want to use the benefits of bootstrap But I can still modify it and make it easier for me to do So what we want to do is actually we want to remove this margin right and left The padding right and left and just leave this to consume a hundred percent We want to make sure there is no padding. There is no margin to the right and left And we want this to go full a hundred percent all through So we'll come back to our style here We're going to say margin And we're going to say zero. We don't want any margin on it We don't want any padding. So we'll make that zero We want it to go with a hundred percent Now, of course, we'll just add mean dash width to make sure that it's always going to go a hundred percent So I'll come back here reload what we have and we'll see that our container is actually maximizing all the space however, the image is not taking up all the space and Now we need to just get that image fluid and give it a hundred percent. So I'll come here Copy this mean a hundred percent Then drop it here Come back reload And our image is going all the way through as we wanted it to Look like right here. So you can choose any other image, but this is the default image I wanted to have inside My default thing now, of course, you can have this image trimmed to make it more optimized It doesn't have to be all full a hundred here So you can make it trim to three height of three hundred And of course you want the width to stay above 1200 pixels Because that's what we started in our functions with php That that should be the minimum that we have of the image Now Since we're using dynamic header here from WordPress Let me log in into the admin. So I'm going to come here Open my admin This is a little app that I'm using to give me a local server I'll log in here And then I'm going to come to my customizer. So I'll go to appearance go to customize And you're going to see that we have header image in here And of course by default we have this But what I'm going to do is I'm going to hide this image And then I'm going to put a completely new image So let's I wanted to use this picture image I can just click select and crop of course if you want you can crop it But I'll skip the cropping for now And then I'm just going to add this image right here and it's taking up all the space I'm going to publish this Come back here to our front end reload Now once this image is loaded you're going to see that it's really huge And you'll see that it's now going out of proportion And we just need to do a couple of things to remove this now first I'll inspect this to show you where the problem is And the problem is that this image is getting a width and a height Which are coming in from what we echo here. So we have a width We have a height. So all I'm going to do is just come And take this out from here And save this That's going to take away the problem of the height and the width And then what we are going to do is come back here reload this And you'll see that You'll see that we still have a bit of that problem But we've taken away the width and the height And now what we are going to do Is come here of course add a height to our image fluid Add a height of 300 pixels And I'm going to change this into a block style And then I'll reload this here And you'll see that now we no longer have the image running into the other side, but it's Right in the middle. So let me try to change this again So that we can see whether all images now will fit in Irregardless remember when you're making your particular theme you have to Make sure that everybody else can fit in Irregardless of whatever image they come with so I'll skip the cropping So you'll see that even if this image was really tall it automatically fits in here properly So I'll hit publish on that And then I'll leave the customizer come back to the front end and we have our image Showing up properly right here Now you can see there are small things that you can make changes to to give this a nice feel Like add some padding right here So that particular part is just coming to the header Look at the code that we have here and this should be in this Particular place and you can add some padding That should be the padding top and the padding bottom So what I'm going to do is come here to this Add a padding top of five And then add a padding bottom of five. So I'll save this Come back reload And you see that it's really really a lot. It's not what we are looking for I'll just add maybe two to each Padding bottom and padding top And that's at least better than what we had Before so this is better gives it a lot of breathing room Now let's work on the next section, which is going to become really interesting So I'm going to just skip this piece because we don't really need it And then we'll just go next to our navigation tab here And of course we're going to have our cut menu showing up there So let me split up this here and we're going to have just about two or three of what we have here Now it will look better as the screen becomes wider That will look better, but we also need to consider when screens are a little bit smaller So that's where bootstrap becomes a really good thing for us to look at I'll close this inspector and let's see we have a proportion of about Seven to three if we are looking at ten so seven parts And then three if we are looking at the twelve column grid we have something here that's about three and nine So let me do that I'll copy what we have here And then I'll come to our front page Come below And then add this and then I'll just tab it in To make it look a little bit pretty We have of course our container fluid with some padding and bottom Padding at the top and the bottom We have our row We have the two from this side and the two that closes off And then all we need to do is just have Twelve minus four will give us eight And we need to split this in a ratio that's a bit tricky So I'll do five and I'm going to do three and I'll take out this middle piece And right here. I'm just going to say mini cut So that we know what's going to happen in the mini cut and then in here we're going to talk about having the navigation Tab so let me set this Come back here reload it You can see so much of a difference, but I'll add the orange background here So that we can be able to see that a little bit clearer So I'll reload and you'll see that this is taking up nearly half the space But when we blow out then it becomes really really really huge So I'll reduce this to about two and make the six And that will be a huge change And you'll see that's at least a little bit more flexible to what we were having before So If we want to get this, of course, we have to move it in a margin That's minus this particular mini cuts Then it will go all the way up and then down and then we'll have our navigation right here So let me go to bootstrap and we're going to go to the layout We'll look for components And we're going to look for the nafs And in the nafs, I'm going to look for something that's very specific We need to have this navigation tab that we see here changing with different things So what I'm going to do is copy This code right here come back to our editor and I'm going to change this navigation to what we have here Of course, I need to tab this in To make it a lot cleaner tab about the div We have this div content going in This url going in and then we'll have also these list items Going in so I'll save this Come back to our front end Reload our theme and you'll see that we have This bits and pieces that are changing the reason we can't see so much is because We don't have any particular content showing up here. So Let me add to that So I'll call this home I'll call this profile And I'll call this contact Now these need to match up these id's need to match up what we have here in these different tabs And we need to know which one is active and we need to know which one is inactive So that's already added for us. I'll save this So we don't have that kind of change Now the reason we are having this not changing the tabs Like we have it here Is simply because we've not activated the javascript that is related With this particular screen. So I'm going to scroll down And then we're going to find the javascript that's attached to this So you're looking at getting anything that is in the id of your tab like what we have here And you're looking for the link a so that whenever it's clicked you prevent the default action And then you're going to get its tab and you're going to show the tabs So I'm going to copy this javascript Which is basically jQuery And I'm going to come to my code. I'll go in the footer for now Just to make sure that everything is working well I'm going to go just before the body And then I'll add this right here And I need to wrap it inside My script tags. So I'll do script its type is of a text slash javascript And then I'll close this off So I'll save this let's come back to our page reload I'll come back and inspect the page to see if we have any errors Now I'm having quite issues with getting this to load From the server the other side we still get this failing I'm just going to get bootstrap and then save it locally and then I'll load it from my server I'll download this I'll go to the compiled css and javascript I'll save this And then I'm going to come back to my folder And then we have css here to have bootstrap dot min dot css So I'm going to copy this and drop it in my css folder And then I'm going to go back here And also get the javascript and I'm going to look for the bundle.js Dot min, which is the minified version of our javascript. So once I've done that We now have this available I'm just going to go back inside our nq in the functions And I'm going to basically just change from what we have live here and then make it the local version So I'll copy what I used here for the css And I'm going to change it for the javascript So I'll use the stylesheet directory. You are right go to assets Then go to javascript, which is js I'll cut this go to js then go to bootstrap dot bundle Dot min dot js, which we have right here And then I'm going to look for the css as well, which we have bootstrap dot min dot css there I'll copy this all the way to assets And I'm going to replace this to get to the css and I'll save this Come back into my browser Reload that And now you see we don't have those errors anymore And when I click here, you'll see that our bootstrap is actually working very well and we have the navigation showing up and That's all we needed So sometimes you need to load those files from your local site instead of from a cdn The advantages of using the cdn because they deliver the content a lot faster But if you have a good good good host, then that shouldn't be an issue. This is a very small file to load from your server We have this working well. Now we need to just add the content dynamically in this section And we'll be able to see it coming on the front end So that's going to be the uphill task that we are going to take right now