How to Build a WordPress Theme from Scratch with WooCommerce (2019)

hey everyone today I'm going to explain to you how to create your own WordPress theme with WooCommerce integration so you might be curious to create your own WordPress theme which is great but you might also want to make it an online shop so it needs to work with WooCommerce now there's a lot of videos online that explain how to use WooCommerce itself you know install it as a plug-in and then maybe it works within this particular theme that you've purchased but this one's gonna be so you can create it yourself you can actually create the website yourself and then add in the word commerce functionality into it which allows you to customize it much more this video will be quite a long video so I will put a glossary of what I've done so that you can refer to different things at different times in the video and so let's get started first thing that you should know is that I'm using a blank virtual machine so I'm gonna start from scratch and I'm gonna install all the things that I need to install in order for this project to happen okay so the first thing we want to do is we want it to go to go on to Chrome or on to Internet Explorer or whatever you use and go and look for zamp which is XA MMP and it's a web server solution for your computer so you can actually run it on your computer and then you can develop a website locally in the case of WordPress WordPress requires a MySQL database it also needs PHP and it will all be achievable through zamp so the first thing you want to do is if you're running on windows click on windows and download the file and I downloaded it earlier so we're gonna install it now okay so this warning has come up I'm just gonna click OK and I'm gonna click Next and then click Next again and just install it into the sea zamp folder we'll just uncheck that click Next Next and then just let it run so right now this is going to install MySQL on your computer it's going to install a folder on your computer which you can place all of your websites into and in this case we're going to insert all WordPress into that folder so I'll just wait for this to install and I'll get back to you shortly okay so this Windows Defender firewall has come up I'm just going to click on both of these boxes here and allow access okay so zamp is now installed on the computer and I'm gonna select English and save and now you'll notice on the right hand side well actually on the right hand side here is the zamp icon which you can click on at any time but it also does pop up so let's get it started let's just click on Apache and MySQL to start if any of these messages come up just click both boxes and click allow access and there we go as you can see the ports are set and it says PID s I don't know what that means but in my experience when that is showing it means it's actually working so what we want to do now is missus amp installed we can go into our google chrome and we can just type in localhost o local host and as you can see now this actually comes to the zamp web server which is fantastic so another thing we can do is if we get a local host PHP myadmin that is actually PHP myadmin it's like the web interface from MySQL so you can create a new database and all that sort of stuff okay so now that we've got zam setup what we want to do is we want to set up WordPress and start making up working on our local server to set up WordPress let's get out of our browser here and go into our C Drive and we'll see the new folder called zamp installed if you click on zamp and you go into htdocs this is the main folder where you can install your projects so what I'm going to do is delete all of these files in here because we don't need them and then what I'm gonna do is go into chrome and I'm going to download WordPress so let's do a search for WordPress actually just go to wordpress.org don't go to wordpress.com because that's WordPress is commercial offering similar to say weeks and all that sort of stuff where they host for you but we want to actually just download the file to install on our own server so now that we have the WordPress site up just click on get WordPress and then click on download WordPress 5.21 or whichever version is relevant to when you're doing this tutorial now that we have wordpress downloaded let's click into wordpress and it will be a zip file now i don't have any fancy zip programs on my computer right now so it's just gonna open up in the windows zip so what we want to do is we want to grab that zip or sorry the folder wordpress and drag it into our htdocs folder it's gonna unzip the files into there and we can then rename the folder to whatever we want once it's in there now that wordpress is in there if we actually go to say localhost forward slash wordpress as long as our zamp is working you'll notice here that wordpress is now at the installation screen so we've gotten to the stage where we can set up the database and all that sort of stuff so the first thing we want to do is just click on let's go obviously and then we want to choose the database name so in zamp if we go to local host PHP myadmin and we create a new database and we'll just call it WordPress we have a new database now and the standard configuration for zamp in MySQL is put the database name which is WordPress and then we just put the user name as root and when put no password at all and then once you do that if you hit submit it will actually work and then just to run the installation and we're just going to call it we're commerce website I'll just put in a password and if you're doing this while you're doing this locally so it doesn't matter about discouraging search engines because they won't be able to see this website anyway and then click on install WordPress so you'll notice if we go into phpMyAdmin now it's set up in the database here and we can just log in now with our details and I am using a virtual machine and I think that might be what's contributing to the speed of this website so if you're using and your standard machine on zamp it shouldn't be much much quicker so that's WordPress setup now what I'm going to do is show you how to change it so we can call it say WooCommerce dot development or dev or test I'm going to make it work on this test so it's not we're not using a local host forward slash so the first thing we want to do is we want to go into our zamp folder which is in our c drive go into apache and go into conf go into extra and then we have a few for files here we want to go into the vhosts file so i'm going to open it up and i don't ever take a proper text editor so i'm going to open up in notepad and you'll see that there are some entries in here what we want to do is copy this entry and then remove these hashes and we want to make this we're commerce dot test take away the hashes there as well and we also want to link it to the specific folder that we're doing it so if we go into our zamp htdocs wordpress so we just want to do wordpress ok and make sure those hashes are gone as well don't worry about these other ones you can just remove them if you'd like and save it the second thing we need to do is go into our hosts file and change that so what we will do is we'll go to our C Drive windows drivers I think it is right no it's system32 my bad sorry system 32 drivers e.t.c and there'll be a host file there drag it onto your desktop because there are some permissions we're setting it to editing it directly okay open it up in notepad and then we want to add in 127.0.0.1 and then we're commerce dot test save it and then drag it back back in the last thing we want to do is we want to go into zamp and we want to restart zamp that's if it wants to load we'll stop we'll stop a patchy and then we will restart apache go back into Chrome and I'm just going to get rid of this error here because this is really annoying me right now okay and then we want to go into our local host PHP myadmin and we want to just change the database tables to point to our new URL so if we go to WP options and we can see site URL and home just want to change site URL to http WooCommerce doc test and we also want to change our home to WooCommerce store test as well so now if we get out of that go back into our brow our browser and we try WooCommerce dot test there we go now our WordPress website is working on zamp and it's also using a custom URL not that you need to do that but it just makes it I guess more fancy ok so now we have wordpress installed and if we go to WordPress dot test for slash admin you'll notice it doesn't work and that's because we need to update our permalink structure so we need to go to WooCommerce test P login dot PHP type in our details and go to settings sorry settings permalinks and then just just basically Save Changes but what you can do also while you're there is change it to post name so it has SEO friendly URLs so now we'll log out of that and we will go to will click on something and as you can see all the pages are working now and also forward slash admin is working as well okay so WordPress is ready to go and now I'm just going to show you what to install on your computer so that we can make this whole workflow much quicker and much easier to do so there are two things that I would suggest that you download in order to make this project easier to build one is a text editor my favorite right now is sublime text and there is a free version so let's just go on to Google and look for sublime text and let's just download your sublime text for Windows and once you've downloaded it just install it onto your computer put it wherever it suggests or wherever you wanted to and once it's installed that is now your text editor that we can edit to PHP code in an HTML and all that sort of stuff the second thing we want to install is something called nodejs and the reason why we want to install nodejs is because it allows us to use a thing called web pack now every web developer has their own way their own workflow of doing things and especially when you're doing it professionally you need tools that help you get it done quicker now you could very well build a website just using CSS which is fine but CSS and HTML and PHP and all that sort of stuff of course but with CSS there's a much simpler way and much quicker way to do things and that's called using something called sass so when we install node we can then use something called web pack which will automatically convert our CSS to sass or sorry our sass to CSS and it'll compile it so that we can do it much quicker in sass and then it will convert it into CSS now if this sounds all hard don't worry watch what I do and you should understand it very very easily so let's go into our Chrome again and look for nodejs and let's just install the recommended version for most users and we will then go next accept the agreement next install yes okay so no js' has now been installed and now we can go into our zamp folder and look at our project so zamp htdocs wordpress and you'll notice that i still can't see these files in sublime text so let's just click on one of them and make it open within sublime text so we'll just do a search for sublime text and make that the default okay and then let's go into sublime text and open up our project which is in obviously the sea zamp htdocs wordpress WP content and themes that's where I would probably open it up so we can create the theme and we can then add the files into the theme okay so let's get out of that and go back into Chrome and go into our WooCommerce test web site and we want to log into it now I'm just going to clean up a few things here just to make it really simple to look at okay and go into appearance and themes okay so let's start off with our theme the first thing we want to do is just delete all of the themes that are in there right now okay so let's just start from scratch I don't want anything confusing you so we'll refresh it there's going to be an error here because there's no theme at all we need to create a theme so to create a theme just go right click on themes folder and create a new folder and we're just going to call it a wit Commerce theme okay and inside there we're going to create a new file called index dot HTML sorry dot PHP which is kind of like the first file that WordPress hits when it loads of the theme we don't need to put anything in it right now and then we want to create something called style dot CSS style dot CSS now that we have our style dot CSS file that is that is actually our main CSS file okay so we need to put some comments in here so that WordPress knows the name of our theme it knows the author and all that sort of stuff so if we actually go to a website on Chrome which is the developer - developer website we'll just type in developer WordPress main stylesheet and click on this here and this will show us what the basic structure for a main stylesheet is so let's just grab all of that and paste it into our sublime text and we're gonna change it so I'm gonna call this my first week on this site and we're gonna take out a lot of this stuff so we don't really need any of that unless you're gonna release it for sale or something like that you don't even need to do it so I'm just gonna do this theme name is that and author is mr. digital and let's go and look at the themes page now so you'll see that we have 2019 which doesn't even so don't worry about that but then we have my first we comment site so let's activate that great we have our first we commerce theme it doesn't work at all so if we go into our website it's just a blank page there's also no image here so what you can do is you can add an image into your theme folder so if you add an image into this WooCommerce theme folder called screenshot dot PNG that will actually then be this image so the image is what do we got here you need to make it I don't know the exact specifications but just add in an image that is a square or like slight rectangle like this and it will automatically show here okay so now that we have our theme set up we need to start building it there are some other aspects or other pages that we need to add into this folder in order for it to work so the first thing we need to do is add in a header and footer okay so the header and the footer of things that kind of repeat on every single page you might put your logo on your header and your menu on your header and maybe your footer menus on your footer obviously so that each page has that so let's do a new file called head up dot PHP and we'll also do one called footer.php ok and then we need to create something called functions dot PHP and that's where we can input all of our wordpress functions and hooks and all the settings that we want to put into our theme we can put it into our function stop edge bass so let's create credit called functions dot PHP we then want to create a new page for our standard page template which is just page dot PHP and then we want to create one for our single blog post which is called single dot PHP there's also a template for your front page so whichever page you set to be your front page we will create that and that's front dash page PHP for any archives or you know blog post archives we need to create a basic template for that which covers all archives and that's called archive dot PHP we also have 404 dot PHP which is the 404 error page so you can customize that we'll just call it 404 PHP now that we have our basic template set up we want to start adding in our HTML scaffolding okay so in sublime text just go into header dot PHP and we want to start adding our HTML markup so in the latest sublime text you can just type in HTML tab and it will automatically create the markup for you so the header will include the HTML header tag the body tag but then these two closing tags we want to actually take them away I'm gonna make my text my text bigger here take them away and go into our footer and place that into our footer ok so we have our header page which shows the opening HTML the opening head and closing head and then the start of our body and then the footage shows just the closing body and the closing HTML now that we have our header and our footer we want to then go into our front page and we will include our header and our footer into the template so that it can use that for the header and the footer obviously so what you need to do is go into the front page dot PHP file and do PHP get header and then we will also type in PHP get footer ok so now that we've got that set up let's go into our theme and we will soar into our WordPress dashboard and we'll go to settings actually we'll go to settings and reading I believe ok now yeah in reading settings we have your homepage it displays your latest poche about posts sorry we want to change it to a Paige and we want to make it our homepage but we haven't set one up yet so let's go to pages and I'm going to delete these pages so we start from scratch I'm going to click on add new and we're just going to call it home now for any of you guys or girls that don't like the latest update to the WordPress editor called Guttenberg we can change that so let's go to our plugins and type in and do a search so we'll do a search we'll go and add new here and we'll do classic editor and as you can see it's right at the top so let's just install that and once it's installed we should see our pages and posts looking like the original WordPress setup so I'm just going to delete these plugins as well go to pages go to home and you'll notice it looks normal now or as a Houston now if we go to settings and we go to reading make our front page a static page and make it our home page so if we go to our website now it's still blank but if we look at the code you'll notice that we have our header header and our foot up okay so we have the basic markup done and now we need to go into our header and footer and then add in some extra pieces of code which will allow us to hook in our style sheet and our JavaScript into our theme this also allows other plugins like WooCommerce to add in the style sheets and JavaScript required for that those plugins to run as well so it's very very important that we do this so if we go into our header dot PHP and look between the head tags here we want to add in a PHP code called PHP WP head and then we want to go into our foot up and go to the bottom there and just add in WP footer that allows the theme to inject CSS JavaScript for plugins and our customizations as well directly into our theme without having to type it in directly one last thing we need to do is add in the body class and we use the body class because sometimes plugins want to add in different classes into your theme and they might need to dynamically add in a class so for example with WooCommerce we commerce adds a bit a few classes to each page for say the shop page will be body class equals shop or something like something similar so let's just add in the ability for that to happen let's in the body tag type in PHP body class and if you want to add in any of your own customizations you can just go in here and type whatever you want so let's just do tests okay but this will allow now other plugins to add in classes as well so let's go back to our theme and refresh the screen you'll notice firstly as well but now the WordPress admin bar comes up and that's because we added in the WP head and WP footer but if we go to our source you'll see all of the WordPress injected style sheets and stuff like that has been added and you'll also whoops you'll also notice that we have our test class there as well as the other classes that have been injected directly by WordPress so yes it is very very important that we add in this body class tag as well now that we have added in our header and footer tags we can then go and start adding in our style sheets and JavaScript for our new theme to do that we want to hook in the JavaScript and style sheets through our functions dot PHP file the reason why we do that as opposed to just adding in the stylesheets directly like this is that we want it to be dynamic and using the functions of PHP it will allow other plugins that might need to work with your JavaScript and your CSS to work so for example there are plugins caching plugins such as WP rocket that can concatenate all your CSS and JavaScript so that it's all really minified and really small and it can't do it if it doesn't know where it is so it won't know if it's hard-coded in here but it will know if it's been in queued that's what you call it in queued in WordPress so let's firstly load our style sheets so what we want to do is we want to create a new function inside this functions dot PHP file and we'll call it function load style sheets and inside there we want to use something called WP register style which is a function in WordPress and inside WP register style we need to add in some arguments so that it knows where this star she is so the first argument in this function is something called a handle it's just the name that we want to call us so we're just going to call this stylesheet the second argument is the source so it needs to know where this star sheen is so we need to use a bit of PHP to tell it where it is so the first thing we want to do is tell get the URL of the style sheets folder which is get template directory URI which is a function that gets the URL to the style sheet and then we just want to do style dot CSS the third option is dependency so if your star shape depends on anything we don't have any dependencies for the star CSS so we'll just add a blank space and then the fourth option is the version you don't have to put a version so but what we can do is just put version 1 or you can make a blank and then media is the fifth the fifth argument and that is to specify if it is for a different type of media so for example if it's for a screen or for a handheld or if it's for print but in our case we just want to make it all so it's going to work on all devices then we want to include this particular style sheet so we do WP in cue style style sheet which it is referring to the register registration we just did up there and then what we want to do is at the bottom of this whole function we want to do add action which is basically telling WordPress okay add this function into this specific area so WP in cue scripts is a function that is done in WordPress and we're going to hook in to this particular function that runs every single time our load style sheets function okay so we're basically adding upon the WP in cue scripts function that WordPress has we're adding in our extra bit okay so once we save that and we go into our theme and refresh the source you should notice now that our style sheet oh that's not it our style sheet is there okay so if I go here and I don't add that action and I try and refresh the screen you'll notice that that star she will go away so we know it's definitely working the second thing we want to do is add in the JavaScript so hook in the JavaScript to the footer of our website so let's just do function add I will do load JavaScript and it's very similar to what we did above but we're gonna do WP register script instead so we want to create our own custom JavaScript file and we'll call it a PJs so we'll the first argument is the name or the handle which will just call custom will do , and then we'll tell it where the actual file is so we will do exactly the same thing as above we'll copy this but we'll obviously change it to a pas and then the next one we want to just leave blank again which is the dependencies now if you do have a dependency of jQuery you can type in jQuery there and let's just make jQuery a dependency in there which means that it's going to look for jQuery in order for that JavaScript to run we will then do the version of one and if we want it to be in the footer we will make it true I believe we want it to be in the footer so we will do true and then underneath that we do WP in queue Hajis in queue script custom and now that we've done that we'll go into the to the bottom of the function it will do add action WP in queue scripts and then the name of our function which is called load JavaScript okay so we actually don't have an app dot J's file but it's it will still add it into the code so if we refresh it now you will notice that we have our style sheet and then if we go to the bottom of our site you should notice do we have apto jeaious yes our app da jeaious is now there but obviously when you click on it it doesn't load because it can't be found so let's create our app dot JS file in our theme new file Apatow jeaious and then we can look at our code again and go to app today s and it should be there fantastic okay so now we have in queued our style sheets and our JavaScript let's sort out how we're going to manipulate our CSS and our J s so that it makes it much quicker développé okay so a beginner would most likely use standard CSS which would just be going into your star dot CSS and juice a body and we'll do background equals black and go into our theme and of course it will be black and you can do that that is completely fine if you're more comfortable using CSS then go right ahead and do that but I'm going to teach you a trick of mine I don't know if a lot of people use this but this is a trick of mine and it just makes a whole workflow much much better so what we're going to use is the thing called web pack and web pack just simply put allows you to bundle up your assets so if you use sass you can use a sass file add in all the SAS code and then web pack will run in the background and grab that sass and convert it to CSS and it's like using other pre compilers like say there's a thing called koala which you can use which pre-compile your sass again if you don't want to use it you don't have to but let's let's make it work so and you'll see it in action and you'll probably understand it a bit better so let's go into Google and look for something called laravel github now laravel is a PHP framework the reason why we're looking for that is because we're going to use the web pack which is already been set up for laravel we're just going to use it on our setup so first thing we want to do is grab the package JSON file let's grab the raw stuff copy that and go into our our project create a new file called package JSON you also then want to go back into there and grab webpack mix j/s which is this file click into a good raw copy it and create a new file paste it in there web pack dr. Mixter jeaious okay cool now if we go into web pack mixed ojs you'll notice that we have a few a couple of settings here the first thing is as asking us where our original file is that we're going to editing like our source file for JavaScript or our source files for puss-ass so let's just say that's going to be in source just in our source folder and we're also we're gonna call that style dot s CSS and here it's going to be sauce dot app dot J s okay source for slash Apple DOJ's and then we're going to tell it where we want it to to put that file once it's been compiled so we're just going to tell it to go into our main folder which is just dot forward slash forward slash when we edit our source app jeaious that's going to automatically override our app KS which is in our main theme folder we're gonna when we edit our source style dot CSS it's going to edit our style dot CSS file but we probably don't want it to edit our style dot CSS because I think star dot CSS might be better just to keep this in there and then we create another CSS folder assess as far which we put in which we in queue into our theme as a separate file so let's just call app dot s CSS I've already created a folder called source so you may have missed that where I may have just done it without recording so inside this folder called source if we create one you can then create a file called fjs and create another file called app dot s CSS ok now that we have everything set up to work what we want to do is I'm just gonna close out of everything to keep it simple is we want to run a run node now we installed node.js before so if we go into what we need to go into our terminal now we can go into ms-dos and all that sort of stuff but I think we could probably find something in sublime text that will allow us to do it so if we go to where will we go so we want to go to browse packages preferably oh no not browse packages in sorry tools install package control now this is firstly going to install package control which is like you know getting plug-ins for sublime text now that its installed if we go to preferences package control and just look for install package click on install package and then we want to search for something like terminal so let's click on terminal and that's going to download as you can see at the bottom here so if we now right-click on WooCommerce theme you should see open terminal here and that will actually open up a windows powershell which is exactly what we need so to get all of this web pack working we want to do PHP sorry not PHP NPM install sorry about all the mistakes I'm making as you can see it's installing everything because it's going off this package like JSON file it's installing all the things that we need for web pack to run so you might just need to wait a tiny bit for it to download and once it downloads we can start using webpack and you'll see it in action great so now node has been installed or NPM has been installed onto our project let's then try something let's do NPM run watch okay now we need to keep this open okay and what this does is it's watching for any changes in our app dot J's file ok so once it says compiled successfully if we go into our folder our WordPress content themes oops I'm in the wrong I think I'm in the wrong file here so we go see zamp htdocs wordpress wp-content themes work on this theme you'll notice that we now have our app j s and our app dot CSS file in here we didn't create them in here that was compiled automatically okay so if I now go let's minimize the watcher if I go to my source and I'll go to app dot CSS and type in body background is read okay once I hit save you'll notice that the bottom here it says laravel mix builds successful which means that I've added that into my source file but if I go into app dot CSS it should be there as well awesome okay so that is basically converting sass to CSS now we just need to then put our app dot CSS file in queued into our theme so let's go to functions and let's add a new one and we're going to call it copy this and we'll just call it custom and we're going to change this to app dot CSS and save it now our background obviously should be red okay and now we can start instead of editing the star dot CSS or that even these ones in our main folder we go into our source and we edit everything in there so now let's I'll show you the power of CSS so let's go into our header and let's add in a header tag and we're gonna add our menu onto here okay and let's then put another div inside here called test okay so we want to target the test class within our header if you do it in standard CSS you do say dot header dot test oh no dot head up and oh my bad head up dot test background Eagles green okay we'll save that refresh it nothing will happen because we haven't specified a height or anything like that so we'll just do height hundred pixels with 100 pixel hundred-percent refresh it you'll notice that that's that's there now however in sass what we can do is we can kind of include it within the header tag so header and then within head out we do test and there we go then we can contain everything that's for the header within tag itself this is a really simple explanation of sass but it just makes life much easier as you can see it still does exactly the same thing and when it's compiled to CSS it does exactly the same thing as well okay so let's get out of that one thing we have or I have missed is bootstrap so we want to put bootstrap into our project now since we have setup webpack we can include it into our project using through our source so to do that we need to just go into our terminal and just do NPM install bootstrap this is going to download bootstrap it's going to put it in to a folder on our our theme and then we can include it through our sass so to now include the bootstrap CSS into our theme we go into our sass file we just in you to import node modules bootstrap scss bootstrap hit save and you say build successful and you will notice that it is blank but if we go into our source and we go into our app dot CSS you'll see that bootstrap is now in there now I just want to reiterate this again you do not have to do it this way you can install bootstrap you can use the CDN you can do however you want to do it you can in cue WordPress our bootstrap within here by just adding you know a new folder called boot CSS and adding bootstrap the bootstrap CSS into there then in queueing it here but this is just how I do it to make it quicker okay so now that we have bootstrap CSS we want to do the bootstrap j/s as well so to do bootstrap jeaious you just go into your app J's file and you do require bootstrap okay and automatically bootstrap will be installed into your app KS so if we go into our file now and to our website sorry go to app DOJ's you should see that bootstrap there's a lot of other things in there as well don't worry too much because what's going to happen is that when we decide to go live with this we'll do NPM run fraud and that is automatically going to combine everything into files so that they're fully minified so I'm just going to run it now and show you how it does it you'll see now that it's been compiled and if we refresh this now you'll notice that it's been fully combined so it mint minifiers the size of the file so what we'll do now is just do NPM run watch again let that run and watch in the background whilst we design the website okay so the first thing we're going to do is get out of these and we're gonna go into our header and we're gonna start scaffolding this thing so we'll just do a header you're now header dot PHP and this is basically going to display the menu and inside header we're going to do div container so that's going to allow us to use the bootstrap container and then let's do some styling for this so let's go to our app dot CS CSS and we will create a new CSS file called or s CSS file called header or underscore header dot c SC SS and we will we will then include the header into this file so that we can segment all the different parts of our CSS and you just do that by import head on it or don't make Lea refers to the name header inside our source file so then we can start working on our header within the header dot CSS so let's just open up the tag header and let's just give it a background of white and we'll make a height of 100 pixels and we'll also do a box shadow of 0px 0px 20 pixels rgba 0 0 0 0.25 and that is basically a shadow behind the header so if we go there you'll notice that we have our header at the top and we have our box shadow underneath it now just another cool thing in sass is you know source file folder if we create a new file called we'll call the colors underscore colors of s CSS and we'll create a variable called white well we'll just call it light and we'll make it go to FFF which is white we'll then go into our header and make that the variable so you can attribute the variable to anything you want and then you can only only have to change it once in colors dot CSS CSS last thing you need to do is obviously just go and import colors now one thing I've noticed is that the colors aren't actually changing here based on the type of document that I'm working with so I need to just find something on here that will change the colors so that there we go so we'll just go to view syntax and make it s CSS and if we get out of header and go back in it should should detect it but it'sit's not so we just have to get it as CSS there as well and there we go now it's got the colors so it's less confusing now we're now header we want to go into a header dot PHP and then let's like add a logo so image source equals I'm gonna find a logo so I'm just gonna use the WooCommerce logo save that image and we'll go into our project folder and we'll create a new folder called images and we will then drag that into images and we'll just call it logo logo dot PNG okay so now what we can do is we can go image source and then inside there we need to do PHP login for template directory which is where the template is and then images and then logo dot PNG we do class equals image fluid and that's a bootstrap class which is for making it responsive and then if we refresh we should see the logo there but it's not centered which is a bit annoying so what we can do there is instead of giving the header a height we'll just do padding so padding of say one REM and zero on the ends refresh it there we go maybe even make it make the logo slightly smaller so let's give our logo a class of logo and then in header dot CSS we'll just do logo with equals 250 pixels there we go so it's quite small and it fits quite well and it is responsive I believe so yep everything looks good for the phone and desktop so that's all good okay so now we want to add the menu we're gonna add the menu at the top right and we're also going to link it up with a word presses menu function now if we go into our admin dashboard you'll notice that we don't have menus here we can't see menus we need to add in the support there because we're using a bare-bones WordPress theme we need to go to our functions go to the bottom here and then do add theme support menus and we'll just do add the add menus and then also don't forget that semicolon there go back into the admin and refresh now and you'll notice that we have menus now but we don't have any menus set up we want to create a menu location okay so the menu location will allow us to assign locations to different parts of our theme and then we can choose whichever menus want and we need to display there in our WordPress admin panel so let's register some menus in there were to do register nav menus and inside this particular function we want to create an array so array and inside there will create one called top menu and we'll do Aero underscore underscore which is for translations and then top menu and just call this theme which is the the name of the theme you can actually I believe you may be able to just do this so let me just see if we can do it like that if you don't care about translations now if we go into our admin and refresh it if we create a menu we'll just call it top menu you should see top menu is now there so if we save that that means that wherever we place the top menu location code on our theme this menu will come up so I'll just add this to the menu and then we need to go into our theme and we just need to add in the menu code so that that location displays there so to do that go into our theme and get out of these things and just go into this area of our header and type in PHP WP nav menu and then inside there arrey close this off as well and inside the array we want to do theme location and we wanted to go to top menu so it's going to refer to this okay so now that we have that setup if we go into our theme you should see home is there now it doesn't look right but it's there so let's style it a bit let's go into our header dot s CSS and I'm going to make it so that we can view the syntax properly and we want to then make it side by side so what we can do with bootstrap which is great is we can actually use something called flexbox so inside the container do something called D flex if we go into our folder and refresh you'll notice that now it's still not looking good so what we want to do is we want to align items Center and we also want to do justify content between which means that it's always gonna if there are two items it's going to make them one end show one item the other end show the other items so there we go we have our logo and then our menus on the right-hand side then let's go into our header dot CSS and let's fix up the menu so the menu has a class let's go into the class here and or into the sauce and look at the class which is menu top menu but it also has class a menu so I'm going to make it that so you know headed on CSS we'll go dot menu and we'll do list-style-type:none margin:0 padding:0 refresh and this should take away all the padding of the unordered list and also the bulleted points and let's add a few more pages to our website so let's just about us and we'll also do contact us save the menu go there refresh about us contact us but still they're not next to each other so what we want to do there is we want to make it so that the menu items are also using the Flex box so we can go into our PHP nav menu code and do menu class D D - flex justify actually we can just do D flex and refresh it and you'll notice now they're looking like that again it's not how we want it to look exactly so let's go into a head of CSS and do Li list-style-type:none every time we change the source file it automatically builds it for us so refresh and you'll notice that it hasn't done anything so I've just got to see why that's not happening so we've used Class D flex here and then we have also okay so that it's actually taken away the class so we need to go in here and do and make it menu we'll just call it tapa menu okay top - menu and then go here changes to top - menu and then if we refresh it it should go away so okay so now they're they're working fine but they're the links are too close together so let's go and do Li and within that Li we can do a which is the anchor or link and we can make that a block and we'll also do padding is make it point two five REM okay and there's a bit more space between them we could probably make a margin so margin actually we'll just give it some more padding so just to 0.25 IRM at the top and then 1 REM at the bottom or top of top and bottom left to right my bad sorry ok so home about us contact us and they're they're separated quite nicely obviously we can style the the anchor tags to what we want let's just let's just go into colors and we'll create something called green and we'll just call it we'll give it a color code of we'll just call it green actually and then the color will be green ok and we might make the font size a bit larger so one point one our m and we'll give it a font weight of bold cool ok so not not the nicest looking menu actually I'm just gonna make it black so we'll call will caller who will call a variable called dark so let's just go here create dark and we'll make that 333 save that and then save our header make sure you save the variable of the color before you actually save it otherwise that will give us an error so there we have our menu at the top now if we make this page smaller sorry about that it's not gonna work exactly how you wanted to from a mobile perspective because this menu will get larger and it's going to look a bit strange so you probably want to make it so that after a certain end point it doesn't work after a certain screen size so top menu will make an app media screen and min-width let's make it 99 2 pixels display equals display equals okay how we're going to do this actually what we can do go here remove D flex here and go to top menu and make it at medius media screen and min with 99 to pixels which is probably the size of a something smaller than an iPad and then just do display equals flex and then before that rule we'll just do display equals none which will make it not display for mobile devices there we go so it works here but if we go to say a mobile it goes away cool alright so that's it now let's I'm gonna speed this up a bit because I don't want this to take too long this tutorial will go into our front page dot PHP file folder or file and we'll do div ID equals hero and I'll create a new sass I mean we don't have to create a new sass for everything I'm just gonna do it on here so that it's quicker we'll just do hero and we'll do height equals 400 pixels width equals 1 that 100% background is gray and I'm not going to use a color code for this we'll just type that in directly color code in sass I mean ok and then we just we've added the div in there already so let's go refresh and you should see that it now comes up like that so we'll make it about 550 and inside our div we're gonna put a container and inside there we'll just do h1 welcome to my shop refresh it still doesn't look the best about what you can do is you can go into the hero and sorry into the container and do D flex a line items center justify content center and it's actually going to it should align the welcome to my shop right into the middle of the screen but we also need to do h100 which makes the container a height of 100 so there you go and if we try and look at it on our mobile it still kind of looks good you might have to do some media queries to make the text smaller you can also add background to this this hero so I'm just going to do that I'll just find some fashion photos or something like that I guess we're creating a fashion shop and let's see what we can do here not sure what okay let's look at some images and let's just let's just get this photo actually it's too small so we want to get something a bit larger not safe search tools size larger than two megapixels let's grab let's grab this photo okay and we will save it hopefully it's the large version that we wanted yep cool all right and we're gonna grab that and post put it in our images folder and we'll just call it hero we'll go here go to app where are we app dot s CSS and do background URL images hero dot jpg and refresh it and you'll notice that it's not working so let's have a look at the actual now now larval webpack is is going crazy so I'm just going to stop it for a second and I'll go into here and I will look at the code and see why this isn't actually coming up okay so it looks like it's adding something to the file so let's just fix that up because we're using webpack it might be doing something a bit strange there may be a setting in web pack that we need to do just to make it so that it doesn't process the links so what we can do is go into let's just remove that go into web pack and do something here called options and do process CSS URLs false okay so that should do it and then if we just go into our terminal again and just do NPM run watch okay I'm doing something wrong here something's mucking around here so just give me one second I'm just going to close out of laravel mix okay so there's going mental because I did it wrong so we need to actually go into webpack and just make sure that there is a dot there so I didn't have a dot there it was going mental we're telling it so it doesn't process to URLs so now we can just make it images here Oh JPEG and if we refresh then the image should be there as we required great so now we have our text right over the models face so let's just go here and make it so that it's not justified to the center there we go and just before we finish that off we want to just make the h1 which is in there a color of white more light there we go okay so we've got our basic setup if we when we created the menu before we click on that it will actually take us to the about Us page but it's a blank page right now it's not a 404 page that we haven't set up a 404 page yet so let's just go and create the 404 page quickly so we'll grab all the content from the for the front page paste it in there and maybe just do you know div container this page was not found you can obviously customize it to however you want okay so if we go to about us now sorry it's it is it is actually a page that exists we actually created that page but it's using the page dot PHP template so we actually need to grab the front page content paste it into page and then maybe we can remove this hero and then let's just put in h1 the title of the page which is PHP the title and there you go so now we've got a about us on and then contact us and home let's just make the page look better so we did put it in a container which is a bootstrap container and let's give the container so we'll call the container main container and then go into our app Titus SCSS and do main container has padding to REM and then 0 so to REM top to bottom and then 0 left to right because can bootstrap container uses that to bootstrap bootstrap makes the padding on the left and right automatic and also within there we just want to do div Col which is a column within bootstrap and div row so wrap row around column actually we'll start that again we'll just do PHP the title and just leave it like that there is one thing you can see is that the logo and the about us is a bit off in terms of that they are not in line so let's just go to our header and we'll see why and I think it could potentially be because of this so let's create a road with bootstrap here and inside that row we want to give its the D flex options there okay and then if we refresh it everything should be aligned properly great okay so we have the logo we have the front page we have some of the other pages working and obviously we've got our CSS and our JavaScript working let's just quickly add a footer so we'll just go here on top of PHP WP foot I will do foot up and you know app dot s CSS we'll just do footer we'll just do height of 300 pixels background is gray and with 100% refresh that and you should see that we have that three that little footer here so let's on the front page now add another div called we'll call it content div content and inside app dot CSS will create something called content and we'll just give it up a height of a thousand pixels right now so we can differentiate between the content area and the actual footer so we go back to our home page you'll see now that we have our home page we have our content area and then we have our footer there okay so I think at this time we want to just that in all the WordPress functionality so we can add him content using the WordPress CMS and then from there we can add in WooCommerce so the first thing we want to do is go into our front page and our page theme files and add in some WooCommerce PHP code that will allow us to grab content from the text editor here and pate then put it into our theme so let's do within our content div PHP if have posts while have posts show me the post okay and then we do PHP the content within that it's kind of like it's a loop and then we do PHP end while else end if okay so what that is going to do is allow the front page to display content so let's go and get some lorem ipsum text just copy all this and we'll paste it into here and I had a slight difficulty with that so let's see what I've done wrong so it says that that on light 30 so lied 30 as you can see and while should else should be like that refresh it and now that content that we've added in comes up and it looks like that so it's a bit weird let's fix it so firstly within content we want to put it in a bootstrap container and then we also want to reduce the size of the content to auto so just to remove that and refresh it so now we have it within the container and it's also sorry about that it's also mobile friendly or reasonably mobile friendly this content here so we just got to tidy it up so it works well we then want to make content have some padding so padding to our am at the top to bottom and then 0 from side to side you can make it more if you want you could probably make it 4 REM cool maybe 3 all right so that's that's done you notice that it doesn't actually look very good on the mobile right now so if you make it smaller that hero is ridiculous so let's fix that up so in our hero we need to do a couple of rules so let's make it so that if the media if the size of the screen is a minimum of 1200 pixels then the height of that hero will be 550 otherwise let's make it for a mobile 300 pixels okay or for a mobile or smaller device also do another one which is for something that's 768 pixels we'll make that 450 so that's a refresher now you'll notice that it now kind of makes it a bit better but what we want to do is make it so that it works it works properly on a mobile so that you can see the picture on the mobile so to do that we need to go into here and do background size equals cover and we'll refresh it again now we should see the lady there fantastic you'll notice that she's not in the same position she was before so we could potentially change that by mucking around with the background position but I'm not going to waste too much time on that one thing I've just noticed is the logo is a bit strange there as well so it's right on the edge and we don't want it to be exactly on the edge so let's go to a header and we will just make sure that we we put okay so again I've done something a bit incorrectly here we need to give it put a column inside there if we're going to do row and then we want to do that okay there we go great okay so we have our logo at the top we have our links we have our front page with some content and we don't have any content on any of our other pages yet our work ally khloga at the top doesn't link anywhere so let's make that link if we go into our header and we look at our logo will just do a href equals PHP blog info URL and we'll then save that and now we can click on that and all take us back to our home page okay so now that we have that we have our single pages that we might want to add some content into so let's just add our this content into the other pages as well great so now we have these pages and they have content in them as well but they're not displaying so what we need to do is go into let's go into our front page we'll copy this content here this whole area here and then paste it into our pages or PHP and if we refresh that the content should now come up but what we can do now is probably remove this main container container thing put it inside there go into our app dot CSS and make sure that and just remove this one and there we go it's all uniform now so I have our front page we have our sub pages now in WordPress WordPress allows you to have page featured images so they're called post thumbnails and so if you wanted to have say a large image at the top of this screen without having to include the image into the in the text editor you can create something called a featured image but as you can see we don't have that option right now so what we want to do is we want to go into our functions dot PHP and we want to do I'm going to change this to add support and we're going to make it add theme support post thumb nails save it refresh the screen and now we have the ability to add featured images so let's go and add a featured image I don't have many images on my computer I think I have yeah I have none so let's just go and find another image that we can use now you want to probably make it as large as possible just so it can fit okay so that's not a good image let's just do tool size a bit larger than that yeah it's use this one it's quite huge but we use this one bit bigger it's a web P file it's not a JPEG okay save this one all right that's a JPEG file we'll just call it fashioned JPEG and just save it onto the desktop and then we want to go and find that file which is on our desktop upload it and you'll notice that the image is now there and the featured image if we view the page the image isn't there we need to actually put it into our theme to do that what we want to do is go into our page dot PHP and let's just maybe put it on top of our title and we'll just do PHP the post thumbnail URL and then we want to specify an image size now WordPress is excellent with this whenever you upload an image it will automatically check what pre pre-created sizes you have determined WordPress to have and it will automatically create different sizes of that file to fit okay so what we want to do is actually go into our functions dot PHP and create a couple of different sizes so go into functions dot PHP and let's go add image sizes and in there we're going to do add image sighs and we're just gonna call it a post image and then we're also going to specify the size so let's just say if you upload a huge image that's like five thousand pixels by two thousand people's you want it to be a bit smaller you don't want to upload such a large image because it's going to slow down your website so let's tell it I want images to be 1000 by 1000 100 by 600 or 750 okay and we're gonna tell it that we want it to be cropped so if the image is huge and it can't find the exact aspect ratio to make it that size it will crop off part otherwise you can make it false and then it will keep the same image and it will just try and make it as much that size as it can okay so now that we have that post image in there if we go onto our page dot PHP which I'm just going to get out of all these other things because it's getting a bit confusing here we called it post image okay so we'll just save that and we'll go and refresh it and it's not going to work but it will link still to that that image so let's go image source equals and then copy that and paste it into there and then do class equals image fluid and then just do margin bottom five for example that's a bootstrap class okay we have our image now but one thing you're going to notice is that this is a massive image it's 2,000 by 1,000 pixels it's quite a large image so we don't want it to be that large we want it to be 1000 by 750 which is the one that we created so because we already uploaded this image before we made the change so we uploaded the image before we added this in WordPress that hasn't converted it so from any images you upload from now on it's going to create the post image size but for any that don't exist right now just download a plug-in called force read right thumbnails actually you need to add it and we'll just install it and we'll activate it and then if we go to the admin and go to settings I believe know whereabouts is it let's refresh it and there we go tools for Surrey generate thumbnails regenerate all thumbnails it's done the fashion one now so if we go here and go to our about us you'll notice that it's being cropped to fit 1000 by 750 so let's change that to make it a bit better let's make it false so it's not going to crop it and let's just make it 550 yeah and then we'll go and do the same thing tools false regenerate thumbnails regenerate there we go so it hasn't cropped it now and it's kept the same ratio and tried to make it the same width in height so there we go but if we inspect it now it's only 1100 by 550 which is fantastic that's what we wanted to do so that's how you add a thumbnail and different image sizes into WordPress ok so now that we have the basics happening you might want to add a sidebar so there are things in WordPress called widgets of course we don't have access to widgets because we haven't added in the functionality for widgets so as your guests will go into our functions PHP okay and we will add the functionality for widgets so it's not it's not exactly the same as say adding support for menus and posts thumbnails we just have to create a widget and then it will allow us to view widgets so the first thing we need to do is add a widget and we'll call it a page sidebar so we'll do register sidebar and within there we want to do an array and then we'll do the name which we'll call it page sidebar and then we'll do an ID and we'll just call it page sidebar we'll give it a we can give it a class but I won't give one yet and then you have to do before so a class needs to be in inverted commas and then we do before title which is the title of the the title of the widget where you type your you'll see what I mean but when you create a widget you can type a title and this is the class for the title we'll just give it a chore and we'll do after title and we'll just do will close the h4 and we can give that a class later if we want to okay so now that we have created the sidebar save it and we should then be able to view widgets so there you go we have page sidebar there and then we can say drag things into this so let's just drag pages into there we'll just call our page website pages okay just as an example so we've created the widget but now we need to actually we want to put it on our pages right so we need to make that work somehow so to do that we need to go into our page dot PHP and we need to add in the sidebar code there so one thing you could do is we could create a new folder called new folder sorry we'll call it sidebar dot PHP and that's part of the standard setup for a wordpress theme so i've done it wrong i've created a folder i need to create a file sorry you file sidebar dot PHP and inside sidebar PHP let's do PHP dynamic sidebar and just do page sidebar which is the name of this page sidebar okay and then in our page dot PHP we can just do for example just showing you how it works PHP get sidebar and that will get this sidebar dot PHP because this is a wordpress thing and then it will call the widget so let's refresh now you should see website pages now about us contact us there okay doesn't look good but it works so now what we can do is we can go into our theme and let's grab this image that week our our featured image and take that out of the container for a second and we'll inside our container will do div row and inside div row will do div col lg3 so it's basically div class col lg3 that is a bootstrap class to say three columns and we'll put the sidebar into there so that's going to be a left column which which is a size of three a bootstrap grid has twelve columns and then div class call lg9 and we're going to paste this into there and then we're going to grab this image and we're going to paste it into here on top of the content let's just give the image and alt and the alt will be the title of the page done let's refresh the page now we should see our sidebar and then our content to the right of it cool all right so let's style this sidebar slightly so let's just make it so that it doesn't have all those ugly bulleted points so let's just do it's got the class of widget okay so we could just go into our app s CSS and it keeps on removing the CSS colors so let's go widget and then we'll do list-style-type:none margin:0 padding:0 there we go so that does one of them and then within there we need to then get the other unordered list so we'll just do UL list-style:none padding:0 margin:0 there we go okay so we have our widget and our widget can also have a border let's just do a border of one pixel solid group some sort of gray so I'll just do like $9.99 and then we'll give it a padding of say 1.5 REM just didn't really do the padding very well I'm not sure why it's because I overrode it here so we'll just do padding underneath that and remove that there we go and maybe give it a give it a border so border sorry box shadow 0px 0px 10px rgba 0 0 0 0.25 and we'll also give it a border radius of 0.5 REM there we go and let's just remove the border the border color now there we go ok so one really handy thing in in bootstrap is that we can make the sidebar scroll down with you so let's just go and do something called div class equals sticky - top refresh it and you should see it's that it's a sticky okay and just to make it a bit further on down we'll just do top equals fifty pixels and now there you go whenever you scroll down it's gonna follow you which is pretty cool okay so now we have the basics of a wordpress theme unfortunately I can't go overly in-depth with this because then the video will never end but we have a basic theme we have a home page we have a single page the last thing I'm going to show you is how to do a single post and a blog archive and then after that we're going to install WooCommerce and make WooCommerce work within this theme and that should be it so to do a single page what you could easily do is you could just grab all the content out from a normal page go into single dot PHP and paste it in there okay and then what we can do is we can go into our blog or into our WordPress go to posts create let's get rid of hello world and we'll go add new and we'll just do test blog post and let's just grab some lorem ipsum text again paste it in there and create a category called blog and we'll publish it now that we have a post in a category called blog we can go into our menus and we can go to categories and add blog there now we have our blog if we click in there it's going to show you nothing again so what we want to do is go into our single dot PHP copy that code and put it in archive dot PHP as well all right refresh it and it's going to come up like this now that's not how we want it to show we don't want it to show the whole blog post firstly we can just remove the whole sidebar or we can keep the sidebar and we can then add in a sidebar just for blogs so let's just leave that there for a second what we want to do is we want to in the archive make multiple blog posts show up so I'm going to create one more blog post and I'll grab the same content from here we'll call it test blog post to paste that in as well and put it under the blog category okay and you'll notice that if we get a blog it's now showing test blog post two we need to set up a loop within here and the loop is already there so what we need to do is copy the title put it within this loop also take a change content content to the excerpt excerpt there we go and then we go refresh and you'll notice now that we have two and one okay and we have some images there that are not showing for some reason or another so to sort that out we need to let's just get rid of this image for a second actually the reason why images aren't showing is because they don't exist in the actual blog posts so if we if we firstly let's just set up the link so a href equals PHP permalink and that is going to link the blog post to it is its respective page so we'll click an arrow take you to the blog post page okay but there's no image that exists so we need to do an if statement here that says PHP if has post thumbnail PHP and if ok and let's repeat that on all of the pages that word without that that image into because otherwise you're going to come up with a broken link if there's no post thumbnail image there we go so let's go test blog post to and there's still no image coming up there so let's just save that great ok now if we go into test blog post 2 we add a featured image let's use the same image we used before we'll update it and will refresh the post now that post comes up with the image and we go to the blog and that image comes up as well awesome and you can also make it on the actual archive that the link the image goes to that link as well so just wrap the a around it there we go so you can click into it or take you there awesome maybe you want to separate your your maybe I want to wrap your archive blog posts in a div so let's just do div class equals blog post and then close it off go into our app to SCSS and do blog post and then we want to do padding one a REM and maybe we can give it a box shadow like we did with the other ones and the syntax again is stuffing up so I have to look into that for a long-term solution and there we go and then maybe do say a margin bottom of to REM great okay so we have our blog posts we can click into it'll take us to the blog post and one thing we don't have though is we don't have the sidebar so let's go and create a dynamic sidebar which will be used for our blog go into functions go into widgets register another sidebar and we're going to call it blog sidebar and we'll call it blog sidebar there as well so then we want to then go into our sidebar dot PHP and copy this out because we're not going to use sidebar PHP for the blog archive and then go in there and replace that with this and make it blog sidebar so now if we refresh it nothing will be there because we haven't added anything to the vlog sidebar yet but then if we go into our appearance widgets you'll see blog sidebar there and then you could just do recent posts and latest posts save it go to our blog you'll see our latest posts there you can go into a single and it still shows the same so we need to go to our single dot PHP and also put in blog sidebar you can add as many widgets as you want to and then you can just style the widgets however you see fit good so we have our archive and then you know you might want to put a tag cloud or whatever you want to to add tags into each blog post it's it's quite easy firstly we need to just go into a post add some tags so let's go test tests to test three and then we'll view the post we don't have any tags there obviously we just need to add them into the template so let's just go here and just do a page so this is in single dot PHP by the way the tags and this will automatically use WordPress to actually we'll have to do echo the tags I believe it's still not doing it am I on the right post yes okay I think it might be get the tags apologies I haven't done this one for a while I think we might be in the wrong post and you know what I've just made a silly silly mistake where I haven't actually saved the actual blog post there needs to be saved first obviously and then you'll see when I do get the tags it comes up with an array so we want to just do their tags because the tags will echo out each tag there you go so now we have the tags fantastic you also might want to do paging so that it you know you only show up to ten blog post per page so let's add in the paging functionality on our archive dot PHP to paginate the archive page just go on to Google and just type in WordPress paginate links and the reason why I'm doing this is because it's quite a long code scroll down to the bottom you'll see basic example just copy that okay now let's go into our archive dot PHP and we will then post it in there so what we want to do is probably do it underneath here underneath the loop and we'll save that now and we'll go into our blog and you'll notice that nothing happens and that's because we don't have enough posts so if we restrict the amount of posts per page to say ten up to one sorry that will mean that we can only show one post per page on our blog archive and therefore the archive links will come up as you can see then they're now working so to edit your post per page just go into settings reading change it to the amount you want and as soon as it shows us that the amount of blog posts there are to the limit of blog posts it will automatically start paginating which is what you want you can obviously style all of this by just looking at the class so the class is there's no class for this so you actually need to maybe do something like this create a div around it div pagination for example and then in your app dock see s CSS do you know pet or in your CSS file pagination a color let's just make it red for the for the sake of this example you'll see there that now it's red and you can obviously do as much as you want with CSS with that okay so we've done pagination we've done a single blog post we've done the archive as well so let's get into what commerce now so we're commerce as you know is a fantastic solution for online shops relatively simple online shops and it is really really easy to install in WordPress so the first thing you need to do is just go into there good into the admin go to plugins go to add new and then type in WooCommerce so let's install WooCommerce now and once we commenced installs we'll just configure it to Australian settings because I'm in Australia but obviously you want to configure it to your country once that's installed just click on activate and then it's going to take you to a wizard that will allow you to set up we commerce quite easily so we'll just wait for that wizard to come up okay cool so we're based in Australia or I'm based in Australia I'm just going to do any address Australian dollars plants or both physical and digital and we'll go let's go we will not set up any payment options yet actually we'll just make stripe there and then we'll also allow all this stuff flat rate of delivery for ten dollars we'll just delete all of this stuff or remove all of this stuff we don't want to activate jetpack and we're ready to go so let's be sure to visit the dashboard remove all these messages they can get quite annoying and nothing's changed on our website but WooCommerce is now installed so will commerce automatically install some pages you'll notice that a single installed shop my account checkout and cart so what we can do is we can actually go into our menu and add shop to our top of our menu and then what you'll notice is that the shop link is here at the top of the page okay and it has the sidebar because if you go into pages you'll notice that they are pages so they will be using the page template the ones that don't use the page template are the product page that the and yeah basically the product and the archive page okay so now that we have our shop there I want to then add some products so let's go to products create a product I'm gonna call one called t-shirt and I'll grab this t-shirt here we are t-shirts already there I did that without recording just to quicken up the process so we have a product category called test which I've already created and then I'm going to create one called t-shirt too and let's just grab another t-shirt and we want to just get some lorem ipsum text to put into there so that we can see I'm just waiting on my other computer here see a bit of text related to the product cool okay and now that we go to shop we should have two products one called tisha 1 t-shir 2 and then you'll notice that we have a picture some content let's go and add some contents into the short description as well of each product because the main this text up here actually shows under here but if you want some text underneath here it needs to be the short description ok that was the wrong product there we go okay so we have t-shirt we have an image and we also have been a text although we can't add the product to car which is a bit strange and the reason why it's looking strange is because we have not declared WooCommerce support in our custom themes so let's go onto Google and we need to declare WooCommerce support and you should see that in the theme developer handbook there is something here called declare where are we declaring ok so basic usage just copy that paste it into our theme into our functions dot PHP file and then you should see now that when we refresh it it looks much much different ok so shop looks different the product looks different everything's looking a bit different so what we want to do is now go into our theme create a new file called WooCommerce dot PHP and then grab the content from page dot PHP and paste it into there ok and if we do that it's going to look a bit it's going to look weird ok we don't want it to do that we want it to we want to remove this sidebar make this column 12 and then take all this out and do PHP WooCommerce content now we're commerce is going to use it's basically a function within the WooCommerce top hedge P file which will grab all of the WooCommerce needed functions for it to work ok so now if we go into shop our files come up sorry our products come up we click into the product that comes up within the container as well so basically every single week on this page is dictated by this WooCommerce dot PHP file so if we add in something like that ok hit refresh it's gonna come up there it's going to come up on our shop page it's gonna come up on the checkout page it's going to come up everywhere so let's just remove that then and you'll notice that it's using the WooCommerce Styles so you might want to overwrite styles so we can fix that but if we go into the product you'll notice that it doesn't have a price and that is why we can't add it to the car great so now we have the Add to Cart let's add it to the card and we can go to checkout and we can proceed to checkout and you'll notice now it's starting to look a bit weird because the checkout page and the car page are classified as pages not as we're commerce inverted commerce pages so what we want to do is create another another page template that is shared by only the checkout and the car pages so to do that go to page dot php' copy the information save it again as let's call it template we commerce template shop dot PHP and in there we want to go into the header and do forward slash asterisk template name shop page close close close it up so it's almost like like a comment and then we want to remove the sidebar make it Col LG twelve and then just take away this post thumbnail thing and then go into our admin theme go to checkout make that have the shop page template and also make cart have the shop page template so if we then go into our theme and go to shop Add to Cart view the cart you'll notice now it's using the template we create created so if I add stuff into here and refresh it it will also ill be shared on the cart and will also be shared on the checkout now this is the big thing we're having problems with WooCommerce and bootstrap because bootstrap and we're commerce both use the same styles when it comes to columns so bootstrap use flexbox and Cole Cole one is a flexbox thing so we need to overwrite this now the only way we're going to be able to overwrite this is by overriding WooCommerce templates now let's do it so let's just get rid of that and let's go into our folder let's go to our theme WP content and plugins and go into WooCommerce this is the WooCommerce theme plug-in page we need to go we need to go into templates and we need to see which template is affecting that so this is the checkout page so it would be checkout folder and then you'll notice that there's a few things here so what you can do is if we get a form checkout you'll notice that it's there the Cole - Cole one all that stuff so we do not edit the plug-in files directly we copy over the plug-in files ok so copy over templates completely go back into our theme and then paste them in but then you rename it to WooCommerce now that we've renamed to WooCommerce it means that every file in the WooCommerce plug-in folder is being overridden by the ones in our theme so technically we could say go into checkout go into form checkout and type something in there let's just type whatever okay and we'll go to our checkout refresh and you'll notice that that text is there now so that means we can roll it now so you don't have to have all of the files in here you could delete all of them and only have the ones you've ever read in WordPress or WooCommerce with which is probably the the most probably the best option but I'll just keep them in here for now so then let's go into the file so let's go to form checkout and let's change this so that it does not use coal 1 and coal - let's make a call LG 6 and call LG 6 and give this a class of Road and now you'll notice that it will work as expected but still not exactly as expected so so we have the columns now but you'll notice that these are not exactly how we want them to work so we need to figure out why this isn't happening ok so yet we basically just need to do something with this WooCommerce input wrapper so let's go into our app dot s CSS and what I'm going to do here is actually create one called WooCommerce so we're just going to import import WooCommerce actually will create the scss first so we're commerce dot s CSS and that's just to keep all your WooCommerce stuff separate then what you can do is we're commerce and inside there change the syntax to CSS again to work on this input wrap import wrapper and then we'll do with 100% and display:block there you go so you can obviously target your inputs to make them look nicer I'm not going to do them in this tutorial it will take forever but what you could probably do if you wanted to what to do quicker is just right-click on one of the the inputs grab the the CSS that's affecting that and then instead of doing it within this WooCommerce container here we just paste that in and then you can do say padding 1 REM background gray etc there you go so that's how you can kind of target the elements now that I've done it I should probably make it look half decent give it a height of say 30 pixels and then border:1px solid and then use a CSS or s CSS thing called darken will darken the gray by 30 percent and actually didn't work so maybe that doesn't actually work within the border okay so it's still not doing it so border:1px solid will just do it important if you with WooCommerce I've had the pleasure of working with it quite a lot and if if it doesn't work you might have to give it important which means that Wickham s is overriding the Styles okay so that's that's how you make it work so let's place an order it says there's no payment method so let's go into settings and we will go to payments and we'll just allow direct bank transfer okay and we'll just I'll type in some details now obviously the styling isn't exactly how you would want it so you go in there and you you style it however you want the best way to target anything would be to just right-click on it find out what the class is so let's just say this class here is that copy the whole thing and or just copy say for example that will come as form label alright just as an example paste it in font or make it a color blue for example and there you go it's overridden the style there we might not be able to use sass exactly how we want it with overriding WooCommerce but it still is good practice to have it in a different way commerce s CSS file so it's nice and tidy for you so I stuffed up my order I'm just gonna type in the details again and let's place the order the phone is required okay great so it's typing the phone and the order has now been placed and you'll see also there's an issue here same thing with the columns so we need to go into our WooCommerce folder our overrides go to checkout and I believe it could be this is a bit of a I think it might be an order receipt is the auto receipt no it's not order a see it's route it could potentially be review order no billing and shipping okay so I'll just find it and it is in order and then it is in order details customer so we do exactly the same thing we just need to take away these columns so make them Col lg6 and make this one coal lg6 and then put the row around them so just do row here and refresh that and that should work as expected so that is pretty much the end of our basic WooCommerce themed tutorial as you can see we've created a basic wordpress theme and then we've incorporated with commerce into there styling is a different totally different thing it will take forever to show you how to style something everyone has their own requirements for styling but this should get you on the road to creating your own theme and your own WooCommerce store quite quite fast hopefully everything I've shown you on here is straightforward and if you have any questions please leave a comment below and I would be happy to help you I will be introducing a WooCommerce plug-in pack in the comments below and that will basically include a lot of the WooCommerce plugins that will help you get started such as table rate shipping and a lot of other plugins probably about 10 or 12 plugins and it will be at a set price so you'll save tons as opposed to going and buying them directly on the WooCommerce website keep an eye on the comments for that otherwise that is it for me and good luck with your project thank you

Channel: Mr Digital

Views: 105,929

Rating: 4.9019518 out of 5

Keywords: woocommerce, woocommerce tutorial, wordpress, tutorial, woocommerce wordpress, wordpress ecommerce tutorial 2018, woocommerce setup, wordpress woocommerce tutorial, woocommerce plugin, wordpress woocommerce, wordpress ecommerce website tutorial, ecommerce website tutorial, woocommerce 2019 tutorial, wordpress theme development, develop wordpress theme, how to, woocommerce theme development

Id: TlmDsU8GirU

Length: 118min 26sec (7106 seconds)

Published: Thu Jun 06 2019