 Welcome back to the channel we've known that our theme is going to look like this so we need to take the next steps to start adding this little banner where we can always add our discounts and so on we've already added our logo and now we need to work on the navigation next we'll work on the header here and next we shall work on these parts where we can pick out a highlighted feed and just talk about how much time it will take to deliver and then we can just put our shopping cart on the side here but to structure all this out we need to use bootstrap as we had agreed so right now I'm going to get bootstrap and drop it inside our theme so let's go to the bootstrap website so when you get to the bootstrap website you have a couple of things you have to do for example you have to add the CSS you have to add the JavaScript so what I would rather do is just have the bundled version and just get everything out of the way so I'll copy this here and I'm going to come and add all that code that we need to add bootstrap inside our theme folder so I'll just paste it down here and then we're going to need our CSS from here so I'll copy that as well and then I'll paste it inside our editor and then we're going to start stripping this and enqueuing the way JavaScript and the way CSS should be added inside our WordPress so there is a way to do that so we'll need a hook and this is an action hook and inside this we're going to need the hook which is wp underscore enqueue scripts and then we shall add our callback function which we shall of course give our prefix which is our techiepress and then I'll just add this here to make it easy for me to come up with names and then we'll start writing our function right here so of course this is the named function so I have to add the name of the function there and then add our brackets so the next thing that we need to do is we need to know that this function is going to add scripts and style so we need to have the wp underscore enqueue script now this is going to take in our javascript and it's going to take in a handle which is going to be more like an id so I'll add this id and say this is going to be bootstrap and then we shall call this jquery so we shall have the bootstrap jquery which is this piece that we have here we have jquery running in WordPress by default but I might want to load this version so that it works well with my bootstrap so I'm going to have bootstrap jquery and then I'm going to add its source which is the link so I'll get this https and get this minified version and then I now need to add the dependencies that this file needs and this file doesn't need any so I'll just leave this as an array because that's expected inside this particular hook there's an expectation of the dependency then I'm going to add a version here so I'll add a version of let's say 1.10 and then the next thing that I will do is I need to tell WordPress that our code will be sent in the footer the reason we do this is because JavaScript is best loaded after the whole DOM has been loaded when I talk about the DOM I'm talking about we want our logos we want all our content to have loaded I'll show you this by inspecting this page when you look at all this code we want to have our head load our body load then right before we close the body allow JavaScript to come in and this is because JavaScript is more behavioral it does not bring in our content it does not bring in our style it just adds behavior to what is already existing which is the content layer so let's go and fix that so we'll add that to the footer so I'm going to change this and send it in as true now once we've done this we need to add a semicolon so that this doesn't break and I'll duplicate this because we are also going to add our bundled bootstrap so I'll copy this here and then add it here so instead of having bootstrap jQuery which is already an idea of this we need this to be very unique so I'll call this the bootstrap bundle and now this bootstrap bundle is going to have this link it will have the dependency on this jQuery bootstrap so I need to add that right there and then of course it will be version one and then I'll also call it to true so that it will be sent in the footer and I'll save that and then we can take out what has been added the next thing that we are going to do is actually wp nq and we're going to nq the style nq style loss expector handle so call this a bootstrap css I'll copy this add this here and then just call this css we'll add our source which needs to be this link of bootstrap so check this change it next thing we're going to do is add a dependency and we don't have any dependency whatsoever and then we'll add a version which is the same as 1.0.0 just like our bootstrap up here and then next we need to add the media this should apply to and I'm going to choose all because we want it to be on the mobile we want it to be on the screens we want to be on tablet and all other features bootstrap ready gives us that leeway to do all of that now next I am just going to take this out save this because it's all clean and next I'm going to do is come back here to inspect my page I'm going to go to the console to make sure I don't have any issues I'll reload this page and on reload we'll see that our bootstrap is actually showing up however our javascript if I turn this off just to see the javascript you will see that it's not there and the reason it's not there is because we've sent our javascript in the footer but the footer is not loading so in order to have our footer running we shall open up our footer.php file open it with our php tags then next we're going to run the wp underscore footer function terminate it and then we can always escape this and then close off our body and then the next thing we shall close off the html of course I need to put this slash here to show that we are closing off the body I'll tab it to make it more readable and save this and then on our front page we're going to add the final piece to the puzzle which is get footer because that's the way we shall expose our bootstrap inside the footer on our page when we come back here and reload you will see that we're actually getting a lot more javascript coming in and if we scroll through here you will see that before we didn't have the wukamas and all these other files that are loaded in the footer we're getting the new javascript from code.jquery.com and we have our bundle of javascript showing up here so we have both the javascript.js and we have the bootstrap bundle also showing up here now that we have both of those and the bootstrap css working we can then go on to style our page so I'll just have a quick look at what we are supposed to do and then I'll start adding some information so we'll go back to our bootstrap here and then we'll see what we are supposed to do next so with this you can know what your bootstrap is going to look like so I'll use this div of container fluid I'll come back here in my code close off these other pages that I don't need to edit right now and I'll choose to add this here I'm going to escape the php open it up again so that we don't have anything breaking so I'll come to bootstrap and see what I actually need right here so since I just need this exactly I'm going to copy it I am able to add my html so I'll put this other class of container I'll make this dash fluid so that it's always running we'll have our row and then I'm going to have two divs in here so these divs will always be equidistant they will be equal in terms of size so I'll need this to be called dash 9 and then I'm just going to call this call so that we have nine pieces of this and then we shall just have this take out the rest of the space should it be needed now in here we're going to have a paragraph and this paragraph will have my lorya mipsam so I'll add 10 pieces of data in there and then once we are here I'm going to add this with a button this button will have the stay connected and then I'm going to add a class here of button I'll have a class of button there with button large I'll add orange background inside my code and we're now going to add this style in the background we need it so I'll add it so on reload we're going to see that we actually have this here and our button which does nothing our image is up here we need to change that in the near future but I now need to add our style of orange background so I'm going to create a new folder in my themes folder which is called assets I'll add CSS and JavaScript then in here I'm going to add a new file which I'll call style.css now inside here is where I'm going to add our orange background and I'll give this a background color of orange and I'll save this now it will not show up until I enq that style to our front end so I'll duplicate what we did with the bootstrap here I'll call it techie press food css and then of course we are going to need the location of this file so what I'm going to do is use the get style directory URI which is a function in wordpress to get us to the directory where this style.css is seated or the root folder of our theme and then inside there we're going to add the word assets add CSS then add style.css and I'll leave everything the same as is and I'll save this come back here reload and you will see that we have our orange background in there with our image now I need to take this up and bring our logo down and you will see that our structure sort of changes now this is going to be on a number of pages it's going to be above the header so what we need to do is just get this whole template that is here cut it come back to our header and then just put it just below the body we have it there I'll tap this in to make it more readable and then of course do the same for the button and the paragraph and then save this so if I reload it you will see that we have our banner that screams right up here and then we'll have our logo down here so I need to make them a bit more boxy inside bootstrap itself so let me change this up this markup a little bit to make it work for me and make everything go inside so I'll duplicate this to make it too of course close up the div I'll duplicate this and bring it down to match the space on both sides then I'll tell this to take up the space of about six and this will take up the space of two so I'll save this come back here reload and we'll see that we have our space that is in the middle I just need to make sure that our content is actually floating in the center so I'll add a new paragraph style for here and I'll call this banner add paragraph and then that button I'm going to change it to light so that takes up the light mode version and I also call it button stay dash connect so I'm going to need both of these classes and then I'll add them to my stylesheet that's custom so I'll copy this save this here come back here then I'll add the individual pieces of styles so I'll get that paragraph I'll get the button itself to show up and then I'll start styling since they are empty that's why you're seeing my editor screaming at me but I'm going to take away the border radius for this so I'll just say border zero in this case then for our paragraph I'm going to just say the margin should be the same both top and bottom so I'll say one ram for both of them and then of course the left and right is going to be zero so let me save that and you will see that this is balancing in the middle however our button is not so so let me do the same for our button to make it float in the middle up and down then of course we'll turn off the border and I'm going to make this important because it seems like bootstrap is taking over this so I'll reload it the button is okay I'll just add some little padding to make it cleaner so border dash radius I'll change the border radius to zero and then I'll change our color of our text I'll change it to black and then save this come back here reload you're going to see that we have our corners are now much straighter this is okay as connected you can change it to uppercase here and then maybe give it a little bit of padding to make it look nicer so I'll add a padding of about 10 pixels by 20 pixels so I just want to have a padding left and right so I'll have a padding left and then I'll have a padding right 2020 just to add on something and then we are going to change this to always be text transform uppercase so that whatever way we bring in our data it will always be uppercase I'll reload this and voila we have what we needed here just like in our image so we are next going to go to change our logo and then add our navigation in the next video so thank you for watching and enjoy your day