Convert HTML template to WordPress Theme (2025) - Full Course

Key Takeaways

[Music] thank you good morning everyone how is it going today um today I'm going to be showing you how to convert an HTML template into a WordPress theme okay we're gonna try to do this as quickly I mean in as efficiently as possible but this is going to be more of a walkthrough of all of the process so that you can see all the possible errors that can happen and I mean I'll be doing this like live with you right now so I'm not sure what errors we're going to encounter but the idea is that you will see everything that you can that you would be able to that you could encounter in a real world situation okay um all right so two things before we begin we're going to be using a boilerplate for WordPress that water boilerplate for WordPress is it's a an empty theme that you have that sorry about that an empty theme that you have that you're going to modify in order to adapt it to your new template okay so it's an empty theme and the boilerplate that we're going to be using is this one right here it's called our awesome theme if you would like to know how to build it you can watch my previous video about how to use webpack on on WordPress in which I just basically created the spoilerplate and the good part about this one is that it already has typescript and SAS support and bad little support if I'm not mistaken so you can just start coding on it and it's going to be like completely compatible and you can use SAS and typescript um if you want to know how to build it you can check my video on webpacks 5 and WordPress or if you just want to download the boilerplate you can download it on the link in the description and what else and yeah so you need this boilerplate and of course you need an HTML template that you want to convert into WordPress theme so how do we do that good question um so that's what this is all about um so first of all we're gonna have to use an h10 we're not going to have to have an already HTML template finished and and I don't have one right now so what I'm going to do is I'm going to come right here to html5up.net what this website does is pretty much it just allows you to download free templates or HTML templates and that are completely responsive and that is pretty useful I think so I'm going to be using this one hyperspace and let's see the demo you have the desktop version I mean as you can see this one right here is the front page and you have desktop version you have a tablet version I mean it's yeah I mean this is just all the breakpoints and so it allows you to see that this template is actually um responsive okay so in case you don't know what responsive means is that it's I hit adapts to the size of the of the screen so yeah so let's let's download this one I'm just going to download it and the good part about this website is that it's free and all the some of the templates if I'm not mistaken they do require that you attribute the the I mean the template to the actual person who created the template so yeah don't don't forget to do that if you're going to use this for commercial purposes um all right so now that we have it right here I'm just going to open it and all these files right here is what comes inside of that and as you can see right here we have an index.html which is pretty much the front page that we were looking at before and we also have what else we have right here we also have we also have generic HTML which is the page that we're going to be using for our posts and then for our for our single post and we have an elements that HTML which is kind of the guide that we can use to to style our components so that's pretty convenient too I'm just going to close all the other tabs there you go and there you go so let's go right into our website this is the website that I have and just I'm just going to give you a very quick tour of the boilerplate in case you don't if you in case you haven't used it before and in case you haven't watched the previous video if you have already watched the previous video or you know how this polar plate works you can skip this section of the video so what's your what you can see right here is the front page and you can see it's very clean and empty so there's nothing in it and that's how it works because we have our awesome theme you know what I'm going to show you how to access it from the beginning so to access it what we're going to do I'm running WordPress in a local machine using local by Flywheel the convenient part about local is that you have a sideshow in here you can just open it and it comes with WP WP CLI installed composer PHP in MySQL so that's convenient and right here it opens directly in our WordPress installation so all of these files are the ones that would be in your server so so you know and so what we're going to do is we're going to get into the content we're going to go to themes and here right here you can see that you have all your themes this um this right here are folders and this right here is just an empty index.php that we don't use at all and this right here is my boilerplate okay so if you download the boilerplate from GitHub on the link in the description you're going to get this folder exactly like that so you can just copy it inside here and you can set it up and running and get it up and running um so there we go also what else we got in here um let me show you how this looks um yeah all right so there we go um now I'm just going to open this awesome uh boilerplate let me there you go I'm just going to open this awesome boilerplate in in vs code so there you have it um so this right here is the boilerplate and how it works basically is that we have our source files right here we have SAS and we have typescript and we have all of this I mean of course you're not going to include in queue a SAS file into your WordPress theme so or a typescript because I mean web browsers have no idea of what SAS or typescript is so what you want to do is you're going to you're going to want to compile this into minified versions of SAS and a minified versions of CSS and JavaScript and that is what webpack does and my webpack that we created in the previous videos is down here so all you have to do right now is open the terminal and type npm run watch and that's basically going to take these files and compile them into main CSS and main.man.js and these files are already enqueued into our WordPress okay so there is no need to do anything else so everything you put inside here it's going to be added into your WordPress so that's convenient uh what else are we gonna do um um yeah I guess that's pretty much it so let's get right into it um oh yeah just to show you pretty quick also the scripts and and then the scripts the scripts the scripts are here and so my scripts I created a watch script and that runs webpack and it just pretty much just allows you to keep an eye on the files that you're using up here and if you modify one of this for example let's say that I modify this one to body and body background color to red and I hit save I haven't touched anything but it because I'm running the npm watch this right here already automated and already included in background color red so no need to um there's no need to to to run the compiler it's going to be done automatically okay so that's how the boilerplate works so right now let's get let's get back to including our template into our theme so let's see how that works we have the template right here you know what I'm going to do I'm going to open this in code in vs code as well so I'm going to do code I'm going to copy this here and there we have it so we have our templates up here in case you don't know how to add a front page to a WordPress theme what you want to do is you add a new file then you call it front page dot PHP there you go and in here anything you put in here um I'm just going to say H1 hello world and this right here is going to be is going to be my front page so now that I have saved this if I reload this page it's going to interpret my front page as the front page now my front page file as the front page so there you go so everything we put in here is going to be considered the front page so as you can see all that we have to do is take this file and put it inside there and configure it okay but there's another problem um in WordPress we usually work with a separate header and a footer template in order to there you go in WordPress we usually work with a different header and footer template and what we do is we import those header and footer every time we want to create a new template so that we don't have to repeat ourselves all right so if we didn't do this we would have to add here every time we added we added a new template we would have to be we would have to do something like oh yeah so adult type HTML and then add the nav bar and and all I mean it's it's just a lot of work and it's not useful so what we're going to be doing here is we're going to take the top part of this into a header.php and the footer into a footer.php and we're just going to include them so Footers our footer is already built it's up here and our header is already built it's up here and we're going to do is we're going to import it in here just by you doing this so you do PHP get header and you do the same PHP get footer and this two functions right here they're going to call our files um they're going to call our files footer and header so right now if I add H1 right here hello world now refresh we're going to have our header under footer and as you can see the styles were in included too because my styles are included in my header.php so yeah right now I can modify my header for example header.php and I can say that in here I want it to be I want here to be another H1 and this is inside header dot PHP and then I save this and then I reload this appears right here because we're getting this from the header and if you can see my front page doesn't have that text so it's coming from the header and it's being included on get header same for get footer we can include something on get footer right here I always say H3 this is the Fuller and then if we refresh this appears right here okay so I'm just going to delete this and I'm going to delete this right here too all right so what we want to do is we want to include all those files right all this code right here inside here so let's try to do that um ideally we want we only want the body to be inside it um let's see our footer template we don't have a body tag inside it oh yes we actually do so okay so what we're going to want to do is we're going to get the body tag inside the header too okay so we're going to update our header this right here is going to go into the header pay into the header our header template um this right here is going to go into our footer template and everything in between is going to go into our frontpage.php file okay so let's get let's start with the header so here we have our header this one right here is our boilerplate and this one right here is the the template that we had before so as you can see right here we already have a lot of things inside our head tag and here we have a head tag so let's update this um we want to add a title tag so we copy this here from here to here so now we have a title tag um we have our meta and we Define the Char set this right here pretty much just tells our browser which charts it we're using and we usually use utf-8 but just to make this a little bit more Dynamic we use block info chassette and that basically just does I mean it usually just brings utf-8 but what it does is that if for some reason our theme changes the chart set this is going to be dynamic and it's it Returns the name of the chart set that's stored in the database and it puts it right here so we're going to leave this one as this meta we have viewport detect so everything seems exactly the same we have initial scale One initial scale one we have user scalable no and just to make things completely exactly as they are in in this template we're going to add this one right here um and we're going to replace this one with the one that we have the on the other side what else do we have we have link relationship profile for some reason and we have link style sheet um so we have to link to our Styles CSS as you remember in the file that we downloaded from the template we have our assets and we have our CSS Styles but we don't want them to be like this in our case we want them to be in the way we already have our boilerplate working so we're going to include them using our boilerplate now to do that we're going to be using SAS so that's convenient there we go and we also have some web funds that's going to be kind of a pain probably but let's see how that works um all right so first of all I'm going to leave this title sheets for later okay um so just keep in mind that these two are going to be included later and what else do we have here so the head I guess that's all for the body I mean the the opening tag of the body it's important that you keep it the opening tag of the body it's important that you keep it in the header.php and not inside your template because um I mean pretty much because it's always present and also because um yeah just because it's always present and this right here is pretty important too this is just a PHP function that comes from word from the WordPress framework that substitutes that creates or right that creates the classes for WordPress and it just outputs them in here so what is this doing let's see what this is doing I'm just going to open this my website again I'm let me just get rid of the red color because it kind of it's kind of disturbing um I modified it in main CSS so I'm going to set it to something a little bit more beautiful um let's say well that's not extract exactly beautiful but it's at least it's better on the eyes um so what we're gonna do is I'm gonna show you this right here is the opening body tag and you see we don't have any classes here let's see what's going on um so I'm going to go to elements I'm going to go to my body tag and as you can see we do have some classes here we have home we have blog we have logged in we have admin bar HF wait I'm going to zoom in here there you have it so we have home blog logged in admin bar HF H feed customized support Etc and this classes we did not import them I mean they're not here so where are they so they're being imported by this function right here so it's important that you add this function and so you usually just let it keep it in the header.php so that it's always important so that it's always imported and WordPress is going to import to replace this with any functions that it needs to include so no need to do anything else about that uh we had WP body open now we have ID page class site skip link green letter primary skip content Etc I actually think that we can just let go of all of this let's see how they do on their side they already have like they start already with the section so I'm just going to yeah I'm just going to erase all of this there you go so now we have our header that's looking that's looking very similar to the header from our template that we downloaded let's say if it's still working on here there you go it seems to be working now we only have hello world and but we still have this on our Footers so let's clean up our footer too um our footer is supposed to be something like this let's see if we can get that here um buddy buddy buddy well what we have here okay something important is that our footer has to have all the scripts that we're going to be using so we're going to be using this right here and all of this all the way to here yeah so we're going to be including the footer we're going to be including the script and the End closing tags so let's go to our footer right here footer all right footer and we're going to remove this footer from here we don't need this one um and we're going to add WP footer that's important same just as before this WP footer it works pretty much the same as the Olympiad that oh did I explain to you how would WP head works um all right so just in case I didn't this right here yeah this WP head this is going to replace the I mean calling this function right here it's going to include all the Styles and everything that you want to include in your header that you don't see here but that WordPress does for you so if we see how this works on the front end right here you can see that we have inside our head tag we have what we included we have Myspace by HTML5 up utf-8 as I'm as I was telling you initial scale meta link profile and we also have a title thing right here in my awesome web supply Just another WordPress site so actually we didn't need this one because all of the everything that comes after this one right here is being included by this function right here and this is just like and this comes from the WordPress setting so you don't have to do anything to include all of these things it's all included by WP head okay and later I'm going to show you how to add things to WP head so that it includes them together um what else we got all right so that I guess that's that's it's for the header uh let's let's just go back to the footer uh front page nope uh for their words or footer all right so here's our footer and we want to put all of this in there but we want I mean the wp footer it works just as WP header uh WP head sorry um what it does is basically just import all the scripts that you tell WordPress to include in the footer and it replaces this with all of that um so so so so so this right here should come before be wait yeah this right here should come before the body at the end body tag and we're going to delete this because we don't need them anymore and this looks pretty good to me the problem right here is that we're including scripts that are not uh in our directory so how do we deal with scripts and styles I'm going to show you that in a moment and for the moment I'm just going to comment this out I'm going to do the same in the header in the header remember we need this link Styles right here but we they're not going to work so I'm just going to comment them out all right so I did it um this right here this is not going to work so I'm just going to comment it out these are the styles for the template and and in our footer these are the scripts for our template so we're just going to comment this out right now because it's not going to work because they're not included in our theme so let me just show the EU that footer is working and that the header is working and let's see the front page what it looks right now what it looks like right now so as you can see we only have front footer and header and let's just keep this hello world and if we re refresh this we have hello world still and we have design and Untitled this right here is the footer that we see right here designed by HTML5 Untitled All rights reserved um but we don't have the style for it so that's what we're going to do later in the video but as you can see we already have a footer we already have a header with all this info right here that we wanted to include and so apparently everything's up and ready to include our code inside it so let's get right into it um I'm going to first of all oh by the way yeah don't don't forget that in my header thing in my header dot PHP I opened body and HTML and I close them here right body and HTML so that's that's how it works well let's replace everything that's inside here with everything that's in our template right um I'm going to take just a quick break of five minutes I'm going to show you in a moment how it works all right all right well now we're back and so we're going to put everything that's inside here and here all right and let's see how that looks I'm just going to select the sidebar that's going to be quite important and we're going to select all the way until before the footer because we included the footer in our footer so I'm gonna copy this and paste it right here there you go now you have it right here now if I save this we're in our front page I'm going to bring this here and let's see how that works let's see how that looks um all right seems to be working so we have our hyperspace title we have the description we have the subtitles we have all the content that's here what we do set up some dollar what we do Etc uh what we do yeah I mean we seem to have all the contents so what we're going to do now is we're going to add the Styles first all right um to do that I have to remind you that the styles that we're going to add here are supposed to be this too main.css and no script.css okay for a moment I'm going to stop jetpack because that's not going to be I'm going to show you how to use it in a moment but um for a moment we're going to be using this too so how do we use this too first of all I'm going to uncomment these two lines so we're using acid CSS and Main CSS there's one thing with WordPress that this is not going to work because you have to tell WordPress that you're going to be using you have to give WordPress the actual the actual wait what's going on here [Music] um you have to be to do WordPress to give WordPress the actual full URL of of this right let me show you how this doesn't work just like that okay if we leave it like that and we refresh this uh it's not going to change anything well first of all because we don't have our Styles there but also because if we come here and try to look for that that style sheet that we just imported it's going to be let me see where it's going to be is going to be somewhere around here let's say it's going to be where did I put it by the way I put it under the link profile thingy link profile thing yeah here it is so it's this too and it's not working definitely because here we have a relative path and WordPress does not really like to work with relative paths especially when working with a theme so what we're going to want to do is we're going to have to give it the entire URL or URI for to today's style sheet so first let's add our style sheet here to the assets folder uh all of this I'm just going to delete it for now um and inside assets I'm going to create a CSS CSS directory and inside this CSS I'm going to put main.css all right and main.css is here main.css there you go now my main.css in there it's in there and what else we have a noscript.css.well there you have it so now we have our cssing assets and what we're gonna do right now is we're going to we're going to do to we're going to I mean if we if we save this and we load this it's still not going to work because it won't find it because it's it has a relative um a relative URL so let's make that um let's make that uh complete URL okay so how to find this one to find it we can do a couple things first of all we can do HTTP are we doing are we using https here um wait are we using https I don't think so all right so it's not HTTP so it's my awesome website I forgot an e somewhere around them am I awesome websites are about the the misspell local and then Here Local you uh I mean this is the URL to the PA to the to the CSS file okay so this is going to be my awesome website.local.wp content slash themes and the theme is called right where are we just gonna open this and the theme is called my awesome website if I'm not mistaken or my awesome theme I don't remember how's it called it's called My Awesome theme yeah and the theme is my awesome theme and then assets cssmind.css right that's supposed to work because I mean what we're doing right now is we're just like giving it the entire path all the way to our theme okay so let's see how that works uh it doesn't seem to work working either why is it not working let's see we copy this we come here we paste this and it's actually there so what's going on here um all right what's going on I don't know what's going on I don't know what this is not working let's see if the null script one was the one that had a Lee all the things that were supposed to work content themes to do my awesome theme assets foreign let's see if this is the one that had uh it's not down either I wonder what's going on here uh it's probably the scripts that were supposed to be added hmm how about if I use my awesome how about if I do it like this um did it uh get template directory ERI then I do something like this oh yeah there it is all right so yeah it wasn't working because we didn't add the HTTP um all right so there you go that's what I meant when when I said that we were gonna go through some errors um the thing here is that you're going to want to use get template directory every time that you want to to specify that you're using your current URL because I mean what's going to happen I mean if if I add I mean if I replace this right here to my to https this is going to work too about oh https uh no it's not working either I don't know it's not working out and there must be some kind of type of somewhere um there must be some kind of type or somewhere but well just to let you know here you should use PHP because I mean if you upload this website and you change the domain name at some point this right here is going to remain like hard coded and you don't want to come back to your code and replace the domain name every time you change the domain name so what you do is you ask WordPress for the domain name by saying get template part URI and that way it'll just give you whatever it is the your eye of your theme all right so this right here is going to return your website let's have content things my and the name of your theme and then you can add your relative path inside your theme okay so that's how it works I don't know what's the difference right here um HTTP oh yeah because it's not supposed to be https um so if I do HTTP like this no it works yeah all right so that was the problem I was using HTTP and not https but just remember instead of instead of writing the entire thing just right get template power again template directory URI there we go and we're going to do the same thing for this one right here and don't forget the Slash and there you go so now you have uh now you have already got what's going on here get template directory oh yeah here this is not supposed to be here so now you have your theme and it seems to be working apparently for some reason um and our our links even work as well so that's convenient not bad and there you go so I mean the front page is on its way we have already included our Styles let's do the same thing with our script okay we're already still working on a header okay so any page any template that we create if we just add get header it's going to add all for all of our uh or scripts and all of our Styles let's do the same thing for scripts right now so we're gonna go down here to footer and we're going to try and find this script right here um so there are many of this so we have assets jsg aquarium in JS crawlix scroll ex all right so we have a whole bunch of of JS files here and I suppose that we can find them in here okay so we'd have jQuery mean.js which is this one I'm just going to put them inside assets JS okay JS oops rename it to J s like that and it's not supposed to be inside CSS it's supposed to be inside assets so here we have our CSS then we're going to add our Js and it's supposed to be um we're supposed to have jquery.min.js jquery.me.js so let's put it right here Tech uh what else are we supposed to have scrollix main.js I'm just going to do it like this um um jQuery scroll X Men this one jQuery Skrillex Min js2 for some reason we have two of this oh scroll X and scrolly so it's this two we also have browser main.js which is this one um breakpoints that mean the JS which is this one you tell and Main alright so it's actually all of them and we put them all in here and remember that this right here is not going to work because we're using here relative paths so and we want to use uh you'll want to use the absolute version of the URL and to do this again just as before I'm just going to modify it all oops I'm just going to modify it all at the same time so we're going to add here one second we're gonna add here get template directory year I and then remember to add the slash assets.js aquarium main.js Etc so all of it it's in here it's supposed to find it because we just gave it the URL of our template and then we said to look for ad for assets Js and then your files in here so that seems to work there you go let's save it and let's see if we have any errors in our in our console so here we have a console of course we have many errors for a moment but let's clean this one up a bit and then refresh let's see what that gets um all right so there are a lot of Errors um myosin local WP content themes my awesome theme acids main.css didn't find assets main.css for some reason um my SM website dot local there will be content themes minus and theme acids made it CSS version 6.03 yeah all right so that's something else you're not supposed to all right that comes from webpack um this one right here comes from webpack 2. um I have some website take look look look look look look all right so it's just the images that were not found so I mean apparently so I can as far as I can see this seems to be working all right um let's see who are we all right so the scrolling seems to work seems to be going fine not bad okay we're gonna fix this in a moment that comes from jetpack and images let's get the images working as well and we have the inside the assets we have the weapons but we're not going to use the weapon so more so for the moment we're going to use we're gonna use the images right here and the images if I'm not mistaken how are they referenced the images oh they're inside here okay so CSS doesn't need any images I suppose that our template file does required images so let's see um front page do we have any images yeah it goes on to look to images picked as if pick zero one pick zero two pick zero three so these are the ones that it couldn't find and these are the errors that it was throwing here if you can see we have um big zero two pick zero one and pick zero three not found so we're gonna fix that in a moment um just as before remember um you know what I'm going to do is a search replace right here um so we're going to do image Source equals Tech images every time you want this thing is looking for images what we're going to do is we're going to look for um we're going to replace this with image source and we're also going to say images but now we're going to give it the entire URL and how to give the entire URL you guessed it you give it get template directory directory URI Tech Deck and then slash images and there you have it so now if we click on replace up there you have it get template directory URI and it's looking for image for a folder called images and the pix01 inside that folder so we're gonna have to create that folder here images and let's put our images in there images there you go now you have your images inside your folder and what you're going to want to do now is you're going to save this and let's come back to here and let's see how that's working do we have images and we have images indeed not bad let's see the entire thing this has like all right so it's looking pretty good so far not bad all right and this I I have to if I have to remind you we're running this on WordPress so it's looking pretty good so far what else do we got in here um all right all right all right so next thing I'm going to show you is we're going to see how to we're going to see how to import all of these things because I mean so far we have imported our files on our source file our scripts and our CSS files in in the footer and header just like usual but I'm going to show you how to do it the WordPress way in a moment so um buckle up let's do that all right so what do I mean when I say the WordPress way okay WordPress has a particular way of dealing with dependencies and with scripts and styles in particular okay that means that as you can see right here you have your get footer and get header or functions as I told you before get header calls everything that's in headed out PHP and get footer calls everything that's inside footer.php um and what we want to do is that when we call WP head inside the header we wanted to include our Styles as well not only these styles from WordPress we wanted to include our own Styles too so what we're going to do is we're going to add these two things inside the whippy head that's the WordPress way of creating a theme and as I'll show you in a moment it will allow you to organize your code much more neatly and to configure the dependencies that you need for your CSS and SAS sheets okay and we're going to do the same thing with the footer and in this case as you have seen we have included the scripts in the HTML directly but what we're going to do is we're going to import them the WordPress way inside the wp footer action so that means that when we call this right here it will include all of this by itself and you will not need to include it your um to to type it uh like I mean it's just like again it just allows you to keep it more organized and to keep um to be aware of the dependencies all right good um so that's what we have and right now what we're going to do is hmm I'm going to do there are two things that we can do first of all let's import all of this without webpacking first we're gonna forget about webpack for a moment and what we're going to do is we're going to come right here to functions.php and I'm going to say I'm going to say I'm going to say two seconds I'm gonna say all right I'm going just going to take this off for a moment and I'm going to add function add or let's I'm going to call it custom Scripts and what this function is going to do is it's going to add the scripts and the styles to the action that we mentioned before to WP footer and to WP head so how do we do that for the Styles it's very simple we're going to have to use this function called WP and Q Style and we're going to do that with all of Main and noscript okay I mean we're going to have to use one for each so this function takes uh the first argument that it takes is the name of the of the of the style sheet that we want to add I mean this is whatever you can add whichever name you want to add it's just to recognize it when you're using it and the second argument is the source of the thing what I'm going to do is I'm just going to open this like this so the second argument is the source and to get the source we're going to do the same thing that we did before we're going to say get template um get template a template directory URI and we're going to add here we're going to concatenate the location for our main.css okay and that's going to be assets CSS main.cs says there you go and finally uh this the next argument is the dependencies list and do we need any dependencies if you for example if you needed a bootstrap and you had bootstrap defined before you would write here bootstrap but since we don't need any dependencies for this one we're just going to leave it like that next we're going to have to add the version if there is no version you just have to write false and finally media all I mean I think that's that's enough so this right here is going to include main.css into our into our our head cycle okay into the action this action right here I'm going to do exactly the same thing for no script.css I'm not sure what that one does I'm just going to copy this one and say no script and no script and this one right here is called No script dot CSS again I'm adding the location for this one again no dependencies and false for the version and this right here shooting keyword but so far we're only adding the function if you know how how programming languages work we're just creating the function right here we need to call it so that it actually does something but how it works is we don't just call it like this in WordPress customscripts.ph and like that and that could probably work but that's not the best way to do it what you do in WordPress is you tell WordPress when you want this function to be executed okay so um WordPress works with a cycle um kind of thing which basically means that it does some things first and then then other things Etc and in this cycle there is one um one part of the cycle that's called WP and Q Scripts and that's the part of the cycle when it adds the scripts to and the style sheets to your theme so let me show you how that looks so we're going to add an action to the WordPress cycle and the place in which we want to add this action is going to be WP and Q scripts but there are many many parts of this action list okay you can add it to init and it will just fire whenever you start I mean at the very beginning of your web of your WordPress website when it started to load but right here we're going to add WP and Q scripts if I'm not mistaken let me see if that's right um now we need to find the name of the hook in WP and Q scripts I think that's the name of the hook and it is indeed okay okay so this is the name of the hook and then a second argument is the Callback function that we want to fire at this part at this moment of the action and our uh the function that we want to fire is custom scripts so what we're going to do is we're going to add custom scripts right here and now if we save this and we remove this from here you know what I'm going to show you I'm going to remove the action so so far this will not run it it's just a function for a moment but we're not we I have commented commented out the action so let's go back to the website and and then then let's refresh and you can see that our style sheet is gone of course because we we just commented it out from here but we want to add it inside here so look at this I have not uncommented this I'm actually just going to delete it and I have added it here so I save this and then if I refresh the page I still have the I have the I have the styles again but now they're being loaded inside WP head and that's how you do it in WordPress okay this is the way to be even more organized and to keep your code neat it's very important because many WordPress developers have terrible terrible uh um um I don't know code I don't know why but it's something that happens in WordPress um all right so this is what we do right here and then let's do the same thing for JS right um now for JS instead of using WP and Q style I'm just going to add it inside the inside the same function we're going to use WP and Q rypts and what this one right here does um I'm not sure I can use this um let's see um hello yeah I'm not sure why this is working all right now you know I usually use NQ script okay um this is just like to to show you because we're going to replace this in a moment so same thing between q a script you add the name of your script we're going to start off with great plates dot main.js let me see in which order they have been imported here so we had we this is the order that we want I'm just going to copy this I'm just going to paste it here all right um I'm just going to paste it here there you have it so all right so we're going to import all of this first of all we have to include jQuery jQuery let's just call it jQuery and actually um all right so let's say the source where it is and the source of course it's this one sources this one tag I have to remove this I have to add this and that all right there we go same name source the third argument is the dependencies we don't need any dependencies for this one we don't set a version for it because I mean we could I guess but I guess that's right and then in photo this one's important you need to set this one to True otherwise it will be loaded in WP head and not in WP footer okay so the last argument has to be true if this is a script okay there you go so now we have added the first one I'm going to do the same thing for all of them uh just bear with me I'm going to do this pretty quick oh nope like that um think it's like that yeah all right so the second one is supposed to be the second one is supposed to be jQuery scroll except min.js I'm just going to modify this right here second one's supposed to be jQuery scroll X that mean the JS and I'm going to call it jQuery crawlix and here if you can see we need we do need to add a dependency so it's going to be jQuery okay just to I mean just to keep in just to keep the same order that we had before okay and same thing with the third one which is scroll e Dot main.js and that one we're going to add it here jQuery scrolly that mean the Js okay scrolling between the JS and we're also gonna call it um jQuery okay and also in dependencies we're gonna need jQuery but this time not only jQuery but we're also going to need jQuery scrolling so that it adds scroll eggs before before this one okay so this is going to look for jQuery and jQuery scrollex and it's going to include them before adding this one you know what we we only need jQuery scroll likes because jQuery scrollix already needs jQuery so we're kind of creating like a um a waterfall so it's going to try to import one and it won't fire it will find it it needs I mean if it ever tries to import this one it's gonna say oh I need to import jQuery scrolling first then it's going to try to project very scroll Express and it's going to go and be like oh I need to include jQuery first so that's how it works and then the fourth one is going to be browser.me.js browser.maine.js oh not like that there you go browser.main.js and again right here we're going to our jQuery scrollex as a dependency here um has to be there's a string and this one's going to be called browser and this one right here is going to be break but that mean the Js breakpoints that mean that Js we're going to call it brain break points um what's going on here break points there you go and it's going to be breakpoints not mean the JS and independencies we're going to add this one right here there you go like that like that jQuery scroll eggs oh no this one's going to Independent browser you know jQuery scrollex um wait points DOT main okay I suppose oh yeah no it's all right then util and Main okay we're only missing util in main so let's do the same thing for you till and Main right here till like that util took new till and this one requires break points and name this one's going to be Main dot Js and this one right here is going there's a way faster way of doing this I'm just going to just showing this showing you this very quick so that you kind of have an idea of what's going on so now I can delete all of this and now we should have everything imported uh just remember that in JavaScript of course you need to add um semicolons and at the end of your functions so this is how this works this is going to throw an error otherwise um [Music] and there you go so now this should import all of our Scripts uh I suppose I should I really should have used anq scripts in plural but whatever um I mean it's in the end it's just the same thing um but yeah I mean we have style and scripts there you go and it's always set to true in the last argument so that it will include it in the end so let's see how that works I'm going to remove these things right here and let's see if our smooth scrolling still works okay um all right so our content seems to be working and the scrolling seems to be working too so there you have it um so now our Styles have been imported inside WP head and inside WP footer and that's pretty good that's pretty convenient and that's how you do it in order to for this to be well organized um but there's a better way of doing this even better I'm going to show you that in a moment uh we're going to be doing this um so far as you can see we're using the assets file and we're using directly the main CSS and the main JS and the JS files but we don't want to do this this way we want to be able to import this instant because I mean like what happens if you want to add custom CSS I mean of course you can add a new file here and be like oh this will be my custom.css and then just import this file just as you imported this file right here and add it as a dependency and you'd be you'd be doing something like this and you'd be like oh this is going to be custom it's going to be my custom file and the dependency of course is going to be main because the main is is the is the one from the theme so we wanted one from the theme to be loaded before our custom assets and then right here I can be like oh so background color let's say let's say that we want our H1 H1 to be called okay no column color yellow okay let's see if that works if I refresh here uh this one is working because we have imported custom CSS inside our functions right here but what if you don't want to use CSS what if you want to use SAS um all right so to do that I would recommend that you watch the previous video on how to use webpack in WordPress um but if you don't want to watch all of that you can just learn to use the boilerplate that I and that I already created in that video in this video and that's what we're going to do right now so to add all of this to the boilerplate right here to use SAS and inside sources and for it to be compiled automatically inside assets what we're going to do is we're going to move all of this inside here okay so let's do that first um all right so first of all custom now we're going to delete this thing uh we're not going to be adding this custom thing right here move to trash and of course that means that this one right here custom uh we have absolutely no need for it so there you go and right now what we're gonna want to do is we're going to create all of our files up here and we want to run webpack in order to Minify everything and to put everything inside here in just two files one for JS and one for CSS that way we will only import one one CSS file and one script and that's all that we will have to import it will make our code way more clean and our project way more maintainable and of course it will just be better if you push this to production because webpack allows you to do this automatic to automate all of these processes okay so let's take all of this and put them inside here so CSS is pretty straightforward I suppose um no it's actually not that straightforward uh I'm gonna start with JS actually so what we're going to do first of all is we're going to take all of this files right here and we're going to put them inside the TS Source TS folder and we're going to add a folder inside here we're going to call it default for the default styles of the theme we're going to copy all of these things I mean move them inside default there you go so now of course this is not going to work because none of the styles that are being referenced inside the NQ script files are going to exist actually and that because they have changed um I have moved them to Source TS default but I will have to import this into main.ts how do I import this I can I can do import everything from I'm gonna say default let's say break points um dot main.js let's see if that works I'm not sure it's going to work actually um now you know what I'm gonna do let me let me look at something right here how do how do I import JS files um compiler options all right so this is how to import JS modules into a typescript file so apparently you can do this as I was doing uh let's see if it works put everything as whatever no I'm just going to use this um compiler options allow JS true and I'm going to have to modify my typescript Json file I'm going to add this here um so there you have it allow JS so it was actually set to true for some reason okay so all right and right here I'm going to import great default of course and we're going to say we're going to import bright points first break points.min.js let's see if that works and I'm going to do the same thing for all of them so next I'm going to import browser browser and then jQuery oh no what was the order again I forgot the order um let me see what was the order um so the order was jQuery first okay jQuery then jQuery jQuery Dot scrollex then jQuery dot scroll Lee jquery.com then browser Main hmm browser main then break points that mean the JS then util dot Js and then Main .js main.js all right so that's supposed to work main util breakpoints browser scrolling just colleagues all right so that's supposed to work so right now what we're doing is we are including all of this inside main.ts in order for this to work you might need to enable allow JS in your typescript file so if you have done that it should work we're gonna test it in a moment and finally we're gonna need all these files into our CSS file now this is going to this is going to bring some errors definitely because it's going to use some fonts that we don't have um are we going to we're going to have to clear that up at some point let's see if we have funds here fund family import let's see if we have Imports do you have any Imports yeah we have awesome fun thousand oh we actually only have Phantasm as a font so that's convenient all right um okay so let's do this let's go for main.css and no script and scripts okay so what we're going to do is we're going to do the same thing right here we're going to create a new folder inside scss and we're going to call it um default again and inside default we're going to create two files one's going to be called main which is the name of this one but we're going to call it main.scss now you know what we're going to call it default default.css and the other one we're gonna call it noscript.css scss of course and then just copy all the contents inside here and we're going to