 What is going on everybody, my name is Roddy and you're watching my channel Roddy the Brand. Today we're going to develop this e-commerce website using WordPress and WooCommerce. We're actually going to take a slightly different approach this time and we'll be using a few tools that could potentially save us a lot of time and effort. So let me list a few of the things that we'll be exploring today starting with creating a custom WordPress slash WooCommerce theme using local, using underscores, using bootstrap and actually extending bootstrap. I'm going to show you how you can modify WooCommerce pages, how you can modify the WooCommerce style sheets. Last but not least we're going to create a few custom widgets and actually there will be so much more. Before we begin if you find this video useful please consider subscribing, hit the bell notification button, smash the like, if you have any questions or suggestions comment below and now let's jump on the computer and get started. Welcome everybody and let's get started. As you can see in front of me I have the Adobe XD file opened and this is mainly so I can copy and paste some of the content and reference the design and colors. Saying this I've already exported everything that I need such as the logo, the slider image, some of the product images and they're all nicely categorized in this folder so I have some categories, I have some photos, I have some products, I have the slider photos, I have my logo, I have a screenshot for the theme and I have some payment methods. With that said let's begin and the first thing that we need to look at is our development environment. Today we're going to do something slightly different, I'm going to be using local and if you go to localwp.com you can download this too for free, this will basically allow us to set up a WordPress website locally and it's just a little bit easier to use than XAMP so we might as well check it out and if you go to localwp.com and click on the download button you can choose your platform, you can choose Mac, Windows or Linux and they have a few different distributions so download the one for your computer, install it and once you're ready come back, open local and you should see a screen like this. Now as you can see on the left side here I have my local website and today we're going to start with a new one so let's click this big plus button here on the left side and give it a name, my will be pausegang.shop and then I'm going to leave the advanced options as they are and click continue. For the environment I'm going to choose the default one and then I'm going to click continue. Now for the WordPress setup let's put the username as admin and the password as password. As we're developing locally it doesn't really matter and if we want to publish this website online we can always change these things and I could do a video on how to publish your website if you wish and I'm going to leave the WordPress email as it is. So let's add this new website and this should take a couple of seconds or minutes. Let's see. As you can see finally our website has been added and what we can do from here is add SSL so let's trust this. So our website is now trusted which is pretty cool then our web server can be left as it is PHP version I'm thinking of just going for the latest and greatest and apply. The database is fine one that's fine that's all looking good. Now as you can see automatically this started the website but normally you can stop your website from here and start if you wish and now this is all looking good let's open our website and have a look at what we get. As you can see just like any normal WordPress setup this is the default WordPress theme and as you can see everything is working well. We're not getting the not secure here but what we can do is HTTPS column slash slash and visit the website like this and hopefully now you can see the padlock which is great. The first thing that we might want to do is log in and have a look at the themes so let's do WP admin and it's running a little bit slow today but for the username I set mine as admin so let's do admin and then for the password I set mine as password so let's do that and log in. All right now that we are logged in make sure that you have the latest WordPress version usually I will tell you and then if you go to appearance and themes we should be able to have a look at the themes that we have at the moment. I don't know why it's taking so long and the themes as you can see we have the default themes the 2021, 2019, 2020 and if you wish you can remove them because we won't be using them. Now is probably a great time to start working on our custom theme. Then we're going to be using a starter theme called underscores and it's very easy to get started with this theme is bare bones it's very minimal there is no pretty much no styles a little bit of JavaScript and yeah and a lot of functionality that usually you have to create manually and which I have done before if you wish to learn how to do that I have created a video how to do a custom theme before which will be linked in the description below. Same this let's continue and create all new theme so go to underscores.me and inside here is where we need to add our name so pause gang and click generate. This will take a second and as you can see this downloads a file a zip file and now I can actually copy this folder close this and if you go back to local we want to find the WordPress instance so inside here on this arrow if you click this will this will actually open the project folder and under apps public is where you will find your WordPress instance and then under WP content and then themes is where you will find all of your themes now we're creating a new theme so we might as well paste the theme that we just downloaded from underscores and here it is if we go inside this theme you will see that we have pretty much all of the files required is nicely structured we we have the index header functions footer archives for a four page search sidebar single and yeah pretty much everything that we need the first thing I'm going to do is replace the screenshot.png I believe that this is 1200 by 900 in size and I've already created one so let me copy mine and paste it in here replace and now if you go back to a WordPress website in the browser and refresh and the teams you will see that we are getting all team here and we have our custom thumbnail which is pretty awesome let's activate this team and see what we get alright now all team is now activated and if we click visit site they should open the website for us and as you can see it's all working but it's looking a little bit broken and this is because there is no styles it's very basic at the moment so we're gonna have to set up everything one by one add some styles and today we'll be actually using bootstrap as you might have noticed in here so we're gonna do that very shortly but before we do this let's do some of the setup first of all before we start adding anything else I was thinking that we might as well add WooCommerce just to get it out the way so let's click on the admin dashboard name here go to plugins and add new search for WooCommerce let's enter and now let's install WooCommerce okay as you can see now we have WooCommerce let's activate here and do the setup quickly just so we don't have to do that later and we can just continue just so we don't have to stop to do this later alright initially we need to do the setup usually so let's do that super quickly then let's choose I'm gonna choose fashion apparel and accessories and you could skip the installation process if you wish because you actually add a lot of the pages that we need anyway so you don't have to create the manually and we'll be doing physical products in this so let's continue how many products I don't know and I'm going to untick all of this from now as we want as we won't be focusing on this here's the team continue with my active team and I'm going to remove this okay awesome we have WooCommerce setup now and of course there is a lot more to set up like adding products setting payments setting up tax setting up shipping personalize your store and so on but this is not going to be the focus we're mainly developing the website not configuring all these things saying this let's add some products so if you go to your products and this will ask you whether you want to create a new product or you want to import products and I'm going to import some products and you can actually find some dummy data in the actual WooCommerce photo so if you go back to the website and then let's go back to WP content plugins WooCommerce and under WooCommerce here we have sample data and then we have sample products and we have some sample tax rate and I'm just going to copy the sample products and let's do the starting port then I should be able to drag this into the brush button hopefully and yeah that worked so that should be all good continue to add all of those products just to save us a little bit of time and I might replace some of the images just to make the store look a little bit more realistic later on I'm going to leave everything here as it is it's all set up nicely so let's just run the importer awesome we now have a few products in our store which is pretty cool and and now that we got this out the way as you can see the different categories of course they don't match our website but maybe I can change them later just so I don't waste time on stuff that you already know how to do all right okay we can now start with the development and what I'm going to do is I'm going to open this in another tab here and I will have the website in here on the first tab then I'm going to have the admin on a second tab and then I'm going to have bush trap just in case we need to reference something and so on okay now that we've created our team and we've done a few basic setups let's start by adding bush traps or project if you go to get bush trap dot com today we have the current version today is 5.0.2 dash beta 2 and if you click on download there are two ways of downloading it actually actually sorry there are a few ways of using it you can use it with a cdm you can download the source files manually or you can use npm here or yarn if you wish but to simplify the process what I'm going to do is I'm actually going to download the sources manually and add them like that to a project just so just in case somebody has a problem with npm or yarn this will hopefully eliminate any errors okay so let's download the sources download sources and this should begin the download for me here it is okay I have bush trap in here so let me copy this folder closer and if you go back to or WordPress folder under the under WP content teams and then the team that we just created then then inside here we can create a new folder and what I would and what I'm thinking of doing is be to be a little bit more organized I'm just thinking of adding all of the css in this css folder so we're gonna css and then we're going to have bush trap as you can see we have bush trap in here and if we visit and if we click on the folder you will see that we're getting quite a lot of files but what's important today for us is mainly the scss and technically speaking we could remove absolutely everything and just have the scss but I'm just going to leave it as it is and I'm just going to include this css folder in our project in a second now that we have all of this here we can go back to the team and let's open this in our favorite code editor I'm gonna do left shift right click and open power share window here and then I'm going to do code column and this will open visual studio code for me with my project on the left side so we don't want the full wordpress instance we just want the team and let me close some of the stuff that we don't need anymore let's start by opening the functions.php file and the first thing I'm going to do is zoom in a little bit so you can see better let me close some of the things the first thing that we need to do is create our star sheet so if we go to the explorer and under css we need to create a new file and I'm going to call my star sheet main dot scss we're going to be using scss for this project let me remove this collapse the bush trap folder and as it and yeah today today we'll be using scss just because it makes things a lot easier and we can easily import bush trap in here and start using it which I will show you in a second now that we have our main star sheet in here now that we have our main dot scss file here make sure that you have a scss compiler and in visual studio code you can get one from the extensions and I believe it's called and it's called live sus compiler so make sure you get that and once you get this you should be able to go to your explorer let's close this and you should see this watch scss in here so if I click on that this will grab the main dot scss and compiler I think at the moment we don't have anything so for example let's the let's the body okay yeah as you can see this quickly compiled the scss into a main dot css file which we have to include now in our project let's collapse this if we get errors this usually pops up which is good and now let's have a look at how we can include this into a WordPress and let's open the functions dot php file first of all and scroll down as you can see underscores have quite a lot of functionality that they've added so you don't have to worry about like searching the logo but of course you can change anything to suit you needs and what I'm looking for now is this nq scripts and styles function in here and in here is basically and as you might have guessed in here is where we'll be adding or css and javascript so in order to add or custom css I can actually copy this one here by doing alt shift and down arrow this copy is the line and what I'm going to do okay let's change this to house gang dash maybe main and then we're gonna have to change this a little bit actually so we're gonna do get underscore template underscore directory and then underscore uri and then basically this will your eye and then two quotes and then two brackets dot and then inside here we can specify the folder where our style sheet is so that would be that would go to the template directory which is here and then we need to visit the css folder so slash css and then slash main dot css which is all file here or compiled file so technically speaking if you go back to main dot css and do something like body and then inside the body let's do background color of something like this color here let's save this go back to the website refresh the website and as you can see the color changes which means that our style sheet is now working and let's have a look at what we need to do next let's remove this obviously we won't need it this is just to test we'll probably be adding more stuff like this as one we need them but for now all we need is bootstrap to get started and also we need to change the fonts so both of the fonts that I have on the design come from google and let me show you how we can add them okay before we do anything else I noticed that my server was running super slow and what I've done is I went back to local and I changed the php version back down to 7.3.5 which was the default one and now the website is running super fast not like before which is something that I will make a note of let's go back to functions and let's start by adding our custom fonts and first of all let's copy some comments and we can add this anywhere in the functions.php file so I'm gonna do custom fonts in here and you can add custom fonts locally from adobe fonts or google fonts today I will be using google font so let's create a new function and we need to enqueue these fonts so what we can do is let's call or function something like enqueue underscore custom underscore font and inside the bracket first of all we can check if it's an admin I actually saw this example either on stack overflow or the WordPress documentation I'll try to link it up but we can check if it's not admin then we can then we can register the styles and enqueue them so let's register our first font by doing wp underscore register underscore style and then inside here we need to pass the font name so that would be source sans pro well we need to give it a name and then we can pass the url here I've already went to google font and found the font that I need first of all for the body I need the source sans pro and I've included the 400 and 700 our weights and now we need to close this and we need to enqueue it so wp underscore enqueue underscore style and then inside here we pass the style name which is source sans pro and close this now that we have the function here this is not going to do anything until we actually trigger it and to do this we can use the add action and inside here first action here is incurring the scripts so in WordPress we can do wp underscore enqueue underscore scripts and then we can pass the name of the script that we want to run so it's enqueue custom fonts in here copy and paste and close this so this should be good for custom fonts and also realize that I might need to add the nonita font so I might do that in second but if we go back to the website refresh and they're controlling you to inspect the code you will see that we have our main style sheet in here and we also have the google font which is coming up and that's brilliant should we get let's quickly get the nonita as well because I totally forgot to get that so google fonts and let's go and search for nonita this is the one that I want and I'm not sure about the weights that I want but I might just go with something like 400 and 700 so I can select this style and let's go for 700 as well and then the two ways of course you can import this to your style sheet if you wish but I believe that the link is a little bit better so what I'm going to do is copy this link actually grab the link from here and let's go back to functions dot php let's copy this line here so let's do another line let's change the URL and oops let's copy sorry we need to copy this URL here and let's paste it in here and then and then let's go back and grab the name I'm just going to set this as nonita and I'm going to grab this as well so let's put another comment in here so that would be just we also need to change the name of this to nonita and we need to change this line sorry and we need to add another line let's do one more and the nonita replace it here so let's space them out like this and we should be good to go so if I save this go back to our page actually this is the source of the page and if we refresh you will see that we're getting the nonita font as well and we should be good to go okay let's close this let's go back to our page and let's have a look at how we can include bootstrap and how we can start using it now first of all let's go back to bootstrap and have a look at how we can use it if we click on get started and if we go down to customize and then scss inside here is where you can read about how you can get started with the scss of bootstrap and as you can see the two options the first option is to import absolutely everything from bootstrap by doing by doing this and then the second option let me zoom in is by actually selecting what you want to import but we still have to import these three things these are required so the required bits are functions variable variables and mixings these are nice to have basically these are optional but if you're not using something like I don't know if you're not using something like the root or reboot you can remove them you don't have to include them and that will save you a few kilobytes today I'm going to import everything and the reason for this is mainly because when I upload this project I want you to be able to download it and start using everything from bootstrap instead of trying to come back instead of trying to figure out what's missing but obviously as I said if you want to save a few kilobytes you can do this which is pretty awesome so first of all let's grab this code copy it go back to our project let's open our main.scss file which is under the folder of css and let's paste the code so this is all good we we have now imported bootstrap and if you save this you will see that it's using a folder called node modules bootstrap scss and bootstrap this is actually assuming that we installed it with npm but we actually downloaded it manually and we don't have this node modules folder so what I'm gonna do is find what the bootstrap name is and in the css we can actually rename this as well if you wish so let's rename this to bootstrap just like so just to make a little bit neater I guess easier and and what we can do is remove one of the dots remove node modules and then so we're going straight into bootstrap scss and then bootstrap so let's save this and hopefully we won't get any warnings now it's watching and it's watching is generated the files and everything is looking good so technically if I go to main.css you will see that everything has been generated from bootstrap uh yeah and it's quite long it's a it's a big file let me have a quick look if we right click and go to reveal in file explorer this is now 234 kilobytes uh yeah it's a fairly big file and that's why you might want to consider doing the adoption but technically speaking this file hasn't been optimized and in visual study code if you're using the lifestyle compiler you can technically go to let's go to the plugin and then extension settings if we scroll down lifestyle compile if we scroll down you will see this lifestyle compile settings and if we click on those settings we can actually tell the lifestyle compiler to compile this file as minified file so I've actually done this previously so I could potentially uncomment this I wonder what I need I'd probably need comma and now this will actually save this .mini file and .css but the reason that I don't have it on is because I feel like it's taking a few more seconds longer and I don't want to like refresh the browser and keep on waiting so let me save this just to show you and let's go back to the folder so if we make a change so I don't know let's make a change technically speaking this is gonna take a second and as you can see we are actually having the main .mini file now which is should be all but together like this this is minified and also of course if you're gonna use the minified you're gonna have to go back to functions as PHP go up here and just change main to .mini what is it main .mini .css and this is going to be using the minified file I'm gonna leave it like this just because it's faster to develop and let's go back to settings and remove this and also I believe that there is another option to make it even more compressed but yeah let's remove this let's remove the comma as we in here we might as well have a look at what the size difference is let's go to .css and the minified one is only slightly smaller so the minified one is 187 so the minified is ever so slightly smaller anyways let's close this and continue let's remove this let me remove the minified minified map okay now that we have bush trap set up and or start working technically speaking if we go back to the website and refresh we should see some changes and as you can see the phone changed a little bit and I think that's pretty much it so we are getting the styles they're working the phones definitely changed we can have a look at the next step so if you go back to bush trap if we scroll down slightly you will notice that we have a few more sections in here and basically these sections show you how we can override some of the some of the properties for example here you can override the body background by doing the dollar sign which is a variable body-background and setting this to white you can do the same to the body color they have different map which allows us to do a lot more stuff such as changing the border radius and things changing colors and we're definitely going to be doing quite a lot of this and but before but before we do that I just want to mention that so if you wanted to change something you're gonna have to for example copy this variable and you're gonna have to paste the variables in here so if you're modifying anything from bush trap you're gonna have to do it on top of this import and save now we're modifying the body background color so if we save this and refresh the page you will see that it took a second but you will see that the background color changed which means that everything is working as it should so we this is how we're gonna be modifying bush trap basically so let's remove this and continue let's go back and let's start working on the layout and slowly we'll be adding styles as we go along so the first thing I want to do is actually change our website to use this to use a page instead of a blog post and to do this we can go to the dashboard and then settings general and we know it wasn't general it was reading yeah in settings reading you can put a static page and let's say our static page will be that sample page definitely we definitely need to change the name so let's save this let's go back to pages and let's click on edit sample page and let's just change the name to home and don't have to change the form link nope I think that should be all good so let's update this let's go back and now now that's called home it's all good we can go back to our website as you can see this is an actual page now we're actually getting all of the menu items which pico are heading and this is all coming from goodenberg and then the sidebar and a footer all right let's start by let's start by editing this now this page is currently using the where is it where is it the page dot php so if I put something like 123 and save this and refresh you'll see that I'm getting 123 so we definitely know that our home page is using the page dot php now I could start this page to look exactly the same as this but this would mean that every time we create a page every single page will look like this so I don't want that I actually want a custom front page and to do this we're gonna have to add a little bit to this theme so let me show you what I mean so first of all so to create a custom front page we're gonna have to create a new file and actually actually now that we're already in this page let's copy everything from page dot php and let's create a new page this one will be called front dash page dot php and let's paste everything from php from page dot php into front dash page dot php and let's actually make sure that you remove the 123 and let's do something like h1 home or let's do front page save this let's go back refresh and as you can see we have front page now the great thing about this is obviously that we can do whatever we like on the front page and then the rest of the pages the normal pages can just use Gutenberg or whatever okay let's remove this and have a look at this file as you can see at the top we have our header so if you want so if you don't want to include your header or if you want to do something custom you can remove this and your header will disappear and the same as the sidebar and the footer obviously on the front page in the design we don't have a sidebar anywhere so I'm gonna remove this save and if you go back refresh you will see that the sidebar is now gone we can start developing this page from top to bottom and that means that we can start with the header so get header means that it's gonna go and grab the header file which is the where is where is it header dot php so this is what this does this basically gets this header dot php file so whatever change in here will reflect on the home page as well we're gonna have to change quite a lot here so we might as well get started but the beautiful thing about this is that a lot of it is already set for us so we have the languages we have the viewport setup of course you can change it we have the wp head which adds I think it adds all of the styles javascript stuff we have the body class and so many good things that we're going to be using and also we have a menu that we don't have to think about it's already added and we can just style okay let's go to the design first of all and have a look as you can see at the top we have this kind of like an announcement bar which we have the phone number the email free you shipping 30 days money back guarantee and 24 customer service so let's concentrate on this and then we can do the header later and you need to go to header dot php I'm actually going to do this announcement bar just above the header tag inside here okay let's start by writing the announcement bar as I I'm gonna try to use bootstrap as much as I can but sometimes I think in this section I'm just gonna have to add a little bit of styles and then for the rest pretty much we should be able to use most of the bootstrap css classes and we can also modify them as we go along so for the announcement bar I'm going to do dot announcement dash bar and press enter this will create a diff for me and inside this diff I want to have two columns one for the left side and one for the right side as you can see the right side is slightly bigger so we can do that let's create a container and the container will basically centerline or page just like the design so we're gonna get all of the details here in the center which we'll see in a second and inside the container we can create a row and inside this row we can create the two columns the first column that I want to create will be co dash medium dash four and the second column that I want to create will be dot co dash medium dash eight and inside here is where we can start adding the information so let's say co one and let's say this is co two just for the example let's save this let's go back and refresh and as you can see we're getting co one and co two and also their center aligned on the page it's kind of hard to tell now but if I was to inspect it you'll see that the wrapper uh raised wrapper the container sorry is center aligned which is perfect just like the design let's close this and I'm going to put this on the top okay now that we have this let's concentrate on the first one and for the first one we could do this with inner columns but I feel like the right way would be to use an unordered list so let's do that I mean this me this would mean that we're gonna have to add a few stars but it's not really a big deal I don't think so so let's do a URL and inside this URL we're gonna have a list inside this list we're gonna have to grab an icon we we haven't actually imported the icons so unfortunately we're gonna have to go and do that if you go back to bushwrap and do and search for icons let's go to this page and then if you click learn more about bushwrap icons inside here is how you can install it with npm or or you can actually scroll to the bottom and inside here there should be a cdn so here we go we can either import this into or star sheet or we can grab the cdn link and I'm going to actually use the cdn link for now so let's do that let's go back open or functions dot php where is it here we go and let's add the icon here under the main dot css so what I'm gonna do I'm gonna copy this alt shift down and then let's paste this first of all I need to grab the link the cdn link removed all this I'm gonna paste I can actually paste the link in here and let's remove all of this because we don't need it and we just need to change the name so this will be bushwrap icons bushwrap icons like so and I think that should be good enough so technically speaking we should be able to start using the icons if we go back to bushwrap and if we select any icon let's say this one for example they give you an example so we can just copy this and try it out quickly so let's go we can close we can go to the header and just paste an icon here save this go back to the page just to try it out and as you can see we're getting the icon let me zoom in a little bit and this is great so let's continue okay now that we have the alarm working let's add the phone number quickly and inside here so instead of bushwrap icons bushwrap alarm we're gonna have telephone inside here to make the icon circular I'm gonna use the rounded circle bushwrap class name so rounded circle and save if we refresh the we will see that we're getting the phone number so let's quickly add the link I'm gonna do it underneath just because there is not enough space so let's do a a graph and inside here we're gonna have tail and let's add a fake 10 telephone number so plus four four five five five two two one one close the link copy the phone number paste it inside the link like so and close the link let's copy this list and paste it one more time just because we're gonna have two items here and three items in this one so let's change this and the following ones so let's change this one first we're gonna have an envelope here so buy envelope this is again rounded circles all of them are gonna have rounded circles all of them are gonna be the same but what I want to do is change this to email of course so mail to and then hello at pause gang dot shop or whatever the username is copy this paste it inside here and we're done on this URL I want to add a custom class and that would basically allow us to style this easily so the class that I want to add to this will be the same as the announcement bell copy this but we're gonna do underscore underscore list save this and now technically speaking we should be able to duplicate this so actually let's indent a little bit just so we know and that's looking good and inside the other column we're gonna paste this three times so one sorry one time is the URL but we need one more list one more list in here and we get so the first one will be the free shipping so this will be buy and then track the second one will be blue strap icon clock and then history and then the other one will be person then let's change the details this one will be we're not actually yeah we're not gonna have link here so we might as well remove all the links and just do it like this let's remove this one here as well didn't realize kind of copy the first one okay and now this one is gonna say free shipping or something like that free the second one is going to say 30 days money money back guarantee and then the last one is going to say 24 slash 7 customer support save this let's go back to the page and refresh as you can see everything is here we can now start styling it but before we do that let me show you how we can actually change all links to use the color of our team so if we go back to xd and click library you don't have to but here i have the colors that i will be using so i'm gonna grab this color here quickly and let's close this and let's go back to main dot scss and let's have a look at how we can expand bush trap so for example normally people would either import bush trap from cdn and they'll use a lot of important after every single style which is quite a bad practice especially like if you want to grow your project it could end up quite for a quick project it might be okay but for a bigger project you probably don't want to do that you want to extend bush trap and use you want to be able to customize bush trap as much as you can and in here they have quite a few examples of how you can modify stuff but today we're gonna be using this quite a lot so you're gonna learn some bush trap as well so in this let's go and first of all let's change all primary color now the bush trap primary color as you can see is blue and i want to change that to the one from my design let's remove all this and let's actually put a comment here saying include custom variables and then the foods override here okay the first one that i want to override is the primary color so to do this i can do dollar sign which stands for variable in scss and we can do primary and then we can paste the color that we want and of course this is a hex so let's do a hash and then the color of course if we click on this we can also convert this i believe if we click on this here we can actually convert it to rgb as well and save now that we've done this that doesn't mean that we're done we actually need to use the bush trap teams color map and to do this we can do dollar sign team dash colors and then inside here is where we're gonna be adding all new colors so let's close this first of all and the first color that we need to do is primary we're gonna be coming back here to add more as we go along so first of all let's add the primary color and the primary color will be equals this variable here so let's copy this and paste it like so and we should be good to go so if we save this and go back to our shop refresh you will see that all of the colors have now changed from the blue to this purpley color which means that everything with them now is working well but sometimes you might actually want to extend maybe i can do a full bush trap tutorial at some point as well but also sometimes you might want to extend those colors and to do this is slightly different so to extend the map we can do create your map dollar sign custom colors and let's inside here is where we can extend all colors like the primary secondary do default bush trap ones which you can probably go to bush trap and then where is scss and then variables i believe variables you can see where are they yeah you can see yeah they're here so primary secondary success you can change all of them but but if you wanted to add a custom one this is where you do it so let's add a custom one for all icons basically for icons we are using this purple color with the 20 percent of opacity so let me show you how we might want to do that for example we can add a custom icon custom one here and we can call it icon background let's do that then we can do columns and then we can paste the color in here so let's copy the same color but we can add a to the rgba and this is going to add alpha which means we can make this color transparent so 0.2 is going to make it quite transparent just like on the design and i just saved and i believe that this broke and because and this broke because we haven't closed it yet i believe and also yeah that's working now and also so every time you do a mistake scss will tell you which is a good thing and you have to close it and also we need to merge this map we can do dollar sign theme dash colors and then we can do map dash merge and then we need to pass theme colors and we need to add this here so we are basically merging the theme colors and the custom colors together let's do that save this close hopefully if we save this refresh everything should be good but of course we this icon is missing i'll fix it in second but of course we need to style this a little bit more let's go back and fix the icon first of all okay and i just noticed that the envelope icon is missing i believe that i misspelled this so let me change it quickly is envelope save this the icon will appear as you can see this is pretty cool let me close this to start the top we can use this announcement bar and then we can use the list as well so what i'm gonna do is in main dot scss right here i'm gonna do the announcement bar so maybe okay inside here let's add a comment and i think i saved this and that's why it broke because i haven't closed this so let me quickly close this and let's add a comment here so something like slash star star and header so we're gonna do the header stars inside here like like so so it's a little more visible and let's start with the announcement bar for the announcement bar first of all i want to change the font to be slightly smaller the the original font is the base font which is one ram which is 16 pixels so what i want to do is change this to font size 0.0 0.8 ram which will make it i believe which will make it around 14 pixels exactly the same as the design and i want to add a border at the bottom so what i'm gonna do is border slash bottom and for the border i'm gonna do one pixel solid and then i'm gonna use the and then i actually want to add the variable here and the reason for this is because i'm going to be using this quite a lot so we might as well add one more so inside primary so sorry under primary here let's add another color and we can call this one gray or i don't know border color whatever you like this one be hashtag e6 e6 e6 and this is this very gray color i'm gonna be using for the border of course we're gonna have to add one more here so let's do gray and let's pass the variable from here so gray and save we don't need to do anything else we can now use this color and the way to use this color is by doing bar and then and then we can do bush trap and then we can do dash dash bush trap dash gray and save hopefully if we save this and refresh you should be able to see the gray bar here let me zoom in you will see the gray bar here and and the font is much smaller now which is great now for the next part i'm quickly going to start the list a little bit if you remember we added this url and inside the url we have lists and the class name is exactly the same so we can start this super quickly what i can do is inside here i can do ampersand underscore underscore list and this would mean that announcement dash bar underscore underscore list which is this class name here is gonna be applied so inside here i want to add a couple of things because this is a list i want to remove any padding imagine list let's remove the list i'll type to none we don't want the bullet points and let's display this as inline flex like so and also and we should be good to go here now let's go inside the list and let's remove and let's uh and let's do a little bit of a margin to so let's do margin and top and bottom will be zero and left and right will be 10 pixels but that means that our icon will be slightly to the right so what i could do a little bit of a cheat we can do margin and we can do zero minus 10 pixels to kind of like make the list go left so it's like perfectly aligned a little bit of a cheat in here and then we can display everything as flex which will basically allow us to align the items center so let's do align everything center and save for the icon if you want to select the icon as you can see it's using this b tag as bush drop icon so what we can do is inside the list we can go once more and do bi and then inside here first of all we need to change the background color and the background color will be the one that we added earlier is this icon background that we extended so let's copy this so this will be a variable and then this will be dash dash bush drop dash icon and then background so and we're actually not done with this we want to make sure that everything in this icon is centerline so i'm going to quickly do an inline flex so display inline flex could have done some of it with bush drop i guess let's justify everything to the center align items center basically i'm centering everything let's give it a little bit of a width for every single icon so height 30 pixels and let's give every single icon margin right of something like six pixels let's save this and see what we get so go back and refresh you will see that some of it is working but some of it is not oh okay some of it is working and some of it is not and because this is a class name so we need to add dot don't forget that and refresh okay refresh sometimes the refresh takes a little while because obviously has to compile all the bush drop stuff but as you can see we're getting the icons now they're looking pretty cool of course i'm zooming so much that's why and and of course we need a little bit of space and what i can do for the space we can go back to the html maybe and control it with bush drop so we want on the announcement bar we can add padding top p as padding and t as top and we can do padding top two and then let's do p bottom two padding bottom two and save and this should add a little bit of space just to make it look a little bit better now one thing that i'm not happy about is that at the moment these columns actually left aligned so we need to change this i want to align this column to the right side so to do this we can actually go to the column which is the md8 and i'm gonna show you what this means is well in a second um but what we can do is display this as flex with bush drop so d flex and then justify content and save this go back refresh and as you can see this is now on the right side which saves us a lot of time the empty just means and by the way the co-md that means just kind of like a middle screen breakpoint will probably go in a little bit more detail later on but but yeah that's all looking good and one thing that i was thinking about is if we go to mobile at the moment this will break and because i haven't done the i haven't done the correct columns i can do one for extra small one for small and one for extra small and they can stack but for mobile i'm actually thinking of just hiding this bar so i'm gonna make this one work on like medium screens maybe around here and then i'm thinking of just removing it because oh my wow it's just gonna take too much space but if you wanted to stack it of course you can do co small and then 12 and then copy this paste in here refresh and if we go to small you will see that they're stacking but obviously we have two columns and maybe you can just center line this isn't too bad actually but i don't like it so i'm gonna remove it okay in order for us to be able to hide this from mobile i'm going to be using the bush drop media queries so to do this we can go back to main.scss and there are quite a lot of media queries that you can use it's quite helpful but the one that i'm going to use is media breakpoint down so let's include a bush drop media breakpoint by doing add include and then we can do media and then dash breakpoint and then down and let's do large let me show you what this will do so now inside here we can just do display none and what display none save this what this do basically everything down from a large will be displayed none so this announcement bar will disappear if we save go back refresh as you can see on desktop we're absolutely fine if we inspect and make the screen a little bit smaller you will see that this bar is disappearing and i think it's just disappearing on time i mean it's not it's not exactly perfect maybe maybe the spacing between them can be shortened and so on but these are things that you can spend a little bit more time fixing all right now that we've got this done let's have a look at what we need to do next all right the next thing that we need to do is the header so we need the logo we need the search bar and we need the items luckily for us we already installed will come us so we should be able to do this super quickly all right and we can use bush drop for this as well which means we're not gonna write so much css so in a header let's go down and in the actual html header here is where we'll be writing everything else now it's a little bit difficult to see with all of this and because i'm zoomed in so much but what i'm gonna do is let's create a new div and slowly we can pull up some of the stuff so this one is gonna be a div with a class name of container so it's in the middle and also let's put a little bit of padding padding top to be two and padding bottom to be two as well and inside this container we're gonna have to create a row so let's do row and for the row we're gonna have three columns the first column will be for the logo so let's do .col and we can even give this a a class name just in case you want to style it we can do site header so i'm basically copying this site header class and then underscore underscore let's do logo we might not end up using this but it's nice to have and then inside here we need to add our logo and to do this we can graph it from here so we can just do the logo and of course this is php so we're gonna have to open php in here and close php and add the custom logo and save now this is the first column the second column will be or search so let's do .col and then this will be .medium and .5 and inside here we're gonna have or search bar we'll do this in a second let me first of all do the columns and then one more we need one more for the basket and for the basket let's do .col then we can just add a few classes in here maybe we can do .cards .card just to make it a little more specific and let's do .card all right save this and and let's have a look let's refresh and if you can see it's a little bit hard to see obviously but if you see we have three columns here this is the logo search and .card and also we have some details here that we could use or we could hide temporarily so let me think about this some of these things can be quite useful actually like the title and the description but to and as you can see you can just grab them from here style them the way you want but i'm not actually going to be using them so for the site branding i'm just going to remove pretty much everything here i'm only going to leave the nav which we'll focus on after this section so let's save this go back refresh everything is looking good and now we need to add the logo now the way the logo works is we usually have to go to customize and then we can add our logo from site identity and then select logo now the problem i'm going to have is that WordPress probably won't allow me to upload svgs a quick fix for this is if you go back to the dashboard and do plugins then add a new plugin and allow svg sg there was a plugin that i used can't remember i'm not sure which one it was i think it was i think it was this one here so let's do the wpsvg images and hopefully this will allow us to upload svg images so let's go back to the website then customize and then site identity let's select a logo and hopefully if i go to my folder and drag my logo in here yep they allow me to drag the logo so of course add add your old text add your titles descriptions and so on it's all very useful and and select and now we can just quickly do this and skip property actually and as you can see we now have our logo here which can be added from the customizer which is pretty cool and we can publish our logo is saved we can remove this and i wonder what i need a little bit more padding in the top and bottom maybe let's finish the rest and we'll see for the search now we can either do this manually or i was thinking of actually using another search so let's go back to plugins i mean the less plugins that you have the better but i wanted to show you this WooCommerce search plugin that is kind of it looks quite nice so advanced woo search let's install this and it's very easy to add that's why i wanted to do it i think i showed you how to do the original one last time in the previous video but let's do this one now so active and if we go to the settings then you will see that you can either get the shortcode which pretty cool or you can add the php to your page so i'm gonna get the php copy and let's go to the header and inside here where search is i'm gonna paste the php code and save if we go back to the page let's open another tab let's remove the icons um please go to settings and click re-index table button okay so it has to re-index the products in order pop-up to work so this should be done now okay so this is done now let's remove all of this and refresh and as you can see we're getting a very nice search bar you can go back and you can actually customize this i can't remember where it was search form and then you can have a button you can have a loader and all sorts of stuff okay here we go we have a few styles maybe you want this one so select that and refresh and that's looking pretty cool i might actually use the simple ones so i'm gonna use this one here i mean technically speaking yeah i'm gonna use this one here but of course use whichever that you want and save so let me show you how this works if i refresh and if we search for a product so t t-shirt you will see that they're dropping down nicely and this is why i like this plugin there might be some other ones as well but yeah that's why this one is quick and you can remove the searches and so on all right let's now focus on the card now for the card i'm not going to waste your time and i'm going to show you a very easy way of doing that so if you go to the work commerce docs and search for show card contents slash total you will get on this page and basically we can just use this for our card so let me show you how we can do that so if i was to copy this here we can actually go to the header and paste it inside here let me toggle the world wrap if you want to copy this you can pause the video and copy is quite long so i'm gonna paste the so the link will be in the article as well or under the description and then if we go back we also need to copy this code into a functions dot php so let's grab this quickly go to functions dot php and save it somewhere maybe like here at the bottom and show card contents that's all good and save if we go back to the website and refresh you'll see that we're getting zero items and zero zero zero and this is because we haven't actually added anything to the card here but this is working from wall commerce which is pretty awesome and now we can focus on styling this super quickly now let's have a look if we go back to the header dot php move this let's move this let's move this and let's remove this for the container we have padding top and padding bottom for the row i want to align all of the items kind of like centered so what we can do is align dash items and then center and this will kind of like this will center everything as you can see and then then we have the header logo here which is good i think that we are good with the search maybe we can just modify with tss in a second and then for the actual card we also have an icon in the design so we might as well add this the icon the icon will be i and then class of bush drop icons and then bush drop icons back dash and then actually the word dash and then padding and then we can add a little bit of padding everywhere so padding top right bottom and left of two and close this we also need to close the eye like so and save let's have a look whether we get the icon and that's all looking good with a little bit of padding but i wonder whether to link this as well i know what you think maybe we can link this as well and if you wanted to link the back we can just use the link from here basically so this one here will do so we can do another link a href and inside here we paste the php code and close okay so the back is now linked as well if we click on it this will lead us to the card obviously this card is a little bit broken but we'll fix it as we go along and we can actually click on the logo as well which will lead us to the homepage pretty awesome now let's make sure that this is aligned to the right and let's make sure that this search bar has rounded corners so on this column which is the card we can make this as display flex display flex and we need to justify so justify content to the end and then we can do align item center like so let's save and refresh and as you can see this is looking good for the third bar i'm wondering whether we can use the border let me have a look actually i won't be able to do anything with bootstrapping here so what i'm gonna do is i'm gonna use the class name from here side header so everything is going to be wrapped in this let's do side header underneath this header comment here so side header and i'm gonna grab the class name which is here so if you inspect it actually i might be able to zoom in on this okay yeah that's much better so aws search field is what i need and this is a class name and now what i want to do is set the font size to be slightly smaller so font size 0.9 ram which is slightly smaller than 16 pixels and then the border radius i want to set to 20 pixels and and we might have to overwrite this unfortunately let's have a look if we save this and refresh the font changed the thing but the border radius did not so we might have to do important which is okay i guess once in a while okay the important worked but but now the text is far too close to the border so what i'm gonna do is just add a little bit of padding to the left hopefully that would be okay so padding left and then i don't know uh 1.4 ram something like this it's taken a little bit of time okay this is much better i'll prefer this is quite minimalistic and it's looking good and of course i have the as you can see that we're going down and this is all looking cool until it's not so we're gonna have to center this as well on mobile it's not looking so great on desktop is quite nice actually so let's fix this so for mobile let's go back to the header okay so for the logo because we are technically designing mobile first and then going up and now we might not look like it but that's the way it is and because of that i want to set the logo to be centered in the middle of the search bar and the items might need to be centered as well but let's center it from now and to do this we can use bootstrap so we can display the logo div here as flex so we can do d flex and then justify content dash center dash content dash center and if we save this refresh the browser you will see that the logo is now in the middle but when we go up the logo still stays in the middle and that's not how i want it i want the logo to be on the left side after we go like a tablet mode or like a desktop mode to do this i can give it a medium uh kind of like media query uh so we can do justify content and then we can do md start so after the md media query this the logo should go to the start so if you refresh we have the logo at the start and if you go down you will see that the logo is in the middle now which is pretty cool we definitely need to add a little bit of like maybe padding on the logo so we could do padding bottom to save this refresh someone like this obviously will have to play around but i don't want to waste too much time the search is actually taking full width now which is okay technically this is set medium 12 5 but it's not set to maybe we need to set co dash small 12 to be safe i mean all of them need to be like that but it doesn't seem to be making much difference so let's just one here does take in 12 as well so let's do a little bit of padding on this one is all padding top of two pixels or three so look and that's looking good um we can definitely do the same for this one here so let's copy the deflex center and then actually let's copy the whole thing and what i'll do is we already have deflex justify end so what i'm gonna do is do deflex justify content center for mobile and after mobile we want to do justify content media media media query and then end and hopefully refresh now we have this in the middle and if we go up we have it on the right side which is pretty cool this doesn't seem to be centerline and i think it's because i actually removed the thing from the row okay yeah i think i removed earlier or i had to i had to read at this align item center to the row just to make everything in the middle and that's okay for now so let's continue to save a little bit of time the next thing that we need to do is the menu so for the menu we're gonna have a solid color and then the items as you saw earlier we already have some of the items in here so we can definitely speed up the process for this and let's go so under header dot php let's scroll down and you will see this nav so for the nav let's remove this let's paste it out a little bit so you can see so for the nav there are a couple of things that i want to do um first of all first of all let's add the background for this navigation so we can do so we can do background dash primary and this will make the background navigation color of the nav the purple color that we have the primary color that we have here and let's see what else we need to do we need to centerline everything in the middle so for this we're gonna use our trusty container so let's do the container and inside the container is where we'll be adding all of this so we have a button that is actually used for mobile and we have the actual navigation bar for the container i want to justify everything in the middle so let's make sure that this is set to the dash flex and then justify content center so that will center everything in the middle for the button and the actual button and the actual links i'm thinking of actually creating a row so when we go on mobile let me show you let's refresh you're not gonna be able to see the links now because we need to change the colors there here but if we were to go on mobile what i want to do is i want to make sure that this button here is on top and then we have the items at the bottom so they expanded the moment as you can see this actually works it has the javascript to expand the menu of course you can't see them but we'll fix this in a second so let's do that so let's create maybe there is an easier way to do this but let's just create a row and this will have two columns so first of all let's create a code of 12 and then we want to justify this to like we want to centerline this so we can do maybe deflex and then justify content center and then inside here is where i'm gonna add this button and then we need one more for the menu so let's do class of call dash 12 and for this let's do text align center text center and add the menu inside here let's make it a little bit better something like this that was good it's a little messy now if we save this and go back hopefully if we click on this you will see that it's expanding down which is good we just need to add it to the button a little bit so i'm gonna do that and also we need to change some of the links so let's go back to the website and go to appearance menus so let's create menu one and we can assign this menu one to our primary menu and save so technically speaking if we go back and refresh you will see that our menu is coming up we can quickly change them with tss so if we were to go to main.tss we can do maybe like we know that we have if we inspect the website you will see that we have a main navigation class name here and then we have we have a current item menu and then inside we have a link so we can start this super quickly let's do that and if you go back to the main.tss we can do maybe like let's do main menu close it and then put the main menu let's do main main dash navigation and then what i want to do is set the form weight to be a little bit bolder so 600 i believe was one of them and also we need to set the current item let's change all the links to be white so a and then we can do color and to use the white variable color from blue strap we can do we can do var and then inside here we can do dash dash blue strap dash white like so if you were to save this and go back refresh this should take a second on you you can see that we are now seeing the text and the next bit and let's go back to the css and do the current link the current page that we on you might want to do something better than this but i'm just going to underline it for now you can do anything like i don't know a border or background color whatever so i mean technically speaking let's do that actually let's do current item dash menu item and then inside this current menu item and maybe we can just change the background color to this to be something else um i don't know let's copy this color here and let's just change it ever so slightly uh so that would be background color and then rgb and then let's just change it to i don't know a light one yeah something like this would do let's have a look or maybe we can just underline the link okay okay as you can see this works kind of is like you can see which one is selected so that's good maybe we can just give every single link um a little bit of padding so we could do instead of doing the a we could do uh we could use the menu dash item and in fact oh okay menu dash item is the actual list so it would be best to give the padding to the actual link so they're easier to press instead of doing this okay so let's do i don't know padding of zero top and bottom or actually let's do padding of one ramp so 16 top and bottom and one point four ramp to left and right i'm not sure what that is i'm just guessing need to refresh sometimes takes ages i am zoomed in quite a bit so this is how it's looking so this is what we get i mean this is a little bit bigger than what i would like the design is a little bit smaller i don't want to measure and waste too much time but maybe 0.6 and refresh okay that's a little bit better and the buttons are now easier to press obviously it's gonna be nice to get a hover as well so we could potentially do this and add a hover effect so hover and i can use this for the hover effect as well maybe uh but you probably know how to do this so i'm gonna leave it okay so we got a hover effect as well it's looking good some animations would be nice and if we go to a specific page you'll see that the current page will be active we'll have this color and this is actually looking all right because it's using the walkover styles but we'll get to there later so we're still here we're pretty much done with this for desktop but if we go down on mobile you will see that we have the button and then we have the links in here now the issue is that they actually they're actually in a container so we could potentially take them take them off of container if you wanted to if we want that to be full screen we have to take out the container oh that's a little bit annoying but let's leave it because it works and let's just change this to a better looking menu so i'm gonna do inspect and go back to mobile and let's see how we can change this to make it a little bit better so in the header we have it as a button menu toggle now this class is actually used class is actually used to expand the menu so we definitely don't want to change this so what i'm gonna do is i'm actually going to use this class to modify the button a little bit and let me space it like this so you can see and then inside here i'm also going to add an icon so let's do an icon with the class of bi and then bi last and then let's close and then i to close the icon sorry not last list so this will be like a hamburger icon if we refresh yep you will see that's looking good but let's just change this to make it slightly better and continue obviously you can spend a little bit more time to make it nice main navigation so we could use this and inside here we can do the menu toggle and for the menu toggle let's do background color of primary color and then let's do color of white you can actually use the variable white i think as well so that should be okay uh if we refresh we kind of get a nice menu maybe we can remove the border let's see if we add border zero okay border zero will do or border none yeah both of them will work so let's do uh border none border none like this save this uh refresh see what it works um it doesn't seem to okay it's working i think you just take a second so that's working the menu is working quite nicely um could make it slightly bigger and we could potentially could potentially create a custom one position this one at the top because he's this set it could definitely be a little bit better maybe that could be positioned there but i will leave it for now and continue but as you can see it's quite responsive it's looking good so far and let's have a look at what's next on the list one thing that i spotted is that i have the underlines here and i think i did fix them but i must have done control z and to fix this we can go to the header dot php and where the links are we can just give it a class names of of text declaration none so text decoration dash none and if i copy this to the other one as well uh that should fix the issue let me close some of the other stuff and yeah so that fixes the issue the next thing that we need to do is this slider here now i'm gonna go a little bit lazy on this and do it as a bootstrap slider but i'm only going to put the image inside and the reason i wanted to do this is because that would allow you to technically do more creative banners if you want to have the text here for SEO purposes it won't be too hard to do because we have to do is container row and then position this to the left with the the flex and justify and aligning to the middle so it's not too hard to do but the speed of the process i'm gonna do it with images and show you how to do the slider to be able to use the bootstrap slider we're gonna have to get the JavaScript stuff so if you go back to bootstrap get started and find where the JavaScript is so j s um if we scroll down nope if you scroll up um okay yeah this is what we need so we need this popular dot min dot j s file and we need this bootstrap one so if we get the first one first of all and let's open functions dot php and let's make some space what we can do is actually we can do the navigation first and then we'll do the bootstrap ones so let's paste the first link and let's go back and grab the second link here so i'm gonna grab that and paste it and now what we can do if i minimize this if i duplicate this line here which is wmq script what i can do is change this one to bootstrap popper grab the link from here and replace it inside here which means that we won't need the template directory so we can remove it and also we don't need this and inside the array we just need to put we just need to put jQuery so if we'd single brackets just put jQuery like so save let's duplicate this and replace it with the bootstrap minified JavaScript files let's do that and loading it from the cdn means that it will be pretty fast and many other people have probably already loaded so it'll be even faster so this needs to be changed as well to bootstrap maybe script and last but not least we need to create a custom script just in case we need to do something and actually we will need to do something so let's do another line but this time i'm going to have to use the get template to your array and then do it here and then replace all this with the file so be in the js folder and then i'm going to create a file called script.js and that needs to be changed to something else so we can do that and then script the name of the website and i script save this and let's create this file so js script.js inside js we go and create script.js and save all right save this we're gonna need a so don't close it just yet and we need the front page as well because we're gonna start working on the front page for the front page we're not gonna need we're gonna need the header we're gonna need the photo but we won't need all of this as we're not gonna use Gutenberg we're gonna do a custom front page and technically speaking i wonder whether we can do sections inside the main let's do that we can do different sections inside the main and i'm gonna go ahead remove the photo so it doesn't get in away from now but later on we'll get to it and edit it so save this refresh the page just to make sure everything's working and yeah that's great okay we're gonna have the slider here so if you go to boostrap and look for slider or carousel carousel here it pops up how it works slides only so i'm gonna scroll down and find the one that is animated which one was it must have missed it it's i think this one i don't know why it has so much padding um do the other one stuff yeah okay cool okay i think this one will do so let's do the dark variant so i'm gonna copy of this from boostrap paste it inside here i know it's a lot of this what i have to do now is this for good yep that's looking good um what i can do now is if we go back to boostrap and scroll down you can see the way you can use it and all the other options that you can add like the keyboards intervals posts and so on but i'm gonna save a little bit of time and just go for the absolute basic here so i'm gonna copy this java script and paste this into scripts.js and we'll and we need to replace this document query selector with this one here so this id we can add to the scripts and save so if we save this as well and go back to the front page you will see that we are getting the slider and things are moving around obviously it's a little bit broken so we're gonna have to fix that that's all looking good it's working let's replace it let's replace the images um actually yeah you can replace this with the text if you wish to but i'm gonna be lazy and just do images i think for SEO purposes 100% go with the text but for creativity just images and i'll show you an example if we go to amazon you will see that they have this as an image and the reason for this is is because they can be a little bit more creative with what they design but yeah that's pretty much the reason i'm doing it okay so i've already prepared images so here the images slider i have they extracted from adobe xd they look okay i wonder if they're gonna be blurry but yeah let's get the slider images and let's go back to the project folder so that would we don't have an images folder so let's create one img for short and inside images folder i'm gonna paste the slider images i'm gonna remove this defend and replace the image to replace the image i want to go to the directory so i'm gonna have to use php and let's do echo get underscore template underscore uh directory underscore ur i and then close this and then we can do we can close the php and then we can do slash images img slider and then slash slider dash one i believe dot jpeg or i think there is a bigger one let's have a look images slide okay slide one slide one dot jpeg uh there is a bigger version if it's blurry but let's go for this save refresh and as you can see this is looking a little bit too big but it's actually pretty cool so let's replace the other images as well um i'm gonna grab this and for the second one let's do the same remove the text uh paste this one here and i actually have only two slides so let's remove this one and yeah that would do i do have only two slides so this will be image two okay so we have the first image we have the second image and they are ridiculously big but that's fine um as you can see we have a lot we might have to remove the third button now let's remove them uh these are the buttons at the bottom here so if we refresh yeah these are the buttons here we might also want to make these images links but we'll do that in a second so let's first of all put this in a container so it's not so big so to do this we can actually create a section should have done that first place but basically we want to wrap this in a separate section and let's do section with a class name of container and let's give it a padding bottom or five just to space up all the sections and let's close the section like so and let's plug in everything inside so it's a little bit tidier all right let's refresh and as you can see because we are in the container now this is contained and and it's actually using the image height in order to do the slider everything is looking blurry which i don't like this is because is we are obviously using jpeg and so at some point it would be properly sharp yeah it's the size i think uh but it is what it is inside here as i said you cannot text and definitely we need to change these ones so you white and plug them in inside a little bit that's all good one thing that i noticed is that we have a little bit of space at the top so i definitely want to add a little bit of space let's have a look at how to do that so padding bottom five padding top three i'm guessing here but um yeah three or four would be okay four is a little bit better and i want to also give a slider border radius and we need to make our flow hidden do i have to do this on every single no i don't have to do that i can do it on the actual slider maybe so where the class is at we can do overflow hidden and maybe round it of i don't know two three i don't know which one works in the moment let's have a look uh that did work that's perfect but what i want to do is i want to create custom rounded boxes because most of my design as you can see in here is using border radius of 20 and i've done that on purpose actually just so i can show you how you can do that with bootstrap so we're gonna have to do a little bit of a modification if you wanted to do just maybe like round it so we don't have to do one rather one rather two one three uh they are not rounded enough for design so let me show you if this works we leave it uh you can uh but um but i want to show you how you can do a custom one to modify the rounded class we're gonna have to go on top here on top of the bootstrap import and and we're gonna have to edit the rounded utilities now let me show you something if you go to bootstrap and go to where is the scss and then utilities we want to find rounded i think okay this is it so we want to run to find this copy this and inside here and paste it inside here we're not gonna use we're only gonna use this as an example so if you go to bootstrap and find customize uh i think utilities can you do utilities okay utilities and then maybe borders i don't think that they have options rounded uh no border radius maybe okay this is it so uh they don't actually have an example of this uh i think okay they have an example somewhere but it's a different one and i just figured it out a little bit so what we have to do is we have to use this and then we can do dollar sign utilities uh column and then open with uh brackets and inside make sure you close this and inside the brackets we need to pass rounded just like so column and then inside another brackets we need to put property just like we have it in here and the property that and the property is border radius and then we need to add the class name or from it and we need to add the values so values is where i'm gonna modify the values for my needs so uh in brackets here we can do new which means every time you type rounded this is the new one the new one i want to set it as one ramp for example and let's say that i wanted to and the problem with this now is that it's going to override everything else as well there are a lot of different ones as you can see like uh where is it like i think rounded zero one two three and circle and so on but i think that this is going to override everything so if you want to keep the circle you're actually gonna have to do circle like so and do 50 percent and that would work as well so if we if we now go to the front page and we do rounded on this the rounded border should be much bigger than it is now let's refresh and as you can see this worked straight away so this is how you'd modify some of the utilities i'm going to be removing this now let's remove this from here actually yeah you can see new zero one two three circle and so on i didn't even notice it but yeah um you can use this as a guide and yeah that's all cool let's save this and let's see what else we need to do all right the other thing i would probably do is modify these uh arrows let's have a look at what class are they using let's see so carousel control okay they're using carousel control preview icon and next here so we could potentially do that and i want to modify the width of them just so they go a little bit to the left i want to modify the color we could do but let's leave it okay so let's modify that a little bit so main navigation we're gonna have to start a new one so this would be let's say slider this could be home page actually um front page and then yeah okay that would work so we know that we have a carousel yeah carousel class so let's grab that carousel and inside the carousel i'm gonna do the carousel control preview and carousel control next so let's do carousel control preview uh actually we can do them on one line because we want to change the width of both and then we can do with a comma we can do dot carousel control dot next and then inside here we do width or nine percent percent keyboard has changed okay nine percent unsafe if we go back refresh again sometimes it takes a little while maybe i've missed something uh yeah carousel carousel save okay they moved a little bit to the left so they look a little bit better now um another thing that this is obviously going to be uh responsive but to be completely honest with you i would probably hide this one on mobile and create totally different images or actually do this with text and stylef for mobile and then go uh your way up and so on but in but i consider this as done for now maybe if you wanted to make links we can do that by going back to the front page and with the images we can just do a href and then just create a blank link for now and then let's close this and then we can do the same for the other one so ahref and then blank link i think there was a better way of doing blank links i'm not sure and then let's save this and yeah as you can see this is now a link so we can link it to a different page and if we click on this as long as the setting is on this is better bigger that should be good and we can now focus on the next section all right the next section is popular products this should be an easy one i'm gonna copy the title and let's go and create a new section and then if here i'm gonna do a little bit of space for you to see better and concentrate on each section at the time all right for the popular products we can do another section and then that section will have the class name of container and the reason for this is this section is going to be white so it can be it's okay to be constrained to the width and then we need to close this section let me do that a bit messy and then inside this section so many tabs inside this section we need a title so let's do h1 with the class name of text dash center and patting top five to space out everything a little bit and let's close the h1 and this will be popular products then we can create a paragraph close the paragraph as well and inside the paragraph we can just copy the text from the design which is going to be the same everywhere so let's do that and the two ways of doing this i think the good way is to constrain this width right to a certain to a certain size so the text wraps or you can do the lazy way and just like add a breakpoint somewhere around here and if we refresh you will see that this breaks it we need a little bit more space what can i add let me add a container it's patting top five or okay just to make some space okay just to make some space so we can see but yeah as you can see this is now on two lines but yeah i would potentially constrain this to the width and i think bush wrap this half class with midi crease i think bush wrap this half i think you can do for example on the p-class we can do the class and i can't remember what it was it was width and then the number and maybe 20 i don't know what that would do let's have a look it's not doing much i wonder what i think this was 20 percent so let's have a look okay here we go bush wrap sizing so we could do 25 apparently i think this looks like okay so undersizing okay so under utilities there needs to be a sizing one and okay this is what i was thinking we could use the maybe 25 or 50 so width 25 let's see what that is um width 25 i don't wonder what i need to do anything else uh the inline block potentially or is this for the height let's have a look at how this works okay this worked actually and now we probably just need to like center along this somehow we need to kind of like put this into a row i think and then we can justify in the middle which is a little bit annoying um but yeah hey let's do that so we have a container we have a deal with a class of row and then we can maybe do the uh flex and then justify justify content center close this row like so and as you can see this is now aligned but maybe um it's looking a little bit ugly if i'm honest for some reason maybe we can do a 50 i don't really like how this looks um so i'm gonna stick to my other so i'm gonna stick to my other option which is just doing a breakpoint here uh but this is the way that you might want to do it so i'm gonna remove this because i just don't like the look of it um and then save let's go and that needs to be text align center so class instead of with 25 let's do text center save this and refresh okay that's much better looking to me and now we need to create another diff for the product so that would be an easy one we can do a diff with the class of uh padding top or five just to space out things padding bottom five and then inside here we can add or first walk on my shortcut which i will show you where to find so so if you go to the docs dot walk on us dot com documents slash walk on my shortcut this is where you can find a lot of the shortcuts and how you can use them so as you can see here they have a lot of examples you can definitely do it with php as well if you're gonna do some custom crazy stuff but this is so but you can do so much with this i'm just gonna show you quickly so for example we can just get the products so um yeah we can just get the products and that would work but also we can set how many columns we want and maybe we can set the limit so the columns the columns is actually set to four as default and and yeah you can limit the products as well so what i'm gonna do is copy this paste the shortcut in here but that won't work like this because this is just text at the moment so i force to save this and go back you'll see that it's just gonna appear as text so what we need to do is convert this um and to do this we're gonna have to do php echo shortcut do sorry do underscore shortcut and then inside here is where we add the shortcut like so and we close this oh we close this we close the php but i need to put this in single quotes as well so like so and save let's clean it up a little bit and let's finish this shortcut so i said that we want columns of four and we want limits of four which is the default so we definitely we don't need to set that but if we save this refresh you will see that we're getting the products and they're looking pretty cool let's finish the other sections first of all and then we can have a look at how we can actually customize all this without breaking anything the proper way of doing it so the next section here would be categories uh this is hopefully is gonna be a quick one as well what i'm gonna do is work these as images use the border custom border that we created and yeah we'll see how it goes i'm not gonna spend too much time on this but these are basically gonna be a different links and you can make a better design on this of course which is an example section let's create a new section and and as always inside this section let me space out everything okay and let's remove this okay so inside this section sorry this is not gonna be a class container so we're gonna put the container inside because we actually have a background color here so we're gonna change so let's see how we can do that so let's copy this and instead of container let's do section of class categories let's give it a padding of top five padding of bottom five we can inside here we can do container and then we can start by doing the same thing as here so let's grab this and paste this so for the h1 we can say what is it uh categories and i'm gonna leave the text as it is because i don't have another one and now we can start creating the categories so we're gonna make this responsive as well with bush trap um let's have a look at how we can do that so so technically speaking if we look at the design we can have oh excuse me we can have two rows so the first row will contain three columns and then the second row will contain two columns let's do that so we can do that row for the first one here and this row we can give a class name of category row i don't know okay this row this row will have padding top of five and padding bottom of actually no we don't want padding bottom on the row we want padding on the actual items so let's do this as padding top only and then inside here we're gonna create a custom class called categories columns so let's do that categories underscore co underscore underscore co just to make it consistent and this column on medium screens will go for co will go for co-md4 and for small screens will go co-small12 so it's full screen on mobile devices and for the extra small actually do we need to set extra small probably now let's try it like this and and inside each column we're gonna have it as a link so href and then a link and each link will have an image image source and then we need to add the source to it in a second we need to add an alt and we probably need to add some classes as well so I'm gonna add them class in here so we can see a little bit better let's close the image and also what I want to do is make sure that those images are loading lazy it's loading lazy so the reason I'm doing the actual boxes with an image inside and the text which I'm gonna add now is because if we add the image as a background image to the container we can't actually load it lazy so that's why I'm doing it this way loading equals lazy is basically gonna help with performance and we can put all text and images and so on I think is gonna be a little bit better so that's why I'm gonna do it this way but saying this let's quickly add title and talk about this so let's put h2 and the first one was toys and then foods okay the first one is toys and let's talk about this now now this could be a little bit of a problem because technically speaking we are wrapping everything inside the link I think that the correct way of doing it would be through screen readers and usability and stuff and actually search engines probably like the link it would be nice if the h2 was outside the link so it can be read as an h2 tag and then we put the link inside it but saying this hopefully that would be okay it's just a little bit lazy I think this is some information that you might want to look up so let's leave it as it is and let's concentrate on doing the first one because if we do the first one correctly and we can copy it three times that would be done let's get an image first of all to get an image we can actually scroll up and get this so I want to go to the template directory where is the source we want to go to the template directory and then where is images let's open the folder images and inside here I'm gonna add a few images so categories I think these are the ones I'm gonna be using so let's add them categories let's open them actually I'm gonna open them in here so I can see their names and the first one will be so we have to go images and then categories couldn't make this shorter and the first one is toys and then jpeg I think they're fairly small images so we'll see how this goes obviously all text is important loading lazy is important I will add certain classes in a second so let's have a look at what we get we get the first one here for some reason it's not in a container okay so yeah okay I need to wrap everything inside this container I believe and I wonder whether I need to wrap this in another row so we'll see seems to be working so that's all good so let's do a lot of bootstrap styling to this so in this room we have everything good we need to style the actual href here so let's add a class and this class is gonna have of co-medium screen 12 then we're gonna do width needs to be set to 100% the height needs to be set to 100% we can then display this as inline block put a padding of three round days so we space each category and then we can do this as position relative dash and then we can do rounded and we this rounded class is the one that we made earlier and now we can do overflow hidden so the rounded boxes work and we actually need to make the image positioned absolute and I want to make the image to fit the actual object so what I'm going to do is let's do for the image let's do position absolute top zero um bottom zero then end will be zero and start will be zero save this let's refresh see what happens and as you can see the border radius is not working but we're gonna have to modify this a little bit with some custom styling so let's do that quickly so in main dot sc says let's go and do let's copy this comment and let's do categories I'm sure there is better way of doing comments about and then we can if you remember for the category I used categories so let's copy this actually don't need this don't need this don't need this so let's copy this and paste the categories and inside the categories I want to have this background color so I'm gonna save a little bit of time just grab it from here and the background color paste the color here let's do category row category sorry row and then wow it should have been category but it's too late now these categories and category row inside the category row we have a column so we can do and and scones call call and now we can say each column maybe can be a height of two one two pixels that's it for the image in actually yeah for the image inside the column we can say width needs to be 100% and object fit needs to be set to cover or contain let's have a look at this first of all save we get the background color but this doesn't seem to be working I wonder I wonder what is this so we have row oh you know what I think this is not correct it's dot categories and then underscore underscore call I think they are my work no categories go that's cool um categories call height uh okay sorry this categories row doesn't exist so let's remove it up I was thinking I made one um let's remove it and that would work okay I just mess it up a little bit but save this refresh okay that's a little bit better but because we're developing mobile first and then we want to go up and I want to make this height to be equals the same as on the design so mobile is we can make it smaller but if you want to make it bigger on desktop or different media query what we can do is include a media query so let's do include and the media query will be media dash breakpoint and this one will be up so anything from medium and up we want the categories column here to have a bigger height so height of something like 336 pixels and save so this should be bigger now yep if we go down as you can see it's gone down to smaller one I believe yeah I think this is working so this is all pretty good the image is a little bit smaller I do have this container thing but yeah well these are things that you can always mess around with not so important in the moment now for the text we want to add some sort of a background so it's a little bit more riddle I don't really like the design so much but let's do it anyway so let's do h2 and let's do class of position absolute bottom of zero start of zero end of zero and then padding of two margin bottom needs to be set to two because as default headings have a margin at the bottom so that's why I'm resetting it and then we want to text align this to the center and we also want to make the background color to primary and we also want to set the text to white save this have a look at what we get all right this is looking pretty cool one thing that we could change is on the original design we have the color set to 80% so what I could do is create a custom one with boost draft so if you go back to the top where we add more colors I could potentially create a custom one so let's copy this one here just to show you so we can do primary and then opacity to I don't know this is probably about opacity to eight and what I'm going to do RGB set alpha as well and then for alpha we're gonna do 0.8 as 80% and now I can actually use this so let me show you if I save this actually yeah I do need to add it here so let's copy this line and do primary opacity eight maybe great naming this so here and save then let me show you how we can use it if you go back to the front page we can potentially do background primary and then we can set opacity to eight if you want to do that so let's save refresh and as you can see is getting transparent so that's the way you might want to do so of course oh this is this is going to be a link and now I can potentially just copy this and just change the image and the name so let's do that so we need two more one two a lot of space so the first one is toys the second one is food my voice is going now and the third one is scare and then for this one I think it's just food .jpeg I think for this one is just care .jpeg and nothing important inside in there but I can do view toggle wrap it's just ugly now let's refresh and we get food and we get care one thing that I noticed is that I didn't change the titles but I hopefully I'll remember to change that later and now let's do the rest two so the rest two will be quite similar we're gonna do a row this row we're gonna do a row here another row this one won't have the padding of we won't have padding top so let's do close it and this row will have margin bottom maybe margin bottom or three and inside here we can copy one of them columns but we need to change them a little bit so this one will be medium four small 12 that's fine yeah I think that's fine and then maybe margin bottom or three I might have to do that on every single one actually so I can do margin bottom three margin bottom three margin bottom three um this will be a care believe but we need one more so this will be four and the other one will be eight because we have 12 column grid medium this will be eight and on small devices I wanted to take full weight so that's fine 12 is fine let's refresh and see what we get um this is perfect so if we were to scale down the browser you will see that they're scaling the images are not fitting so we definitely need to do another media query but you can see that our small media query is working which is fine I mean a little bit ugly you can see that our media query is working so you might just want to add different media queries or make them different sizes just to make them a little bit better but you know how to do this now anyway you can just add more media queries and make the size of the columns or whatever you like now now that we know now let's change the images for rest and finish this off so one to care is where we need to be care we need to change the image oh that's fine okay so the next one we need to change is this one here so that needs to be changed to accessories um let's say accessories I can copy this change it here uh it would be a small letter I think and then the last one will be special offers so we can do special offers and and save this let's go uh that's looking good the special offers image is not appearing maybe I misspoke it uh so we have special with L add that should work all right this is all looking good for the special offer we could potentially do something like this uh that would be fairly easy to do um we cut so as long as this is relative uh which it is I think I've said it's a relative somewhere yeah position relative which means that this actually this is absolute we could potentially do top to be 50 start to be zero uh we don't need bottom in this case we could do a zero margin bottom padding that's fine text align let's have a look at what we get there okay we could do this or we could do another diff which goes all the way around with the background color of red so to do this we might have to do like we might have to just create another diff maybe let's see how it goes we could do a diff here and position absolute and make the background color as red so that would be bg primary maybe just for now and then we can do position top and start in zero um and let's have a look maybe we need to change the z-index so background primary uh I seem to be working just maybe z-index yeah it's z-index one is I'm just gonna give it a style maybe maybe this is the way you use actually so style and then z-index one let's refresh this and as you can see this is working now I'll have to create a red color for this column so so let me grab this red and let's just extend another color for another sail and I'll just do that for now to speed up this process so let's do that and then gray and then we can do sail and we can do sail all right this should speed up the process and what I'm gonna do now is I'm gonna actually give this a custom class so this would be uh category co sail and what I can do is the bottom here categories category co we can do another one we can do sail and then we can give it the can be sail actually let's try to give this background sail let's see if this works okay that worked actually so we could do this and then we can display the tech and we can display the text on top after it it's a little bit of a effort here but let's have a look so let's do special of z-index or two okay I broke this but yeah if you do z-index of two sorry inside I've broken this outside this setting sorry style equals z-index of two redo that we get the special office that needs to be a little bit better center line for sure and I think this is my because of this top it needs to be changed a little bit but what I'm gonna do is just quickly fix this color here to rgb a and then change this to 0.8 or whatever something like this um yeah you can see the dock now and then what I'm gonna do is part in top let's remove this the color uh we can set it to white and something like this will work and obviously I think you will need I wonder if he has margins and stuff like that it's gonna leave a little bit more work but you get the point here so we could potentially do that and add the rest of the text style it the way we want but let's move on to the next section so the next section luckily it's gonna be quite easy just like the top one so what I'm gonna do is I'm actually going to copy this top section here which we have the popular products I probably need to comment everything but it's kind of readable anyway nice to go down so I'm going to copy this section and quickly replicate it here I wonder what this section section section okay this is another section so we need to tidy it up um and I'm going to paste this section of popular products and change it to special office so copy special offers uh that if we refresh we'll have special office in here and to do the special office and to do the special we could potentially do a specific category for this um and which makes me think that for the top one we could have done here for the products we could have done uh popularity so based on popularity um and that would be done and yeah for the special office we could just do a different uh like a sale maybe category let's have a look at that uh sale products maybe or best selling products that's a good one let's have a look so let's replace the show code um actually I'm gonna need I'm gonna need columns and so on so let's do that save them and yeah they should be they they are products that are on sale which you can see which is good okay so we could potentially get get away with doing this I would like to have a little bit more spacing like here definitely a little bit more spacing so let's have a look at whether we can do that uh maybe container can we do adding top 500 yeah that that's working so much better already so I like this that's fine we can potentially add sliders but I think this tutorial is gonna go for too long so we won't do that and we have one more section which is the footer the footer will be easy to start well but we need to do custom widgets for each area so this is customizable so let's have a look at how we can do that all right let's go back to or code visual studio code and find footer so footer will be around here so let's open the footer page we probably don't need the front page now and that's all good so there are a few things that we could keep from here and a few things that we can just remove I'm actually going to remove pretty much everything from yes so footer uh site info yeah I'm gonna remove everything from site info and start clean sorry let's start by doing the color so we already know how to do this so we're gonna do class name or background primary we need to add the text to be white pad in top to be five pad in bottom to be five and then inside here is where we're gonna be having or rows and columns so let's create a container so let's do container and okay let's have a container and inside this container we're gonna have a row so row we're gonna have a row and then inside this row we're gonna have a column of two which is going to be the first one that would be let's have a look then we're about company and keep in touch so we have about then we're gonna have another column here let me space it out a little bit company and I think the other one was keep in touch something like this save this we need to modify this a little bit this will be two this will be two and I want this one to be four but I want this one to be slightly bigger but I want it to be on the right side of the screen so to alter that we can do actually we can do column medium four and then we can do ms outer which will push it to the right okay and this is not working because this is our home page but we removed the photo from the home page so let's go back home page and just comment this obviously we need to fix a little bit of the section here remove this spacer yeah definitely need to tidy up a little bit but yeah save this and if you go back we should be able to get the photo so about company keep in touch is looking the same as here keep in touch is with big letter it doesn't really matter for now but that's all looking cool the next bit let's first of all finish off the rest so we're gonna have like a copy of message and this visa image here so what we can do is let's create another row so inside here actually we can do that because we need to be outside this because we want this is having a background color of primary so we want to be outside this unfortunately that would have saved us a little bit of time but okay so we're gonna have to have another one in here it's not a problem what we're gonna do is cast container and then this cast container will have the pattern top of two pattern bottom of two inside here we can create a row so row let's align everything in the middle so we can do deflects align items and then center and then inside here is where we're gonna have our columns so let's do quick two ones call one here which will be like a copyright so we can do what was it in paragraph we can do ampersand and then copy and then we can do something like php blog info and that would be inside name that will get the name of the blog and this we can do php echo let's echo the date and then inside here this will be the year this will output the year so copyright in the year and then we can do something like create it by and then a link to your website so href to something like hpps ready okay okay this could be target equals underscore underscore blank let me do the view and toggle wrap close this target blank and what else are we missing here so this is a link so this will be ready something like this and close the link um that's all looking good then for the next column let's do the image of the payments so we can do uh let's do echo and echo excuse me and this column can have the height of 25 i don't know if now that's 25 percent i believe let's try so we can do the inline block and then text and to push the image to the right corner and then we need the image so for the image we can do img source equals and then as always php echo and then get template directory and then you're right and then we need to fill the rest of the era so that would be image and then inside images i need to add the payment image actually so it will be this one payment methods so let me copy this go back and we can just put in images and payment methods dot png so image payments dash method dot png um definitely the null tag grab this here and we might want to make this image fluid so let's do a class of image fluid like so and also we might as well put load in equals lazy and that should be good i think and if i'm not missing anything we should be good to go let's save this and have a look uh we are getting an error and this is get template okay i must have made a mistake so this would be okay i'm definitely misspelling it template directory and as you can see this is not working they i think that centerlined it looks like the shop name is small letter but we can go to customizer and i believe that we can change this site identity so we can do p os gag like so and save this and then if we close this and go back to the bottom we should get the name of the website the year which is now created by radi which is me and we have some payment methods which is pretty cool now the next section is pretty cool we're gonna have to create custom widgets and then that would make the template a lot more customizable to do this we're gonna have to do some work in functions dot php so let's open functions dot php and maybe at the bottom we can start from here to create the custom widgets it's not so hard maybe we can do let's copy some of this comments and let's do i don't know the first one will be put a widget one let's start all right to create a widget is actually fairly simple we need to create a function and we need to give this function a name so custom uh i don't know for the widget one make it as long as possible not under that make it as descriptive as possible i guess and then we can throw in some arguments and then this will be an array with the argument so the arguments are going to be quite a few but luckily once we do it then we can replicate it a few times so we need to close this and we also need to register this sidebar so and then pass the argument like so and then we need to trigger this function and add an action widget widget in each is called the action so add action widgets underscore init and then this will be a what would say custom for the widget one here and we're good to go let's add the argument first of all so the first argument will be an id this will be by the way this is all you can find this on the wordpress documentation um so this will be for the widget maybe like call one then we need to put a common name of the widget and let's paste a name like the so it looks a little bit more professional but this would be what would this be this would be underscore underscore and then inside here we need to put for a column one and then uh text domain then the next bit will be description and the description will be again underscore and then this will be the first parameter will be column one and then the second one will be text domain and then we have the before title this is actually fairly customizable and I'll show you what I'm doing now with the before title before the title we can technically create an h3 tag or whatever you wish that's why super customizable and then the title will appear here so we can give an h3 tag with a class of title I always do this just in case I need to target this title and style it so I always give it a class name and then we're fine here but also we need the after so what we have to do is after title and as you might have guessed the after title will be the closing of the h3 like so and then the next one don't forget the comma it's quite important and the next one will be the before widget underscore widget that would be I need to space them out a little bit more okay what would that be that would be a def with an id and and then s stands for shrink and the inside here we can do id is equals percentage one dollar sign s and s stands for s sorry s is for shrink and that would be in demo quotes sorry and then we need to do class and the class name will be widget and then percent sign and two dollar sign s like so we need to close it and go ahead and do the next line and by the way feel free to research this it's on the wordpress documentation and now we need the after widget which will be after underscore widget and then we need to do another def and close this with single quotes like so and for the last one we don't actually need to do a comma so hopefully speaking if this worked if I didn't make any spelling mistakes like I usually do and if I go to the website refresh everything is looking good now what we have to do is go back to the dashboard go back to appearance widgets and then inside here you will see this footer column one and that's brilliant that means that we can add anything in this column let's say let's add a custom HTML and let's say this was the about so let's do that about and we can add we can add anything here save this all right so let's have a look at how we can actually do this on the page so to add this on the page at the moment if we go back to the actual website you will see that nothing is happening it's not appearing yet this is just a text that we had from before so if you go on the footer and inside here about we can replace this and in order to grab the sidebar the widget we can do PHP and then dynamic underscore sidebar and then inside here we need to point which widget that we want so let me do a little space and we can do footer widget call one if this is what I call it I believe this work actually this is going to be the ID so let me double check it's cool filter underscore widget wise underscore it doesn't need to be underscore let's do it with dash so footer dash widget call one I wonder whether this is going to break it now and save it like this and with them so if we go back to page refresh we get in the narrow and this is because we didn't close PHP let's close PHP and refresh again and nothing is happening here I think if we go back to widgets we're going to have to recreate this so if we want to put some custom html we can do about custom html and save this now let's refresh and as you can see this is now appearing we have all custom widget which is pretty awesome what I wanted to do here is actually create a menu so this menu will have quite a few different links we're probably not going to be able to create them because it's going to be too long but I'm going to show you how to do it if we go to widgets we can drop a new one we can get the menu menu menu menu navigation menu just drop in here let's remove this one and we can call this one about now here is where I would create a totally different menu so at the moment we can use menu one let's save it and see what we get so we get a few items obviously they need some styling but I'll normally create a totally different menu by going to menus and then say we create a new menu and we call it about now let me call it footer footer widget about and then we just create a and we add a few items did I save it okay we need to add a few items so let me do a custom link for a sec so we have shipping and deliveries let's do that so I'm just gonna fake it here let's add one and let's add one more at least two okay that was it save this menu now if you go back to widgets and we can select the new menu from here so we can do footer widget about save this and if you go to the website you will see that we get in shipping deliveries returns and change obviously we need to style this but let me finish the company one is all so for the company one we can literally copy this exact same code and you probably guessed it we're just gonna change everything from one to two so one goes two let me copy this I hope that I don't forget anything uh one one that's two that's all looking good okay and I will show you the h3 in a second as well so that's all looking good let's copy one more time and the three so three we can do three in here small three and then what else we can do this one here and that's fine I think we're good obviously we need to go to the footer copy this code and do the company one so this will be two and do the keeping touch and this will be three save this let's go back to widgets refresh and we're getting an error so we just do previously declared in okay so okay so made a mistake in functions yeah we didn't change the name so that needs to be changed to three that's looking good okay so we have column one column two can be another the drop down sorry not drop down can be another okay let's select the same above of course we can create a another one for this one column two menu make sure you save it and then column three can be a custom html so let me say this is okay this is company this one is company and the other widget is what was it what was it what was it the other one is keeping touch and here we can add some of the text like here like we have in here we can probably do a short code in here or maybe we can do uh we can just copy and paste the mailchimp like input so I'm gonna leave this as it is for now I would assume you know how to do that if not request there and I'll do it next time and now refresh okay we have everything working this will need changing a little bit but we can start this super quickly I just wanted to show you the h3 that we've done earlier so you see h3 class with title so this is useful if you want to target it and change a little bit um so that's why we've done any functions here right this is all good let's remove this so I'm gonna be super quick on this let's go to the main.scss and I'm just going to do something super simple uh categories whatever like let's do footer footer and footer footer didn't give it a side footer class uh side footer yeah okay that that was already there thing so side footer and then we can do menu and then for the menu we want to reset any margin which is the url so margin zero we want to do padding zero we want to do list type and we want to do none and then for the link I'm gonna reset this super quickly color let's set it to white which is a bush trap variable and then text decoration will be set to none I don't want them to be underlined we can definitely do a hover so display block so the links are full width and they're easy to press maybe even like padding will be good padding 0.0.3 ram like so um I feel like I'm missing something uh yeah we could do a hover so if you want to do a hover you copy the link you do the column hover and then we do text decoration maybe underline or whatever you wish and that should work save this refresh and nothing is happening let's refresh again nothing is happening so we need to make sure that this has the class of menu uh yes it does so menu oh yeah menu uh it's not picking up the class okay we miss bell there so it's menu save this and refresh I'm starting to miss postive and as you can see this is a lot better now obviously it's looking a little bit odd having the same links on both I would go to menus and add the rest just to give it a little bit more realism and let's create a new menu where it's creating a new menu oh no we need to save this and let's create a new menu and this will be footer widget company and then we can create menu and this just be more as well you know just add if you dummy links it doesn't really matter you get the point so if we go to widgets on the second one company we can just select a company just so it's different and as you can see this is looking a little bit better um there seems to be is this padding uh yeah there seems to be a little bit of padding uh oh yeah okay I've added the padding everywhere so I'm gonna do like zero three so top and bottom is zero left and right is three yeah sorry that's wrong so we wanted to build around top and bottom three and left and right zero excuse me uh yeah that created the whack 0.5 0.3 okay this looks a little bit better now it's 0.3 ram and then for top and bottom and then zero for left and right right now that we got this out of the way uh let's have a look at what else we need to do um for this we can definitely copy a form from anyway you can go uh you can go here generate the code and copy and paste it maybe into your widgets and that would do but they're they're also they're also other ways of doing integrations like I think you can do with WooCommerce as well yeah I think you can install a plugin for this and install it but I'm sure that you can manage to do that and just to show you by the way this is fully responsive now so if we scale down uh okay if we scale down this does not look good so let me fix this super quickly and what we could do is column small 12 or maybe you know what maybe column small six and on this one column small six and then on this one we can do column small and then 12 oh okay so we can't I don't think that we can do that we need to do small and then we can do medium of md of two and then we can do the same for the other one otherwise it breaks I think if we do that so let's add the class here in column four I think this will work okay uh that seems to work yeah I mean I'm pretty happy with this to be honest yeah okay that's a cache um that could work it's not so bad maybe the spacing between them could be slightly less but these are minor things that you can always fix so let's have a look at what's next okay one thing that we didn't do in here is the menu drop down now that's already I think that would already work we just need to start a little bit so if we go to uh let's say appearance themes uh actually sorry menu and then let's go to the main menu the primary menu and then let's make sure that let's create a random link I mean it doesn't have to be real I mean all of this needs to be changed if you wanted to make it look like the design but let's do in fact let's do a link for all products I'm gonna create a new page and then let's do all all products let's make food accessories and toys so food accessories and we need one more what are we our toys care special office toys care and special office I could have added the short code in here all of them but we'll do it in a second okay now that we have the pages let's go do menu uh let's remove all of the ones that we definitely don't need like all of them do we need home um potentially but let's remove it so I need all products accessory toys uh yep that's it as long as this one is at the bottom this one is at the top and then and then we have food accessories then the rest will be fine we have toys and care save this uh this is looking a little better and this needs to be all this needs to be uppercase by the way and let's just for example let's do a drop down menu just so we have one so for example let's do oh no drop down okay let's add that uh to drop to add a drop down menu you can just simply did I save this okay let's add a drop down menu here so drop down for example uh then let's say we want accessories to have a drop down menu let's save this uh let's see how it goes so technically speaking we could definitely add something to accessories like an icon but if we hover over you will see that we're getting this drop down now we can quickly fix this with tss I think it might be like uh yeah it's just a color issue I think and definitely need a little arrow here so bootstrap icons like a small shape wrong I mean I don't know if this will look good let's add this to accessories could be a little bit smaller but we can make the text bigger and let me now show you how we can fix if we go back to the css main css main navigation okay we can so this has a submenu so we could go and the main navigation I believe and then we can use um we can either make it super specific but no that's fine I think we just do submenu and then inside here we can just say for the list we want the background color to be the primary color let's do that and then we want to add maybe like I know the padding was all right I think let's add a little bit of padding like rem one run and refresh and okay yeah the padding was is okay so let's remove this but just like this we have or drop down working needs to refresh again yep and then I'll probably want to make these uppercase so what I can do is uh which one was it the I mean we could do we could do the link so text what was it transform uppercase and save if we refresh that looks a little bit better I mean the letters could be spaced out a little bit better that's uh details one thing that I've noticed here is that the dog isn't scented which is a little bit annoying and yeah the logo is because of this okay let's do photo header if we go back header header header logo very important we don't need that okay yeah that's much better now much better center lined and so on but by the way now if you were to add a item to the cart you can see that the item has been added here and we've got the payment and the one you can see here and so on you can be the card and obviously this is broken and we need to fix it okay the next thing that we might want to fix is the pages if we go to the pages they're all kind of broken down as you can see and we need to fix this and also if we put all products we might as well get the product short called and paste this so if you go to pages first of all and if you click on any of those pages that were generated automatically by walk on us you can see this short code so we kind of need to copy this let's go to all products for example and I believe that we can just do your products so products and you can do so many things in here but let's just quickly add a short code so inside here we can do short code and then we just paste the short code of products and update all right now all about page let's refresh as you can see all about page is now getting all the products we scroll down and everything is kind of looking good but it's also full screen which is not what we want so the pages is actually using the pages.php file so what we can do is let's minimize everything go to page.php and this is all good but what we can do is inside main we can just add a container so .container and then let's wrap everything in this container so everything will be now center aligned and looking good container oh okay I've made I think that closed automatically so I need to remove the div from here so open here close at the end save and if you go back you will see that we're getting a nice layout here it's actually pretty cool one thing that I'll probably do is make a little bit of padding at the top so what we can do on the container we can do padding top do five or actually three might be a good one no that looks good to me I like this this is pretty awesome but when we scroll down we get this sidebar and you could have the sidebar if you like you could have two columns and just wrap this one in another but for now let's just remove it because I don't really want it as you can see now everything is looking better obviously because we're not really getting this edit button but yeah everything's looking pretty cool now technically speaking every single page that we have will follow exactly the same style so if we wanted to edit the food page edit and if we wanted to paste a show code let's see show code of I think it was just product and then the category actually is a category like this category and then let me double check yeah category and then we get the category so so category equals and we put the category at the moment obviously we made categories let's have a look if we go to products and categories let's have a look at what we have let's say let's say clothing for now let's use that so we can do clothing update and let's go back to the website and if we do food you will see that this is popping up now is this the only clothing one maybe it is I don't know but yeah that's all looking all of the pages are now looking good of course we're gonna have to do the categories manually just the way I did that in this one but you know how to do this now so we can continue now the next page that we could do is the actual product page so if I click on this this isn't looking good to me now for this page we might as well add the custom wolf commerce page that you can use and let me show you how we can do that so if we go to if you go and create a new page this page needs to be called wolf commerce dot php and inside this page we need to do we need to add the header so php get underscore header and then close it we also need to grab the photo so let's do get photo and in the middle of both is where we can add our main and then with the class of I don't know let's say container just to make it simple and then this will be main as well and then inside here is where we can get the wolf commerce content so we can do php wolf commerce content and close like so and say let me tidy this up and this won't work just yet we actually need to go to the functions dot php page and add the WordPress team support so if you go to functions dot php where is it where is it let's copy this and let's say wolf commerce to add the team support we can do art underscore team underscore support and inside here we just do wolf commerce let's save this and let's see what happens so if I refresh this you will see that this is now taking the new page that we just created everything is nicely aligned we could put the button at the top if you wish to keep it consistent I guess or just have a little bit of space so we could go back to the wolf commerce page here and just do button top three or five whatever it makes sense maybe even five would be better I don't know let's leave it at this as you already know how to do that this is all looking good let's think of what's next okay we pretty much have everything now if I go to cart you can see that this is actually looking really good this button is actually somehow surprisingly taking the button from actually this might be the wolf commerce calculus I'm not to share but yeah it's looking pretty good you can it's all working of course we haven't set up any payment methods in on that but you can do all that and now it's the customization of wolf commerce okay so that's all looking good but let's say that you wanted to make this specific page a little bit more custom without changing the original plugin because if you change something on the original plugin and you update after all the changes will be lost so let me show you how we can actually do it and what we have to do is let's go back to the shop so I think it's here so in your wp content plugins we have wolf commerce and then we have this folder called templates so what I'm gonna actually do is copy this folder and let's go back to the public the wp content teams and or team that we're working on now and inside here is where I'm gonna paste that folder now let me show you what's gonna happen if we go back to the website if we go to wolf commerce and then we go to status somewhere around here let's have a look I'll tell you now somewhere around here here we go at the bottom we have templates we have archive templates and we have overwrite so now that we have the templates folder from wolf commerce what we want to do is actually paste it in our team folder so let's do control and see and also I'm going to change this to wolf commerce so we know what it is and save so inside here we have all those pages old car checkout emails and so on and let's have a look at what happens when I refresh this page now on the status page as you can see overwrite is showing all those pages that have been overwritten now technically speaking I could have just picked the pages that I wanted to edit kind of like let's say the card page and just leave that page in there I edit it and it's so good for this example I just wanted to show you all of them just because when I upload the code to github you can choose a match if you wish to do a specific page you can just add a specific page and that should work as well but I'm just adding everything for simplicity now let me show you how we can actually edit the card now that we have this wolf commerce folder I can go inside it and we can start looking we can start digging I mean I'm not sure okay here we go card so inside card we have empty cards cut item data shipping total card PHP so it's one of these pages that will be let's go back so if we click on cards maybe it's what is going to be one of them pages so if we click on card and you can see all of the data in here and you can start editing this if you wish to so let's say I don't know what to add but let's say I'm gonna add a heading of h1 custom cards let's do h1 save this if I refresh you'll see that we get custom card maybe here we can have a banner a nice banner that says oh we have something on offer you know or whatever but this is how you edit it and of course you can use your bush trap classes to move stuff around if you wish and so on so this is how you're doing I haven't really decided what I'm gonna do but anyways now that you know this you can modify anything that you wish and then close it and yep and go ahead let me refresh for the styles this is going to be very similar to bush trap now it's a little bit unknown because the styles are going to be separate but let me show you so for example I can see that we're having problem with this here actually this might be a problem with my team let's have a look on sale we're commerce on sale okay so this is a little bit of a problem it's not fully circular and it comes from a class on sale but let's have a look at how we can modify the work on my styles so to modify the work on my styles we need to go back to the photo and this would be what would be public teams now plugins work on us and then assets and then css and then we can actually to make it easy let's copy all of this so I'm gonna copy all of this and then let's go back to our shop so public content teams css and then I'm gonna paste this in here and I'm going to change this to work on us okay now that we have the css we can actually start changing this as well as we wish so for example at the moment we're actually using the styles of work on us and we're not using the styles that we just added in here so we need to add those styles to do this let's go to functions dot php and let's copy a comment and let's just include styles in here actually that's absolutely fine here so if you wanted to remove some of the styles so what we have to do is actually remove the work on my styles and add or custom ones to do this first of all let me show you how to remove them and we can do art filter and then inside here with leverage space we can do work on us underscore and cube styles and then we need to do then we need to do the function name so maybe like remove recommend styles and that needs to be in single quotes as well excuse me for this and then we need to create this function so we need to do function and then this will be the name here then we need to pass nq styles inside the function let me just make a little bit of space and inside this function we can actually unset some of the rules so this is actually I'm going to copy and paste from the work on us documentation so you can unset them one by one if you wish so this would remove general styles this remove the layout and this remove small screen optimization so the reason we are doing this is because we can then add the the styles from the ones that we just included in our css so we're removing the main vulcoma styles that came from the plugin and we are adding them manually by including the ones that we just added here and we can modify them so let me show you how we can do that so if we were to quickly let's see if this works first of all let's unset all of them actually yeah let's unset all of them just to show you how bad things will get and refresh and as you can see there is no styles now if you wish to do something so super custom you can do it right now no problem but if you wish to keep a few things such as the layout you can definitely unset this I mean remove this and then yeah and you would be absolutely fine so maybe we can remove the general ones we want the layout and we want the screen oh and we need to sorry we need to actually return this as well so return and then enqueue styles which is this okay and if we go to the page now and refresh you will see that we have some we have a few styles so the layout is still here but the general vulcoma styles are gone and you can style this the way you want now and what I'm gonna do is let me show you if I was to remove the everything what happens so it's all gonna break now so all of the styles are removed and let me now add the back the general styles and the small screen and we're gonna be adding these ones manually let me show you how we can do that so I'm actually going to copy this function because we've already done this multiple times week to do this I think I've copied this from this is again from the document from the official documentation so I can copy and paste it here but basically we're just enqueuing some more stylesheets so you can register my team vulcomas we're getting the template directory again as always then we go inside css inside the vulcomas folder that we just created and put all vulcoma styles and then we are loading the vulcomas.css and yeah if the vulcomas exists we want to put the styles at the styles which is great and we have the action just like above but just separate in a separate section here which is great okay now that we've done this hopefully if I refresh everything should be back to normal and it is everything is back to normal even though that we removed the general css for vulcomas we've added it here and everything is working back to normal which is great what that means now is that we can we can go to vulcomas we can open the what which one would it be um it would be this one vulcomas css we can technically open this and we can start modifying but obviously we as long as we are watching css and this is uh compiling we should be good to go so let me fix this the padding was wrong on this for some reason I don't know why it might be something to do with bootstrap as well who knows so on sale is the class let me copy and search for it so here it is on sale on 9 522 and the problem was the padding so if I remove this save this this will compile successfully it would save and hopefully we have fixed this now we're having a little bit of an issue because most of all variables come from bootstrap they already preset and it's just a little bit annoying that we have to go to vulcomas and kind of like go to variables and set them so if you go to vulcomas let's find variables uh where it is um where is it where is it variables here it is underscore variables dot css so technically speaking we will have to go ahead and um change some of these things unfortunately now I think luckily the this one is very similar to the one I'm using but to be to be exact we can go back to our main dot css file and copy the color from here then we can let me just remove some stuff because there's too many and then we can maybe change the variables from here so vulcomas let's change it to um rgb and let's change this one to rgb as well and now this should be a darker purple color so let's save this make sure that everything is compiled and if I refresh and let's go to the cards you will see that this is darker purple and of course we can start modifying the rest so let me have a look at how I've done the images on the front page okay let's say for example we wanted to modify the buttons okay so if you wanted to change some of the button colors for example you could go to the variables uh it's taking ages to compile but yeah you could go to the vulcomas variables dot scss and change them from here uh we're getting narrow for some reason hopefully that'll be okay uh but yeah you can change them from here just the way I change the main color I think they're using some sort of like uh light and filters so for the secondary I mean you could technically just uh remove it uh you could technically just copy a color that you want for the secondary and just paste in here if you want and the secondary text could just set it to white I guess so like so or you can set different variables and so I want to modify things and if you save this and refresh compiling this takes a little while because there's so many files but once it's done and refreshed you will see that the buttons are now looking good and also you might want to change the price for example let's say uh what would be okay we have price so you might want to change this so you you look for it and you go price okay highlights adjust here uh primary prices in stock labels flash and say okay we can actually do this I guess um let's change the price to the same color to the RGB one I like so and of course you can dig deeper and change whatever you like so technically speaking the price should change what was it on the design uh yeah on the design was fairly similar this one was lighter and crossed so yeah that's very similar to design if I want to make this button white like the design what I would do is on popular products maybe if we first of all see what the button is so it's button product type art to card button so we could target this let's go to main dot css let's say somewhere here we do we do art to card button and then we could do display us block save this and see what happens maybe it needs to be overwritten so we can do important and as you can see this has now worked I would wrap everything we might as well do this so I would go on the front page I would go on the front page and I would find popular products maybe give this section a class of popular products like so save this go to the css and then inside popular products I would wrap this just so we don't break anything else um alternatively you're gonna have to search for it in the files and change it from there so display block and maybe text align center save this and see how this goes as you can see this is looking nice just like the design again I can do the same thing for the images I could do so for the images they probably have a class name that you can use so welcome us product link here it is this one I can use and maybe just do the attachment will come as thumbnail maybe we can do border radius of isn't just radius that I can use I'm not so sure if we can do that okay I can just put 20 pixels just for now and then overflow hidden and save if this saves you will see that all of the images are now similar to the design and I can do there I can do the same thing on this special office thing I can just go in fact popular products and popular products special office can share so we can go to the front page and do container pick five special offers and if you refresh you will see it's a class so we need to put that and save let's refresh and as you can see this is working now as well and we can keep going like this forever and style more stuff and add more stuff but one thing that I totally forgot to do is to change the font we did include them in our project from google but we didn't actually change them so let me show you how we can do that if you go back to visual 3d code and let's say underneath here underneath the variables we can create a few more so so in order to update the headings which in my design was the new need to font we can do dollar sign headings dash font and then family then we can give the font family here usually you can copy this from google money's new need to like so and that is sans serif you can also set the font weight at the moment the headings will use the normal font weight but if you want to set a custom one like I do I want to set the phone weight to be a little bit bolder so what we can do is dollar sign headings font dash weight and I can set this one to 800 if we save this and go back to the browser let's refresh and as you can see the headings are now all changed to this and this is just the way I want it and the next thing that we need to do is change the body text to poppins just like we have it on the design so let me show you how we can do that go back to visual 3d code and underneath here we can add one more variable which is font family dash base the font family dash base will be exactly the same as this one here we just need to change the font name to poppins so let's put poppins and also poppins will be sans serif as well just like so close this save it and if you go back to the browser let's refresh and I don't know if you're able to see but this is now using poppins the whole body is now using poppins and if I was to inspect this we'll probably find somewhere here we go font family is now set to poppins and just like so you can change the font size the phone weight and so much more bush trap is very customizable and so we'll come as and now I can wrap up the tutorial there is a lot more that I could have done I wish I spent a little bit more time in the details but as you can see the video is already super long and that's why we're gonna get it short today I'm always hoping to hear more suggestions so if you have any please comment below don't forget to subscribe to my channel hit the bell notification button and like the video that would help me a lot thank you very much for watching as always my name is ready and you're watching my channel right at the brand and I will see you in the next video