 Welcome everybody! Before we begin with the development process of our website, the first thing that we need to look at is how to set up our development environment. For this video today, I will be using XAMP and XAMP is the most popular PHP development environment as it states on their website. It's completely free and it's available on Windows, Linux and Mac. I'm using Windows today so I will be downloading the executable file from here but of course make sure you download the one that is right for your operating system. So go ahead, download XAMP. I've already done that and I've installed mine but all we have to do is download XAMP and pretty much just follow the installment process. Once you have XAMP installed, make sure you open XAMP, so open XAMP control panel and the first thing that we need to do is start Apache and MySQL. Of course you don't have to use XAMP, you can use an alternative if you wish, it's just a local development environment or you can even use your PHP web server if you have one. So now that we have Apache and MySQL running, they turn green usually and you can access your local host by going in your browser and just type in localhost. If you get this page, that means that you've installed XAMP and everything is working correctly and in here you can check your PHP information and also in here you have a link to your database. The first thing that we could do is we could either put our website under localhost and on Windows this is usually under my PC, C drive, XAMP and HD docs. We could either put our website files in here or we could create another folder and point or server to that folder and maybe create a dummy domain name as well. So I'm actually going to create a new folder and create a dummy domain name that we can use for our local development environment. And because I'm using Windows, if you're on Mac or Linux or Linux, the setting should be almost identical but the path to the files might be ever so slightly different so you're going to have to check for your machine. But as I said, this is just nice to have, you don't have to do this step, you can literally put your WordPress website in here, visit localhost and dash it also work for you. So let's do the setup super quickly because it's very easy to do. So I'm going to create a new folder in here and let's call it WooCommerce Shop and this is where I will be putting the WordPress files. So I went and downloaded WordPress first of all and the latest version is version 5.4.1. So let's track that in and you can download WordPress from the official website which is WordPress.org slash download and then let's quickly extract the files in here. Once we extract the files, I actually want the WordPress files to be outside this folder so let's cut and paste the files inside the WooCommerce Shop folder that we just created and I will delete this folder so it doesn't get in a way. And also I can delete the WordPress zip file but it's not, but I can also leave it here, it's not a problem for now. Now that we have the WordPress files in here, as we are already in here, let's go to the WP content and plugins and let's just put the WooCommerce plugin in here and of course you can actually the WooCommerce plugin from WordPress as well. So just to speed up the process, I will install it from here and I will show you how to install it from WordPress as well. So let's instruct in here, just like this and that should work for us. So let's delete this file, actually I'll move it out. So we now have the WooCommerce plugin here and we have WordPress. The next thing that we need to do is change some exam config files so we can visit the website through a custom domain name that we will just create now. So to do that, let's first of all edit the HTTPD Vhost config file and to do this on Windows, you can go to cxamp Apache config extra and find the file called HTTPD Vhost config. Open this with notepad or whatever editor you have in hand and then scroll down to the bottom and we're going to have to do something like this. I will paste this code on my blog post as well so you can copy and paste it but we obviously need this. Let's copy this, paste it in here and remove the comments. So the thing that I have to change in here is the document read. So we need to go see examhtdocs and we need to put the folder name that we just created which is WooCommerce shop. So let's do that just like this and we can just put WooCommerce.com or actually let's put a WooCommerce shop.com just like this. Let's close this, we're done with this file and the next file that we need to edit will be located under C, Windows system32, drivers, etc. But this file will need to locate through notepad as an admin. So find notepad on your computer and press the left shift on your computer, right click and run as administrator. So this will prompt you with this user account control message, just press yes and then under file, go to open and then locate the folder which you see, Windows, system32, drivers, etc. Click on text document here at the bottom and just view all files. The file that we are looking at we need is the host file. So let's open that super quickly, scroll to the bottom and we need to point this IP to our domain name. So let's do that. Let's copy this and we can do WooCommerce shop.com for example. Let's save this just like this, save it, exit and now go back to the exam control panel and make sure you restart your exam. And make sure that you restart your Apache and MySQL. So let's do that. Let's stop both of them and start both of them as well. And it looks like they're both running. So technically speaking I should be able to close this and I should be able to view this website under WooCommerce shop.com. So let's have a look. WooCommerce shop.com is thinking about it and as you can see we have a new WordPress installation in here. So everything is looking good so far. Of course we're working on localhost so we're not going to bother with the SSL. But of course when you publish your website make sure that you have SSL installed and so on. So let's go ahead and now install WordPress. Press let's go. The day we need to now create a database name and to do this and to do this we can go to localhost. Slash PHP MyAdmin. This should prompt you with the PHP MyAdmin login screen. And if you haven't yet set up a username and password make sure you do that. But if you don't know how to there is plenty of tutorials online that will guide you to do it. It's a fairly simple process but I don't want to waste time better now. So my the default username and password I usually set a root and password. Obviously this is a localhost environment so it doesn't matter too much. Now that we are inside PHP MyAdmin we need to navigate to databases here on the top left corner. And then create a new database. So let's call this one something like WooCommerce shop as well. And then let's create. We don't have to do anything else. We've created a database. It's in inside here on the left side. And now we can go back to our setup and continue. So the database name is going to be the one that we just created. So that would be WooCommerce shop. The username will be root for me. The one that I logged into the dashboard and password will be set to password. Also localhost will be set to localhost and the table prefix will be set to WP. But for security reasons if you are working on a real project then make sure you change this to something unique. So let's submit and if everything has gone correctly it looks like you should get this message. And then just run the installation. Okay. Now we can give our website a name, username, password and email. Let's do that super quickly. So mine is called guard. And I'm just going to call a shop. The username will be let's say admin. My password can be set to password. And I can confirm the weak password usage and then I will just input my email address in here. Then press install WordPress and we should be good to go. Okay. Success. That means that we can now log into our WordPress website with admin and password login. And as you can see we now have the dashboard and if I remove the WP admin from the URL we should get the default website. Okay. The last thing that we need to do before we with all team development. We need to activate WooCommerce and to do this go to your dashboard then plugins. And then you can activate WooCommerce from here. Obviously I downloaded WooCommerce earlier and extracted WooCommerce into the plugins folder. So your website WP content plugins then WooCommerce. But of course you can go to plugins, add new plugin and install WordPress from here as well. So normally you would search for it. It would appear here and you just install it. So let me activate WooCommerce from here and this will guide us through a quick setup. It's actually better best to do it now because it will create some of the pages for you. So we don't have to do that later. I'm just going to go ahead and press yes please and follow the instructions super quickly. Make sure you do that. It's just going to make things easier. So I'm going to add a fake address. Then he's going to ask you what in which industry does the store operate. So I'm going to say fashion, appeal and accessories. Then we need to choose physical products or whatever you're selling actually. Just click continue. How many products would you like to display? So I'm going to say 11 to 100. Currently selling elsewhere now. I'm just going to untick all these because I won't need them. And then we can continue with this team which is the default team of WordPress so far. And he's going to ask us about Jetpack. I'm just going to say no for now and continue. Okay. So we're pretty much done. Obviously if you're creating a real website, a real shop, you're going to have to set up payments, set up tags, set up your shipping and so on. But these are things that you can set up on your own. We're only focusing on the development today. So in this case, I'm going to skip the store setup. Now that we are done with the setup of WooCommerce, let's go back to pages and have a look at what's happened. So WooCommerce added those default pages for us, which is great. So we don't have to spend time adding them. So we have the basket, checkout my account, privacy policy and the shop. And if we click on one of them pages, most of them are just basic pages with a short code. Now we can go ahead and continue with the development of our team. Let's close the database thing and navigate to Appear. And as you can see, this is where our team will appear as soon as we add it. So first of all, let's go back to a folder. Let's go to this example in here. Navigate to Teams and this is where we'll be creating our team. Okay, let's create our team folder in here, WP content teams. So I'm going to right click new for the WooCommerce that shop. And inside here is where we'll be adding all of our files for our project. So in Windows, you can do left shift, right click, open PowerShell here. If you want to open your Visual Studio Code quickly, just like this. This should open Visual Studio Code for you. But of course, you can just open your code editor, go to file, open folder and select the folder that we'll be working in today, which is the WooCommerce shop folder. Okay, so let's get started by creating some of the files that we are going to need for this project. And let's start with creating the folders. So the first one that we're going to use the CSS, the second one is going to be the images. And we can have a JavaScript folder as well. And now let's create the rest of the files. In here we can have 404.php, which of course will display your 404 errors. We can have footer.php. We can have the front page. This is basically going to be displaying our front page. And we can have functions.php. We need the header. We also need index.php. We need the page.php. We need search.php. We also need single.php. And we need style.css for team settings. And last but not least, we need to add the WooCommerce.php. We'll probably add more files as we go along with this project, but for now these should be good to get us started. So let's close all those files in here. And let's just keep styles.css open. To add the settings for style.css, we need to go in our browser and search for style.css WordPress. Navigate to the first website, which is the main stylesheet developer WordPress website. And if you scroll down, this will give you an example of how this style.css file should look like. So let's copy the text from here. And let's copy that in our styles.css. And basically this will save us time instead of writing all this. And let's just modify it super quickly. So I'm going to call my team something like WooCommerce shop. Then the team here right can be my website. Then the order can be me ready. Then the order you are. I can paste my website again. And then just go through this. Add your description, version. I'll change to 1.0. And so on. Just make sure you complete this. Save it. And this should. And now you should have your team ready to activate. So if you go back to the browser, navigate to WordPress website and then go to appearance, themes. As you can see, your team is here on the right side of the screen. NFAC. And if I click on team details, you will see that is grabbing the name that we just created, the version, my name, my website, and some of the description and tags. So let's close this and activate this team. And now let's navigate back to the front of the website, which for me is WooCommerce.com. And as you can see, we have a blank website. This is because we haven't yet added anything to a layout. And this is what we're going to do now. So first of all, let's go back to the folder. And I'm going to add the CSS from the previous project, from the previous tutorial that we did and paste it in here. Of course, you can use Bootstrap or whatever CSS framework, but the elements will be now slightly different as I am using the ones from the previous tutorial that I made. So let's paste them in here. Also, let me copy some of the images and paste them into our images folder. And we should be good to go. So I'm going to close this folder and we can now focus on building our team. So let's close styles.css. And the first thing that we need to do is focus on functions.php. So let's open this file, close the explorer here and focus on it. So functions.php is where we'll be adding all of our CSS, JavaScript. We'll be registering a menu. We'll be adding the WooCommerce support and so much more. So let's get started and quickly create our functions.php file. Let's start with creating, starting with PHP. And then I'm quickly going to add a comment here saying adding CSS and JS like this. And then let's start by registering, let's start by registering some of the styles that we need for this project. To do this, let's create a function. And we can call this function something like WooCommerce underscore custom team like this. And we also need to trigger this function. And to do that, we need to use the add action function. And we need to pass and we need to add an action of wp enq scripts. And we need to pass the function name, which is this one here. So let's copy this, paste it in here just like this. And now we need to finish off our function by adding some of our styles. And the first style that I need to include to a project will be the style under CSS style dot CSS. So let's see how we can include this to do this. We can do wp register underscore style. And inside here, we need to give our style sheet, our style sheet a name. So I'm going to give it a custom underscore CSS. And then we need to grab the team directory URL, which will be basically this will be a root folder where our website is hosted. Then we'll go to wp content, then teams, and then WooCommerce shop team. And this is where we want to get to. And WordPress has a handy function, which is get template directory URL. So let's use that. Get template directory URI like this. And then let's go concatenate this. And let's add the rest of the path. So CSS and then style dot CSS. Then let's start the versioning of this. We can do false and we can do something like 1.0.0. Let's go do this. Let's close this. And now we have our first style registered, but that doesn't mean that it's in queue yet. And we need to do that below in here. So let's do that now by doing wp enqueue style. And the style that we want to enqueue is the custom CSS. So let's copy this and paste it in here. And just close this. I also want to add the custom fonts. And I want to show you an alternative way of doing this instead of pointing to a local folder, which you can do. I want to show you how you can do it with CDN as well. So let's copy this line of code just below here with alt, shift and down. And we can remove the get team directory URI URI. And we can just put the full path of the URL that we need. So I'm going to copy this. I'm going to copy the font URL, which is coming from Adobe Fonts. And I will paste it in here. And also I will change the name to the font name, something like STOLZL is the name of the font. And I'm just going to give it a CDN name like this. And of course we need to enqueue this style sheet as well. So let's copy this line and paste. And then copy this name of the style that we just registered and paste it in here. And now we need to do the same thing for the Google font that we need to include. So let's copy this line super quickly, paste the name of the font, which is player fair underscore CDN. Then let's copy the URL just like this. And last but not least, let me toggle the world wrap. And last but not least, we need to enqueue it as well. So let's copy the player fair CDN name and enqueue it. We're good to go with the CSS. Now let's register a custom menu full theme. And I'm going to do this just below in here. So let's start a comment. Create a custom menu. And to create a custom menu, let's wrap it in a function first of all. So let's do a function. And I'm going to call this function WooCommerce custom underscore menu. And let's add an action for this as well, just like in here. But it's going to be ever so slightly different. So add underscore action. And this action will be in it. And then we need to pass again the name of the function. Just like this. And now we need to complain the function here to add to register or custom menu. And to do this, we can use the register nav menu function underscore nav menu. And inside here, we need to let's give it identify to know which menu that is. So I'm going to put the top menu as this is going to be our main menu. And then let's give it a name, which will appear on our dashboard like this. So I'm going to call this WooCommerce custom menu. And we also need to add another name, which will be the same like this. And our menu should be good to go now. And the next thing that I want to add is the support for WooCommerce. So basically, if you want your team to support WooCommerce, you're going to have to do the next step. So let's have a look at how we can do that. So first of all, I'm going to write a comment in here so we know what we're doing. And before we add any WooCommerce functionality, it's always a best practice to check whether WooCommerce is actually available. It's actually activated. So to do this, we can first of all check with an if statement. And we can just do class exists. And then we can just check if the class WooCommerce exists like this. And if the class exists, obviously we need to add the WooCommerce team support. And to do this, let's comment in here. Support. And to add the WooCommerce support, let's wrap it in a function. And we can call this function simple like WooCommerce shop underscore at WooCommerce support underscore support. It's a little bit long, but that's fine. And then inside here to add the support, we need to add team underscore support. And then the support that we need to add is WooCommerce. It's like this. And of course, we need to add an action to this as well. This one will be slightly different to the ones that we've done above. This one will be action after setup team. And of course, we need to pass the name of the function. So let's copy this and paste it in here. Close this and save. If we've done everything okay so far, we should be able to go back to the browser refresh. And if we don't get any errors for now, we should be good to go. So let's continue. The next thing that I want to show you is how we can add different filters. And the first filter I'm going to show you is how we can remove the styles of WooCommerce. So as a default, WooCommerce comes with handy CSS styles. So you don't have to worry about styling every single element of your shop, which is really handy. But if you do want to make custom styles for your shop, then you could use the following filter. And I'm just going to copy and paste this. And basically, obviously, this is commented out at the moment because I don't want to activate it. But I will leave this in here so you can download it from my blog or GitHub. But basically, this filter goes like this. I don't underscore filter, WooCommerce and queue styles. And basically, you need to put this to return false. And the WooCommerce styles will no longer be available. The next thing that I want to show you is how to disable the shop title. So WooCommerce, as default, comes with shop title on the pages. And if you want to disable it, you can do something similar. It's add filter, WooCommerce, show page title and return false. I'm going to leave this to comment it out because I don't need them for now. And the next thing that I want to show you is how to add some cool gallery support for WooCommerce. And to do this, let me show you. So I'm going to add team support for the gallery zoom, which means that if you hover over image, it will zoom in nicely. If you click on an image, it will appear in a light box. And then if you have multiple images on a product, it will work as a slider as well, which is very handy. So these are very nice to have. So far, we should be good to go. And we'll probably have to... So far, we'll be good to go with functions.php. But if you want to add more stuff later, we can do that as well. And we'll come back to it whenever we need. So let's close this and start building all pages. So first of all, let me open the index.html from our last project, which will help us massively now. And basically we need to split every single section. So we need to split the header of the website into header.php. We need to split the footer of this layout, this markup into footer.php and so on. So let's have a look at how we can do this. First of all, I'm going to grab everything from the doc type down all the way down to header. Copy this and I want to paste this into header.php, just like this. Save this for now. And also we might as well as we have index.html open, let's scroll down to the bottom and just copy the HTML and the body for now. And then we'll come back to the footer styles later on. So let's copy this and paste this into footer.php, just like this. And now let's focus on the header. So first of all, there are a couple of things that we need to remove and add. The first thing that we can do is swap this language to come from WordPress. And to do this is actually fairly simple. Let's remove this and just open PHP in here and add language attributes, just like this. Then the second bit is we can add the char set as well. So let's do that in here. Let's open PHP. And for this one, we need to do blog info and we need to display the char set like this. And then close PHP. The next thing that we need to do, obviously we added our styles and our fonts in our functions.php page. And to make that work, we need to remove all this and the title. And just do open PHP WP underscore head and close PHP. And basically this will bring all the scripts for us. And every time you use to a plugin, the scripts will be added automatically in our head of our website. And the next thing that we need to do in here is we obviously want the menu to come from WordPress. So we can delete this and we can add the menu that we created in functions.php. And to do this, we can do PHP in here, open and close it like this. And then we can do WP underscore nav underscore menu. And this is going to be an array of options that we can pass through. So the first option that I want to do, I want to add is the team location. And the team location will be set to top team, sorry, to top menu. Then we need to add comma and add another property. The next property I want to add is I basically want to remove any default containers that this menu is adding. And to do this, we can do container and do false. So let's save this like this. And let's now go to photo dot PHP. And if you want to add the admin menu bar to appear on top of WordPress when we logged in, we need to do the following thing. Let's open PHP in here and do the WP photo. And obviously if we go back to the browser now and refresh, nothing will happen. And this is because currently our website is actually using the front page PHP. And we need to open this and import and get the header and the photo inside here. To do this, we can use PHP get header like this. And then let's include the photo as well. Okay. If everything has worked, if everything is working correctly, we should now get the header website and the photo. So let's go back to the website and refresh. And as you can see, this is the actual bar that we put in the photo, which is coming from the photo. We have our logo. We have our menu which comes from WordPress. We have all icons and so on. Obviously it looks like we have a problem here with our styles. And let's have a look at what's wrong with it. So from my first inspection, it looks like there is a missing style. So let's have a look. I'm going to go back to the code editor, open my CSS folder. And I'm going to open the style.css. Obviously make sure that you're running your SCSS if you're using SCSS. So if we make any changes, so make sure that any changes are made are compiled to style.css. Let's go down to menu and have a look at what's the problem. And straight away, I can tell you that I've misspelled menu. It's actually menu not menu. So let's change this quickly. And let's hope that this is the mistake that I've made. So let's save this. This will compile into all style.css. And let's go back to a browser and hope for the best. Let's refresh. Okay, this isn't certain the issue, but I think I might. But first of all, we need to actually create our menu. And maybe that will be the problem. So let's go back to our dashboard. Navigate to appearance and menu. And as you can see, we haven't actually created our menu. So let's create all menu. And let's call it something like top menu like this. And let's just click create menu. And then we need to make sure that we display all menu in the location of WooCommerce custom menu, which were created earlier. So let's add it like this. Hopefully if we go back to website and refresh, things should work as they should. As you can see, obviously when we installed WooCommerce, this added a few pages for us, which is great. Technically speaking, which is great, but those pages will not work yet because we haven't added anything to our WooCommerce page yet. So we could do that now. So if I was to go to shop, for example, you will see that this is empty. So let's fix this. First of all, let's navigate to WooCommerce.php. And this will be actually fairly simple. This WooCommerce.php will act as its own template page. So we can do pretty much anything with it. But let's get started with this. So PHP get header because I want to make sure that we have all navigation bar on top of this page. And of course, let's get the footer as well. So PHP get underscore footer like this and close. So to get WooCommerce, first of all, I'm going to wrap all the elements into a main HTML5 element to make things a little bit better like this. And inside here is where I want to display the products or the WooCommerce products. So let's do PHP WooCommerce content underscore content like this. And that should pretty much work for us now. Hopefully if we go back to our website and refresh the shop page, you should see this section now which says shop. No products were found much in your selection and so on. So technically speaking, if you go back to the dashboard, go to products. And if we create a few products, let's do that quickly. So let's give this product a name, luxury mask or something like this. It doesn't really matter. Then obviously we can set some categories. We can set product tags. And the one thing that I need for now is product image. So let's add a product image with this. Of course, make sure you put your old text, titles and so on. For the regular price, I'm going to put maybe 20 and let's put this one on sale. So it's five pounds cheaper. And let's add some description as well. I'm going to add some Laura Mipson text to save time. So let's Google Laura Mipson and just copy this. Copy this like this and paste Laura Mipson in here. And our product, our first product is good to go. So let's publish this one and let's add one more. And later on, I'll probably come back and add a few more just for testing purposes. So let's add another one. I'm just going to call this something like breathable luxury mask. Let's put some Laura Mipson. Then we can add a product image in here as well. Let's add this one maybe. Again, put your old text, titles and so on. Let's make this one 15 and the sale price can be left empty. I don't want it to be on sale. So let's publish this product. And now if we close this and go back to our page. And if we refresh, you will see that we have two products, which is awesome. As you can see, this is working, but we actually forgot something very important. And this is tour and this is adding or body classes. So to do this, let's go back to our header dot PHP and inside here to make the styles work. Let's add inside here. And this body class is very useful for a couple of things. He adds classes to the body, depending on which page you are. Maybe a blog post, maybe WarCommerce in this case. And so technically speaking, now when we save this, this will add the WarCommerce class to the body. Hopefully, technically speaking, the product should take the style sheet for the product should work. So let's refresh this. And as you can see, now the styles for products are working. And if we were to inspect the code with control and you, you will see that the body classes are now added. And we have a WarCommerce one, which is added automatically and so on. So let's close this. And let's quickly have a look at our products. So if I visit one of the products now, you will see that obviously things are a little bit messy, which we'll have to look at and fix. We're getting the category. We're getting the description and so on and related products. But things are looking messy because we actually haven't yet started working on a layout. So let's go back to our homepage and start doing that. We obviously added earlier, we added the HTML element of main. And the reason I wanted to add this HTML element is to actually fix some of the spacing around. And to do this, we actually need to go to styles.css and add this to, to a section in, in here. Let's add it in here, just like this. And hopefully if we go back and refresh, this should make the layout a little bit better. It will give it this breathing space. And if you remember, if you remember, I was talking about the title of the shop, we can actually remove this if you wish by going to our functions.php, which is here. And just uncommon this like this, add the filter, save this, refresh the page. And as you can see, the title is now gone. So these are the things that we can do. And maybe you want to do a custom title in here and so on. So I'm actually going to leave the title removed and I'm going to concentrate on the homepage. Now on the homepage, we obviously going to have to remove some of those links. First of all, let's sort out on navigation and put the navigation that we had on the original website design. So let's go to dashboard menu and inside here, let's start changing, let's start changing some of the stuff. So for example, we won't need the home because all logo will be linked to home. So I'm going to remove this. We have basket on the right side. I'm going to remove this. We have the checkout. We don't need the checkout. It will be in the old basket. Definitely don't need the account here. Definitely don't need the sample page. And we also don't need the shop. And we actually do need the shop. But instead of shop, let's go to products. So let's start with this. Save this. And obviously, we're going to have to create or sale page about page and support. So let's navigate to pages. First of all, quickly and create those pages. So I'm just going to create a blank page called sale like this publisher. And then we'll come back to this later. Then I need the new page called about. Let's publish this. And then I need the last page, which is support. Let's add this. And let's now go back to menu. And then add the following pages that we just added. And we could have added these, those one automatically. But let's add the money quickly like this. So we need sale to be second. We need then about and then we need support. So let's save this. Go back to website refresh. And as you can see, we have the links working now. And this is just like the website. So let's now focus on the basket. First of all, I'm not going to be doing the search. I've already done a tutorial on how to do a follow on search page, which I can link in the description below. So let's focus on the basket. Let's close everything that we don't need for now. And open index. And open header.php. Scroll down to the bottom here. And let's link or basket to, and let's link or basket to the project page. To do this inside href, we're going to open php. This is actually fairly easy to do. We can just do echo.wp.get.card.uro. Like this. Technically speaking, this link should be now working. The link will now work, but the pages won't be working yet. So if I press on the basket, you'll see that nothing is happening. And this is what we have to do next. So first of all, let's start building our page.php. And we need to add the famous wow loop in here. But first of all, this will be displayed as a normal page. So we need to bring our header on first. So let's do php.get header. And let's do php.get filter. Like this. Inside here is where we'll be adding the famous WordPress loop. But first of all, let's wrap the loop inside a main HTML element like this. So everything looks neat. And let's start. So to do this, we can do php.if.help.post. Like this. Then we're going to say wow. Have post with s. And then like this. The post. The post. Now we need to end our wow loop. And to do this, we can do end wow. Like this. And we can actually wrap this in its own php down the line here. Maybe like this. So let's close php around here. And we can start php here. And close it. In fact, we can do this in one line. Okay. Now that we have created the loop, let's get the content and let's get the title. Okay. To get the title, we need to do open php the underscore title. Close. And to get the content, we need to do something similar, which is php the underscore content. Like this. And technically speaking, this should work, but we obviously need to wrap the title into HTML elements and the content potentially. So let's have a look if this works. First of all, let's navigate to products. Let's add one of the products to a basket maybe. And then let's click view basket. As you can see, our loop is now working. So we're getting our basket and so on. We can remove this. And this is awesome. So we can click return to shop and so on. And as you can see, our zoom is working as well, which is cool. And I think this image is far too big. And that's why the actual magnifying glass isn't working now. But that's not a big deal. You just have to style it a little bit. Okay, let's go back to a front page and let's quickly link our Lego. I'm just going to do it the lazy way for now. So let's go to our header and simply just do a slash, which will lead us to the main directory of our website. When we click on the Lego, as you can see. So first of all, let's start now displaying our hero image and so on. Let's go back to or index dot HTML that we created in the previous tutorial. After the header is where our hero section is. So let's copy this and paste it inside this time front page dot PHP. And we're going to paste this underneath the header just like this. And let's save this. Let's go back to a page refresh and see what happens. As you can see, this is coming up. Obviously, we have a little bit of a high line height issue, which is not a big deal. It's fixable easily with CSS. And we now need to bring the picture, which is probably not coming up because we need to change the path. So let's have a look at those styles of CSS. Find the hero section, like here. And we'll probably need to remove this. Actually, we'll probably need to put two dots and save this. And let's have a look. And as you can see, our image is now appearing. And don't worry, another logo and or navigation bar is very close to the top. But when we are logged out, this will not happen. And I can show you this now if you wish. So let's log out like this. And as you can see, this is looking nice. This is looking nicely. Obviously, this needs to be fixed. So let me quickly log back in just in case. Password. Now that we have this section done. If I wanted to link this section, we can do it manually if we wish to. So I can do slash shop, save this. And now if we refresh and click on this section, this will leave it leads to the shop. And of course, you can link it to whatever you like. And then let's go back and focus on the next section. So the next section will be let's have a look will be the standard promo element. So let's copy this and paste the section here below like this, save this. And we'll probably need to change the URL to the CSS as well to the images as well. So let's refresh. Let's go down. And as you can see, this is working as well. But we need to change the images. So let's do that from the CSS. And this will be the promo. So we just need to add dot dot dot and that should work. Let's save it, go back refresh. And as you can see, we have shop woman, shop man. We haven't actually yet created those two pages. But I can show you an example of how to do that in a minute. But let's finish the rest of the page now. And as you can see how, as you can see, it's fairly easy. Now that we have everything set up, it's fairly easy to add stuff and remove stuff. So let's add the rest of the stuff. This will be the best sellers like this. Save. And let's format this a little bit better. That would do. And let's refresh the page and scroll down. And as you can see, we have woman's best seller now and new arrivals. Okay. And now to do the woman's best sellers, it's actually fairly easy. We can go to the front page and inside here where we have items. This is where we're going to have to replace this. Okay. To display the best selling products for women, we can do. We can add any site here. Let's open PHP and then we can do echo do underscore show code. And inside here is where we're going to have to add the show code for the base selling product. And that would be best underscore selling underscore products. All right. And then we need to save this and go back to your website and refresh. As you can see, we have the two products that we added earlier. And the reason that they're showing is because these are the only products that we have. But technically speaking, the best selling products should now appear. And obviously we can add the lift. We only have two products at the moment, but we need to add a few more just to fill the gaps and so on. And you can do basically so much in here. You can specify tag and then, for example, do, I don't know, let's say woman front page, maybe, and obviously you need to go and obviously you need to go to the shop to your products and then create different tags. As you can see, these are unmarked. And let me change, for example, let's say let's create a new category and let's call this category breedable, for example. So let's have a look at how we can display only the breedable masks as well. So I'm going to update this, go back to this, to this code here and just instead of tag, let's put the category and let's make sure that the category is equals breedable. Let's save this, go back to the website. And technically speaking, we should only get the breedable luxury mask now. So this is how you can do all sorts of stuff. The limit as well. So let's remove the category now. And actually, let's add a couple of more products, first of all, for this example, flashing mask and let's add an image. Let's add the price. Let's add a few more masks as well, just to show you the example, standard breedable mask, maybe we can add another product here, just like this. Let's save this. And we actually forgot to add the price. So let's add 13, 12, whatever. And now that we have four products, I can show you some more stuff. So let's go back to the shop. Obviously, this is all the products we will pair now. But let's say, for example, that you wanted only three products to appear. We can actually do this as well. Inside here, we can set a limit. It equals, for example, let's say two. And this should now display the best selling products, the best selling two products. So let's have a look. And as you see, we get two products. So there is so much you can do with this, but I'm going to leave it as it is. So I'm just going to leave it as best selling products. And maybe put the limit to four like this. And one thing that I didn't show you is that if we scale down our page, you will see that those products are actually responsive as well. And these styles are coming from WooCommerce, which is great. And if I was to add one of them to basket and let's add another one as well and view them, you should be seeing them in here. And it's adding up everything and so on. So this is great. The next thing that we need to focus on is the new arrivals. So for this, we can do exactly the same thing. So let's copy the shortcut from here, paste it in here. And for this, we can do something slightly different. Instead of best selling products, we can do stuff like let's say products. Then we can say limit to be equals to four. Then what we can do is we can do order by ID. And that would be equal ID. And then we can actually do the order as well. So let me show you, for example, we can do order descending or we can do order ascending and so on. So if we go back to your page refresh, we should be getting the latest product. And this is truly the latest one that I added. So if you remember, we added the last two, we added those two ones. And as you can see, everything is working correctly. I would like to have a little bit more space in between those title, but these are just minor things that you can work on on your own time. As you just a little bit, as you just see as such changes. Now, the next thing that we need to do is the photo. And for the photo, we can go back to index.html. And actually we forgot the newsletter. So let's copy the newsletter. The newsletter is actually already done. So all we need to do is copy and paste it, go back to website refresh. And let's have a look how it looks. It's looking nice. This is actually connected to my MailChimp already because I took the code from MailChimp. And then underneath here is where we can add the photo stuff. So let's grab the photo like this and paste it into the front. And instead of pasting it in here, we're actually going to paste it into the get into the photo.php page this time. So let's go to photo.php. And on top of this, we can paste our photo stuff. Let's save this and go back to your website refresh. And as you can see, we're getting the photo. All right, let's start working on the menu now. We're going to have three different menus that we will create so they are easy to manage. So the first one we can call help. The second one we can call useful info. And the third one we'll call company. Let's go to the dashboard of our WordPress. Then navigate to appearance and then menus. And let's start creating those menu. So let's create a new one by clicking the button here, create a new menu. And let's give this one a name of help, create the menu. Inside help, of course, we haven't created the pages yet. But just for the demo, we can create ones from here, custom links. We can just put an empty link and this would be delivery. Then we can have returns. Then we can have FAQ and contact. Then we can have my account find the store and sitemap. Obviously, we don't want empty pages, but this is just for a demo. You have to create all those pages manually. And then obviously add the actual pages from here and that will work. But this will be ideal for the demo. So let's save this menu. And let's see how we can actually bring this menu to the photo. So now that we save this menu, this actually gives us an ID of 20 in here in the URL. So menu equals 20. So we know that this is 20. And so we know that the ID is 20. And we can use this to our advantage to actually display this easily. So first of all, let's head down to a photo. And inside here, we obviously going to be replacing this with the WordPress menu now. But one thing that I need to keep is this class name. So let's copy this class name first of all, because we want to add this class name to the menu that is coming from WordPress. And let's delete the URL. So basically WordPress will create the URL for us. Let's remove this. Let's make some space so we can see a little bit better. Open PHP and inside here, let's close PHP as well. And inside here, we'll have to do wp underscore nav underscore menu. This is going to be an array. And we're going to put a few options now. So the first option that I want to do is the menu, the menu option. And this is actually the idea of the menu. And for us, this is going to be ID 20 now. Obviously yours could be different. Then let's add menu class underscore class. And this will be equals the footer dash container underscore underscore body first name. And it will be exactly the same as this, hopefully, and it will be exactly the same as this. So let's save this. Go back to the browser. Go back to page refresh and see what happens. I don't know if you saw, but this is, but it did change ever so slightly. So this is now coming from WordPress. And to show you this, let's swap some of the items. So let's go back and let's swap the delivery with site map, for example, like this and save it. Now let's go back and refresh. And as you saw, the site map is now at the top and the delivery is at the bottom, which means that our menu is working perfectly fine. And now we have to do the same for the rest. Let's create a useful info or we can just call it info. So let's create a new menu. I'm going to call this one info. And we can also, to be a little more specific, we can also put photo like this. Let's create a menu. And I'm going to copy some of the items now super quickly. So just so we have some demo links for then here. So it's not empty basically. And the first one is domestic conditions. Then we can have another one in here like this. Then we can have security. Then you can have accessibility. Then we can have find the store. And we can have site map. Now that we've created this menu, obviously we need to save it. And we need to get the idea of this menu. And this one is 21. So let's go back and let's copy this code actually. Let me remove some of the spacing just like this. And let's copy this code and replace it with this one here. And just change the ID to 21. And let's go back to the page, refresh and see whether we get the new menu. As you can see, this is actually coming from WordPress as well, which is awesome. And now let's do finally the company now. And let's go back, create a new menu. This one will cool company like this. And this menu has the idea of 22. And let's just add some demo links in here as well. So I'll add your own about contactors and security at this. Save this menu as well. And let's use the idea of 22 now. So let's copy this and replace it with this one here. And put 22 save it. And hopefully now this should come from WordPress. Okay, perfect. Let's inspect this for a sec and see what happens. Obviously WordPress is adding some other classes. It's added menu. I've actually, oh, it's added an ID of menu company footer, but I've missed powder. So let's go back and redo this. So save this. Let's go back and refresh. And hopefully the ID will change to menu company footer. So it does add some extra IDs that you can use and so on on all of them. So this one will have a menu info footer and so on. Awesome. And the last one we can actually do manually. We just need to get the image and I went to and we can go to the media in our dashboard and then just insert the Apple image in here, then go, then click on it and just copy the URL from WordPress. Sorry, from WP content and down. Copy this. We're going to go back to the footer, scroll down, find where the download button is. And it's here. We can just simply add it like IMG source equals and we can put the source like this. And of course, it would be nice to have an old tag as well. So we can say App Store like this. Obviously, this can be a link as well. So let's change the P tag to a link. But because it's a fake website that we're building, I don't really know what the link will be. So let's just put href and do something like this. Save this, go back to the menu. And as you can see, we have the button and this is also a link, which is a deal. And last but not least in here, we might want to change the ear to be dynamic and to do this, we can go back to the footer. And where we have copyright, let's change this to an HTML one. Copy like this. And then we can get the date with PHP. So PHP, echo date. And this would be Y as ear like this. And then we can actually pull the blog name as well. So let's echo blog info and this would be name. Just like this. Close PHP and save this. Let's go back to the page refresh. And as you can see, we have the copyright info. We have 2002 coming dynamically now. And this is also coming dynamically. So if I was to change the name of the website, this would also change. And obviously we just need to add some space in there as well. And to do this, it's a little bit awkward now. But we could do another echo, which is a little bit annoying and just put space like this. So this should solve our problem. Okay, let's have a look at what else we can do. So let's scroll up and the first page, obviously we need to do some CSS changes on this. The line height is a little bit broken in here. Some of the spacing can be fixed and so on. But these are things that we can improve as we go along. And let's now focus on creating some data pages. And for example, let's focus on the sale page. So as you can see, we are not getting any products on the sale page. And if we go to the dashboard and we go to products, we can see that we actually have only two products on sale, which is okay. But we obviously not displaying them in here. So to do this, we can actually edit the actual page in here. So this is a normal Gutenberg page. And inside here is where we can add a custom shortcut. And the custom shortcut that we need to add will be a sales one, a sale one. So this will be like this. And this would say sale underscore products. Then we can have four columns, maybe equals four. Then we can have per page set to maybe one just to try it out. Actually, we don't need this. We can also put pagination as well. So let's set the pagination to three. All right. Let's save this. Go back to the page. And as you can see, we only have the sales products. Obviously, this page can do with a little bit more marketing materials. So let's quickly create like a hero section for this and add a custom image. So first of all, let's head to the start.css. And somewhere at the bottom, like here we'll do for now. Let's add another section. Let's put this as a page hero, maybe. So let's create a class, page dash hero. This class can be displayed as grid. Then we can have the height set to around 60, 60 VH. Then we can have a background color just in case we don't have an image set. And this can be like a gray color like this. Then let's make sure every time we have an image, the image covers the whole area. So we're going to set this to cover. Then let's set the position of the image to be always in the middle. And let's justify the items in the center. And also align the items in the center. And last but not least, let's make sure that the color is set to white. And if we have a heading inside here, so we can do underscore, underscore heading. And let's set the heading color to color white. All right, let's create this section now quickly. So I'm going to copy this. And let's go back to page. Let's close this. Let's close this. And early on we outputted the title and the content. But now let's make sure that it's formatted better. So first of all, let me show you how it's going to work. We're going to have a div with the class name of page hero. We're going to have to check whether this page has a thumbnail. And if it does, we're going to add the thumbnail as a background image on this. And if it doesn't, we'll just have an empty, we'll just have a normal div with a class name of page hero. And inside here, obviously we're going to have the title. And the title is going to be wrapped in a div with the class of page-hero, underscore, underscore heading. Like this. And let's close it as well. And let's have a look at what happens now. Save this, refresh. Nothing is happening. And this is because I didn't watch, let's watch SCSS. Okay, let's refresh now. And as you can see, we have a small hero section now, which is great. And it says sale, but the title will need to be converted and so on. So this needs to be converted to an H1 tag. Let's do that. Save, go back, refresh. And this is looking so much nicer. Now let's add the image. Clear this up. And now let's add the post thumbnail image to this div with the class name of page hero. To do this, let's do it inline. So we can do style and go with background image. Then this will be, this will be a URL. And then inside here is where we're going to have to plug in the URL. And let's get this from PHP, of course. So like this. And to get the URL, we can do d underscore post thumbnail, thumbnail and underscore URL. And then we can set the size of the image that we want to display. And I'm going to do large and we should be good to go. So let's save this. So to add the image on this, we simply have to go to any page and then select a feature image. So I'm going to go ahead and download an image or two from unsplash.com. We need to add a featured image. So let's select this and drag the image that I just downloaded. Now, once you're done with the uploading, obviously, this image can be optimized and so on, but set, save it, set as a featured image and make sure you update. Go back to your website, refresh. And it looks a little bit wrong in here. So I think I've made a mistake in the CSS. And this is because background image needs to be set to background size. So let's save this and go back refresh. And as you can see, we have now a full screen image, which is looking awesome. And we could do with a little bit of spacing at the top and at the bottom as well. So maybe, so maybe we can just do a little bit of margin, 20 pixels top and bottom and save. Okay, this looks a little bit better. And we can also do this for the other pages now as well. We can do it for the support about and so on. So let's go on the about page now. And as you can see, we have this here image, which is super nice. And we just need a nice landscape image, which I'm going to go ahead and download from onsplash.com as well. I will link the images in the description below. Okay, so I've added a new image in here, update. Let's go back to about. And as you can see, we have another image. The quality isn't very good with this image, but that's something that we can do later. And if we add some content to this page, so let's go ahead and edit this. And let's add some text in here. This is about us page dot. And let's update this, go back. And as you can see, this text is now appearing in here. And of course, we can add titles and so on. So if I wanted to add a title, we can edit the page again. Let's add a heading about us or whatever, you know, update it, go back. And you can see that the heading is working and everything is working fine. All right, so now that our page is working, the sales page, the about page is working. And of course, you can do that through your support page as well. Let's edit it in here quickly and select again one of the random images that we have like this one. It's fine. I know we are repeating it, but it doesn't really matter. Let's go to support again. And as you can see, we have support and we can add the content here and so on. Okay, let's quickly fix the heading and that should be everything for this tutorial. So let's go to the top, find the hero and the H1 and we can just add padding button of 20 pixels. And hopefully this will solve the issue for us. Okay, this is looking so much better now. Everything is working. These can be linked to different categories and so on. Just like the way I made the sale page, you can make different categories. These now work. So if I add that to your basket, you should be able to go and see it. And also the basket now has a nice image, but you can also do custom templates and so on. One last thing before we finish this video, I forgot to mention how to do the mobile menu. So let's right click inspect element or key on your keyboard. Then let's toggle the responsive of design mode, which will shrink down the page for us. So we can see how it looks on mobile. And obviously we want when we click on the burger menu here or menu to appear. So I'm not going to do the full thing, but I'm just going to show you how you can do it very easily. And the menu is under or hero section. I'm sorry. And the menu is located under our header. Then inside it's under located in the main dash header underscore underscore nav. And inside here we have or link. So this is the one that we want to click on and open the URL and if here several display this, you will see what's happened. So the menu appears. Obviously it's a little bit messy, but these are things that we can solve. So let me show you how you can do this. But so let me just show you how you can do this. And I'm going to show you a very easy way and to do this, what I'm going to do is first of all, let's go back to a project, create JS file in here. And I will call this maybe scripts.js. And now we need to include these scripts file in our project. Of course. So let's go back to functions and on top of functions where we added all styles, we can actually add JavaScript one as well. To do this, let's just in queue it in here. So we can do WP. So we can do WP underscore and queue. And this time we have to do script instead. Then we have to give this script a name. So let's call this main dash scripts. Then we need to point the folder just like in here. So we might as well copy this to go to the directory. Then let's add the rest of the part, which will be under JS. And the file that we need to include is scripts.js, of course. And then we can do array like this and give this script a version. So 0.1.0.0. And then we can just set this to true. Okay. Let's see if we get the script now. So let's close this. Go back to script and let's just output something to test it out. So we can do console.log. And I'm just going to say okay. Let's save this, restart or page, refresh, go to console and we get okay. And obviously because we're using WordPress, jQuery is loaded in here automatically. So let's use jQuery and to quickly toggle this menu. And this will be probably the easiest way to do this. I know that I've actually done another tutorial which I will link in the description below on making a better mobile menu pop up and so on. But let me just show you a very simple way of doing it. So first of all, there are two things that we need to remember. Let's expect the button again. The first thing that we need to remember is that we need to click on this menu link class name. And we need to display this URL which has a class name of menu. Or we can actually use the ID if you wish. To do this, let's first of all add document ready. So let's do jQuery. Inside here, we're going to add document. And then we need to add ready. And then we need to do a function just like this. And inside here is where we'll be adding our jQuery code. This will basically check when the document is ready and then we can run our JavaScript. To do the pop up, let's build up super quickly. So what I'm going to do is do jQuery. And inside here, we need to add the class name of which we want to click on. So this will be menu link. This will be a click event. And inside here, we'll do a function just like this. Let's close that. And now we can actually use the toggle, the jQuery toggle, which is very handy as well. So let's do jQuery. And the class name that we want to toggle, it's called menu. Or as I said, you can use the ID as well. It's not an issue. And then we need to add toggle. Then in here, we can specify the speed so we can say slow, for example, or fast. And then we can do function and finish it like this. Let's see if this has worked. Save it. Refresh your page and click on the menu. As you can see, the toggle worked. And if I click back on it. This is the beautiful thing we toggle that it just works really well. And it's just so easy to do. But of course, we are having a little bit of problem with the rest of the element because the URL is actually wrapped in the header. And it's wrapped in this header now. So the easiest solution for this would be to actually display this as absolute, for example. Let me just show you how you can do it. But I won't be doing the full CSS. So for example, this URL, we can display as absolute. So let's do, we can do position absolute, which will bring the menu on top. Obviously, we can do a setting that's just in case it's so it's at the top. Then we can give it a background color. This will be obviously white. So let's do three Fs. Then we can position this to start from the left side, zero to the right side, zero. And it's probably going to be nice to position this at the top. So 10 pixels. Let's have a look. Maybe, maybe just like this where the navigation starts. And obviously these elements now are displayed in a block. We're going to have to convert them to maybe let's have a look to block. And this will, and this will make them stack under each other. And then the next thing I'll probably do is on the URL. Maybe we can do text align center. And we could give the ace a little bit of padding to space them around. Or you can just do, or you can just start as padding in here as well. But it's best to add the padding on the links. So the easier to press and so on. So if you do this, technically speaking, we already have a very basic menu which we can use. And if I was to click on this, it hides, it shows and so on. Obviously those styles need to be saved now for this to work permanently. But I'm not going to do this. As I said, there will be a link in the description below where I created a very similar menu for another tutorial. And one more thing that I forgot to mention is for the bottom bit of the photo, you can actually do the same thing. You can use the toggle function to click on this element here. And then that would toggle, and then toggle this URL in here. So instead of display none, this will be display block just like this. And that's pretty much it. And that should conclude everything from this tutorial. Thank you very much for watching. As always, my name is Roddy and you're watching my channel, Roddy the Brand.