 Welcome back to the channel. In today's video I'm going to share with you the general plan of how we are going to actually structure out this website. We're going to focus so much on using the internals of WordPress and not using many plugins. We want to keep this as minimal as possible so that the theme can be self-sustaining apart from the few things that really need to go in a plugin that we can always just add to our particular website. Now remember that themes are supposed to just handle the beautiful outlook of data while plugins will do most of the functionality and even handle the data. So let me highlight some of the things that are going to show us what we need to structure out. So let me start with the general structure of the site. I'm going to hope to use Bootstrap while I'm doing this site because it offers me so many things straight out of the box. I could have used ordinary CSS to do this but I don't want to have this very long menu right here. I'm going to have very short menus so what I'm going to do is use Bootstrap to help me leverage this and what do I mean? If you go to Bootstrap and you look in the nav section you'll be able to see that you have these tab navigations that do this. So what we shall do is remove these borders and have everything looking nice like we have inside our template right here. Now the other reason why I'm going to use Bootstrap is when I hit this little plus symbol it gives us a model that looks like this. So if I go to Bootstrap and go in the model section you'll see that when we click on this button we actually get a model that does the same thing altogether. So this is what we're going to use and it will allow us to do this whole bit that we have here where you can choose large, medium and the different pieces that you can add to your order. So for the other things like the logo, like the menu navigation that we have here, those we shall leave them inside WordPress and we shall be able to add them even using our customizer so we'll be able to just see some of those pieces adding into the customizer. We shall then add our administration page that will allow us to add things like the estimated delivery time and the text that should be here. We'll add a custom post type for little deals like these that can be shown. So inside our wukamas we shall be able to add our different products like what we have here. We'll use the categories available just to show whether the food is vegetarian or it's for non-vegetarians. So we're going to use variations in our products to add all this information and these pieces that can be added to our order and that will be all. Now for the part where we proceed to checkout we shall use also wukamas' checkout page that will allow us to fill the details, we shall allow guest ordering or we can allow for people to actually open up accounts so that they can follow up their orders with us. So let's jump in to see how we can actually do this. I'm going to show you how to make the product variations and if you already know how to make the product variations I would say please follow through, make your own site because once we start coding you're going to need to see some of the things that you are doing and making it look nice for yourself. You can choose to do this on a local host or on an online server and in my case I'm going to install WordPress on my online server so I'll use softaculas where I'll just click this little WordPress logo and it's going to allow me to install a particular piece of code and I'll choose to install. So I'm going to install this on my subdomain which is food.media Uganda WordPress 5.5. I'll add food theme development as our site name. I'll leave that as it is. I'll add some details for myself right here. I will allow this to reduce the login items from different people who will try to just jump in. Allow this to auto upgrade and then I'll allow the plugins to upgrade and then just fill in the last detail here and once I'm done filling in all what's needed I'll click install and now my site is ready so when I click on this I'm actually able to see my blog that is ready for fixing so let's go into that main area. So I'll login into my my blog and then we are good to go so we're in the backend I'm just going to go install the few plugins that I will need and once I'm done I can activate or install any other plugins that I might want. I'm going to use wukamas mainly so we're trying to keep the plugin usage on our theme and on our project as minimal as possible to show us that we can do so much with less plugins at that one it reduces how much time you need to actually maintain the plugins you reduce the security loops and the holes that are in there and generally your site will run much faster because you probably don't have bad written code lying somewhere inside your website so when we get to wukamas it has this new field to it so I want to install it quickly so we're ready I'll put in a few details I'll add in my region I'll put in a city then I'll add a postal code to this so I'll just leave this as is click continue you can choose to sign in to send information and then I'll choose that mine is going to be food and drink continue and then I'll be dealing with physical products so it's the only thing I need to check here but you have so many things that have been listed for you that you can actually add into your cut and pay for from wukamas itself so I'm going to list so many products so maybe I could say 100 or whatever to this and then I'm not selling anywhere I'll turn off all these other plugins because I don't need them and then I'm going to choose to stick to the current theme that I do have I'm later going to change it when I start building the theme so I will skip also adding jetpack and wukamas services because I'm not going to do that so now we are actually ready we are inside our site I'm just going to add a few of my products so I'll add them manually and in order to use very nice pictures I'm just going to go over to unsplash or pixels and I'll just get some pictures from there so I'm going to add the different pizzas we'll start with a margarita and what I'll do is we can use the product categories that are here to choose whether we're going to have we can have vegetarian and of course I'll change this to be non-vegetarian now we could add our own custom taxonomy in here there is a video that I've listed down below in this video description and you can be able to see it how you can create your own taxonomy so you could have something that says vegetarian stroke non vegetarian and you can just always have two of these taxonomies showing up so in this particular case we're going to have a margarita which is vegetarian and we are going to add the image after adding our image here we're going to come and choose the product that we want is going to be variable and we are going to go to the variations but before we do that we need to go to the attributes to set up the kind of attributes that we want so we click add and I'm going to add sizes and in here I'm going to add small add a pipe to separate medium another pipe to separate and have large then I'll take the used for variation because one set of the variation and pricing down here so I'll click save attributes and then the other attribute that I want to add is accompaniments and for the accompaniments we're going to have things like pepperoni olives extra cheese so we'll just use those and then we'll have add variations right here you can have as many variations as you want and after doing this I'm going to click the save attributes right here and I'll go to the variations because I've already set up the attributes here like the sizes and accompaniments the variations we want to do should be coming from what we have here so I'll click create variations from all attributes and I'll click go and this will tell me that it can only run a maximum of 50 and I'll click okay and once the system is done creating the variations we now have them down here now with these variations we're able to set up the different pricing for this so we can have a small with pepperoni and we shall say that maybe that's 530 and then we can have with olives maybe that's 540 small again with just extra cheese maybe that's 560 and what we're going to do is just do the same for all the other sizes so medium and then finally our large with extra cheese 760 and once we are done we click save changes and this is with me doing bare minimums but you can be able to add small descriptions to even your little variations that you do have so I'm going to go and publish this and then we'll look at it now if the task that you have is to create more of these particular products that you do have to allow us to have quite an assortment that we can work with so let me go in the front end and just view what we've created and you'll see that we already have this showing up in the current theme it shows us that it's in between a particular amount of dollars so you have from 530 all that 760 it depends on what you choose so if you choose a small and then choose a pepperoni it will give you the pricing that you do have here if you choose something that's large and then you choose it with extra cheese then you're going to have 760 showing up right here and after choosing this you can be able to add this to the cut and after adding it to the cut you can now go view the cut and you can update either your order right here and then you can choose to process your order or you can add a number of things and then come to this page but for any restaurant this seems like a whole lot of things to do in most cases when you go to a restaurant you just want to look at the menu the waiter will take your order or waitress and then they will bring you the food and that's all you need to do and then they give you the bill it's just about three steps you order you eat you pay in this particular case it's online you just need to order and pay and then it's delivered to you then you eat it so we're going to cut out most of these particular items like the updating we're going to make it into a mini cut like you saw what our theme is supposed to be and those are the things we're going to start working on right now but before we get there please add more products into your content area so that this can seem more real life like than a theme that you developing now of course you can manage your stock inside wukamas but the disadvantage with that is that it does not have a number of variations that you can do so let's say if you added 10 pieces pizza in here and two are ordered for today tomorrow you will have only eight available and yet you supposed to be able to take in an order of about 10 every day now we shall use custom code to handle our our inventory so we are not going to handle the inventory right here we'll add a plugin that will allow us to do our own orders so we'll add on our custom code to help us to change the inventory that we do have and that will help us manage our shop much much better so we're not only going to have variable products we're also going to have products that are actually singular or what in wukamas is called a simple product because when we look at these other items that we do have here let's say when you go to the salad you'll only see that they asking you whether you should have cutlery for this so we're going to have singular products so I'm going to put in some soups so we're going to have some soups and we're going to have salads and that will help us determine what we have actually up here so I'm going to go back to our products and I'm going to add the basil soup it will be vegetarian because it's a roasted tomato let's add an image and that soup is going to cost maybe six dollars let's keep on adding the products and then we'll shall group them a little later when we list all our products here I have at least over 10 products I hope you've been able to do that as well make a number of products and we're going to give them different categories now the one thing I want to show you is that your data should never be determined by the theme you have rather your theme should work with the data that you do have so in the categories that we have here I'm going to introduce some new categories of what we come on the kwaul taxonomies so I'm going to include a taxonomy to show whether the food is vegetarian or non vegetarian and we're also going to include the different types that we do have for example we have pizza here we have soups we have salads then we have drinks now with that I will be able to do a couple of other modifications for example you cannot only order a drink in our shop you need to order the drink with some food so those are some of the things that we are going to keep on adding and variating inside our theme development so with that background let's go and see how the theme will look like on the front end so currently we are using this default theme and I'm just going to go to the shop page and you'll see that we have our order of different things right here but they're all scattered around it's very hard for me to start choosing and picking but we are going to order it into this nice and slick thing that we do have here so let's start by looking at what theme development looks like in wordpress let's go to the basics pick them from there and then we'll see how we actually make this possible so when we're going to the wordpress handbook if you click the build your first theme you'll see that there are a number of files that are required we need a theme folder we need to have the styles.css file we need to have an index.php file and that is all that we need and once we put this together inside one theme folder then we are ready to move to the next step so let's get those included and then we can start our theme I'm going to go back into my cpano and I'm going to go into the wp content I'll go into my themes directory and I'm going to create a new folder and I'm going to call it techifood and we'll create this folder and inside our techifood we're going to create the three files we talked about needing we need the style.css file and then we also need the index.php file and lastly we're going to require the functions.php file now we have these three and we need to start editing them to be able to see any kind of life form inside our theme so if I go into my site go into the appearance panel and then go to themes you're going to see we have techifood here when I try to activate it it actually shows up because it has the different files now let's go in the front end and try to see if we get anything you see we actually get a blank white space it's still blank because we've not added anything inside our theme so let's go back to our theme I'm going to go into the index.php edit it and I'll add something very simple I'll start the php and I'll echo the famous line which is hello not hello world so when we reload it you will see that we get hello on this page that we do have here I'll reload our shop and you'll see that we get hello here and whatever you are I go to even if I just got food.ourdomain I'll still get hello and the reason that is so is because WordPress told us it needs only three files to start with style.css the index.php and the functions.php file now the functions.php file could be ignored and you would have only these two and they would work for every page or page template it first defaults to the index.php file let me show you what I mean by that there is something that we call the WordPress template hierarchy and this is how it looks like so these little lines that you see show you where you start from and where you end and we usually start from the right hand side the most important file is the index.php all these other files all these other categories of page templates can always be found in the index.php or we can customize them to be their individual pieces now we always start from the left because the index is like the master key it can open all doors but these are the individual templates that keep branching off and stemming off are other keys that open individual doors so let's say we wanted to style something for like the shop a shop is an archive content type and if you're looking at singular pages like blog posts or page templates of a particular type you'll have the singular you have the single or the page or you can go to the page id page slag or you can have it as a custom.php or you can have it as a custom template or a page template and you can go all the way backwards to this now even our error four files can always end up in the index just by following this route we can have our error four pages in here so in our particular theme we don't need to have so many page templates because we're going to do something that's very simple the only things that we might have different might be a single.php let's say if we introduce a block and we might also introduce something that's very simple like a page four page so I'll open our single.php file because later we won't work with a blog on our site and then I'll have a four four php so we're going to have this particular four files and that's going to be all that we need to get us going so from the theme basics here we're going to go into the template files common word press template files you'll see that we have a default index.php and style.css and as you scroll down you will see that we have a front-page.php which will always be used as a site front page if it exists regardless of what we set in the admin settings in our cms so what they're talking about is when you go to settings it go to reading it will not matter what someone sets here as home page or whatsoever the default page that will be read will be the file that we're going to create and we are going to call it front-page.php so this is where we're going to have everything going so remember in our index file we have hello I'm going to copy this edit our front page and let's see what's going to happen so I'll edit this I'll paste this and I'm going to change this to front page let me save this here if I go to our reading wukamas creates for us a page called show so let me save this shop as our page and let me go and view our home right here let's reload our home and you will see that it will always default to the front page so this page that we are looking at here is the way is what we're going to style as our front page.php so let's start working on that and let's make it beautiful and let's add in the different components so there are so many other things that you can see from this particular content like having a header.php which will contain all our header information or the footer and all the other pages in here so what I'm going to do is all the other pages are going to default to the index.php that we shall create but the only thing that's going to default is going to be our front-page.php and then we shall also have just one single.php to handle all the blogging or the different singular pages so let's go in and then start working with our front page.php if you want to see more information about this I'll leave this link inside the description of the video and you can always visit it and find out more details about this but in our particular case we're now going to start bringing in our bootstrap we're going to bring in our colors that we've picked and we're going to start writing a number of different things to showcase our data. The last file we need to make our theme to look complete is actually the screenshot.png you will go back to appearance and go to themes you will see that our theme actually looks incomplete compared to these other themes they have images screenshoting or showing us what our theme will look like at the final end. Now we just need to provide a screenshot.png file that is 1200 pixels by 900 and it will be able to fill this space that we have right here so I'm going to attempt to take a screenshot of what we have here and we're going to rename this into screenshot or lowercase.png and it's already a png file format so that is good for us now I'm going to come back here and upload it drop it here and then you will see that it's uploaded in here and all I need to do is come back reload what we have here and you'll see that our theme is now looking complete just like all the others it fills the space and we have a preview we're actually going to have so contrary to just having these few pages here we can use what we call a stata theme now there are so many stata themes and you can actually just google to see what press stata themes we have things like underscore we have sage we have understrap we have wp rig we have kach stata we have genesis and we have others like astra and hello that are used by elementa now the one that I usually follow that's minimal in nature is underscores and you can get it from underscores dot me and with it here you just need to give your theme a name you can go into the advanced section so we'll give our theme a name and we'll call it a take you food we'll give it a slug which is the same as our what we have here the author will be me of course or you and then we'll just give it in this case we're going to have food.medioganda.com and then we'll just say take your food custom theme so take your food wukamas custom theme now you can add the wukamas boiler pledge to it and you can even use sas so you can use that to build your css if you know how to use sas very well so once you do that you can just click generate and you'll be able to download you'll be given a download of the folder with all the files that you need and I'm going to just open this and you'll see that you have almost the same number of files just relatively more so you have the four four archives footers you have the headers you have included template parts if you need those you have the page you have the sas css here for you you have all these pieces template parts you have a wukamas dot css file that's added for you because it styles most of the wukamas and you have a language pack so that you can be able to translate your theme and you have all these other things included for you so using a starter theme like this one is very helpful it will help you meet almost every part that you need about your theme or you can just always use the method that we've started with right here so I'm going to apply the starter theme I'll use the screenshot that we have here and then we'll be able to see what that looks like so let's upload that theme let's go back and see what that looks like it's right here so let me rename this so that we don't have it all confusing and then let's extract this other one right here and since techifood is now the default or what we have let's go back to our manage our themes here you see we have techie dash food right here we have also techifood showing up right here so this is the active one if I go back to my front page you will see that we get some sample data showing up we have a menu showing up here we have our title we have our description we have all these things showing up and it's relatively close to what we have as a theme so we are able to do the different things that we wanted this is what a starter theme is it doesn't have any styling but it provides you with the basic components of what a theme would be so now that you know how to use a starter theme it's going to work equally as we would with our own theme that we've written from scratch the only difference is we're not going to have that many number of files as what the starter theme actually has so good practice use a starter theme like underscore because this is maintained and managed by wordpress core developers so if you want to submit your theme to the wordpress repo I would advise you to use underskores as a base for your theme it will give you all the details that you need but if you're going to do this for your own sake then I'll tell you go ahead write yours from scratch and live your life so with this in mind with this accomplished we are going to start writing code to affect our theme but we shall be using what we are writing from scratch so that we don't have any distractions so that we actually just pick whatever we need now note that whatever we do in this particular context if we are using our own theme going from zero code completely you can do the same things inside the starter theme so with that in mind I think we shall be able to see the next steps in the next video because this has become really long but if you enjoyed it please give it a thumbs up share it with your friends don't forget to subscribe to the channel if you've not yet and let me know in the comments how you're finding this are the videos too long are you enjoying the content and what would you like to see otherwise enjoy your day