How to convert an HTML Template to a WordPress Theme (2019)

hey everyone today I am going to teach you how to transform an HTML template into a wordpress theme now you may have a website already that is a static HTML website and you want to convert it into a wordpress theme or you might have seen a really nice HTML template online which doesn't have the WordPress theme as well and you want to convert that into its own WordPress theme let's do it so let's get started the first thing I have is a basic web server setup which uses zamp if you google zamp xam PP you can load it on your Windows PC and I think you can do it I'm Mac as well and you can then basically build your WordPress site on your computer WordPress is obviously already set up here we have a basic installation and if I've actually deleted posts and pages just to keep things nice and simple and we currently have the theme which is 2019 setup we don't want to use 2019 we're going to create our own thing but I've just got a dead to show you what the standard look of the of WordPress is so let's firstly go into our sublime text editor or whatever editor you're using and this is the WordPress installation and inside the themes folder you'll see 2019 is there what we want to do is delete 20:19 and we want to create our own theme so let's create a new folder and we're gonna just call it I'm just gonna call it theme an inside theme we need to set up a few things so that WordPress detects it to be a theme so the first thing we need to do is create a style dot CSS file ok and this is what wordpress actually looks at to find out the name of your theme and without the style dot CSS it will definitely not work actually I didn't I don't think I put it inside the theme folder did I no I'm gonna delete that and we'll do it inside this theme folder there we go okay inside style dot CSS we want to do a couple of things and it's just really basic so we'll do a forward slash then as the risk and then we'll do theme name and we'll just call I'm just going to call it test theme and then underneath that I'm just gonna do author mr. digital now you can do much more than that you can do the author URL the description license version all of that sort of stuff but just to keep it simple we can do that if you'd like to know more about that just Google main style dot CSS on WordPress and WordPress will give you all the options that you can use now that we have the main style dot CSS we need to create a couple of other files inside here that make up the standard WordPress theme so in the theme folder we will create create a new file called index dot PHP and that is just the main index dot PHP you don't actually need to put anything in there but it needs to be in there otherwise the theme won't work new file again we're going to do functions dot PHP and that basically is where we put all our hooks and in queue all our style sheets and JavaScript and anything else we want to customize on the theme we can do through functions PHP then we want to do the basic page template and we also want to do the single post template and then we will also do the front page template so if there is a page which is set as your front page on WordPress this will be the template that it uses then we will do head up top PHP and do foot up top PHP and we'll do archive top page P which is the archive for blog posts and we'll do search dot PHP not that we're going to use all of these but this is kind of the standard stuff search dot PHP is the search results page for WordPress will do 404 dot PHP which is the error if a page doesn't exists all but you'll go there so those are the basic ones that I kind of use when I set up a wordpress theme okay so now that we've got that set up I'm just going to close all the files so it's nice and neat okay and we're gonna go and look for theme that we can or a template HTML template which we can use to then convert into a wordpress theme let's look online here and on the color Lib website which I just googled free restaurant website I thought I'll do restaurant website theme and I saw this one which I actually like which is called Luigi so what you can do is you can just go to more info and download and download it of course if you're going to use this theme for commercial purposes then you can purchase it so I'd recommend doing that just to support the author so I actually downloaded that earlier and on my desktop I already have Luigi's zip waiting there and when I've when I convert an HTML theme I like to grab the actual folder and put it on my desktop as well so I can easily refer to the files that are inside there back to our WordPress installation if we refresh the plug or the themes page now you should see that we have 2019 which is no longer visible and then we have test theme which I'm going to activate now and that's actually our theme that we set up before you'll notice that there's no picture here so you can actually put a picture in there if you'd like to and to do that what you need to do is open up your theme folder and just drag a screenshot into there which I created one before word which you just need to change to screenshot PNG dot PNG and you have to make sure that the size of the actual image is eight hundred and eighty wide by six hundred and sixty pixels high so now that you've I've dragged it in there if I actually just refresh the page you should see that the screenshot is now visible with the theme and that's it okay so now that we have our theme set up let's look at what we need to do to make this template work okay so i've loaded up the template we've got a menu at the top we've got like a hero image we have a bit of info here we have some pizzas and then we have like an accordion almost not an accordion it's just like a toggle menu and then we have a foot up so firstly what we want to do is we want to grab the top of this page we don't want to grab the slide or the hero and this information because this stuff is going to be on the front page but this is always going to be visible on every single page that you go to as you can see every single page shares it so this should be in another area called the header dot php' so let's go into our header.php and we're going to then paste that part of the template into there so we need to open up this index.html inside our text editor as well and I'm using sublime text and let's just grab the first part of it which would just be here up until the end of header and we'll paste that into our header dot PHP then what we'll do is we'll go to the bottom of the page and we'll grab the front foot up until the end we want to grab that and we want to paste that into footer.php so now we have our header and our foot up and because we're working on the front page we want to grab the rest of the information which is in the middle underneath header and above foot up and paste that into our front page dot PHP ok so now that we have our front page where are we okay I've lost everything okay now that we have our header and a footer and our front page we want to go to our pages and we want to create a new page on WordPress called I'm going to call the home I'm gonna publish it and then I'm going to go into settings on WordPress and go to reading and change this to a static page so that means that when WordPress loads it's going to load a static page as the main page or the index page and we're going to make that the home page which I just created we're gonna save it and then go into permalinks and we're going to just change our permalinks so that they display nicely like this for SEO purposes it's always better to display like that as opposed to this and we'll just save that as well if we go into the theme now you should see it looks like this which has the it doesn't even have the head just got the information that we pasted it into the front page and I'll tell you why what we need to do is go back into our theme and we need to include both our header and footer on the front page dot PHP template template so to do that we just go to the top of our front page dot PHP and we need to do PHP get header which is a function that WordPress provides us with and we'll also go to the bottom and we'll do a PHP and we'll just paste that and change it to foot up ok and if we refresh the screen now we should see that our header and footer should come up now it's still very unstyled and ugly but if we go into the source it basically looks like an HTML document which is great so now what we want to do is we want to get the style sheets and the JavaScript to work so that everything starts looking good so to do that go back into here and this particular template seems to be using files from quite a few folders here so what we're going to do just to be safe is grab all of these folders and we're going to drag them in to our theme folder now that they're there we can go back into our theme go into our header and we can grab all of this let's just see what we need to in queue so so what we're going to do as opposed to just keeping the stylesheet links here we're going to actually include them in WordPress and it's the right way to do things because WordPress then knows that you're using style sheets and JavaScript and if you use plugins that affect them at all like caching plugins and stuff like that they can detect that they're using them as well if you just use it like this then it could potentially cause problems in the future so it's always best practice to include em or basically include them in WordPress as opposed to just in your template so if we look here we have a Google Google Fonts which we don't need to in queue and and these all look like they're part of the theme so what we'll do is we'll just copy that what we need to do here is replace it with PHP WP head okay and what we also want to do is go into our footer right at the bottom there actually we'll just stay with the header firstly what this is is a function which basically hooks in scripts that are sent through our functions dot PHP file okay so we can put anything we want hooks filters whatever in our functions dot PHP file and it will either come up we can direct it to come up in our head or footer of the page so what we're going to do is set up the these style sheets to in queue through our functions PHP and then this function will run them okay so let's go into our functions dot PHP make it a PHP file of course and I'm just going to paste in those scripts just so we can see what we need to do so what we want to do firstly in our functions dot PHP file is we want to create a function for in queuing the the star sheets so what we'll do is we'll do function load style sheets so that's just the name of our function within the function we want to do WP register style and then we want to give it a name so this first one we're doing is font so we'll just call it font and then we want to direct it to where this is located in our template so we need to use some PHP here so that WordPress knows the dynamic theme link and then to that folder so we'll do get template directory URI and that basically grabs the template link and then we'll do dot open inverted commas and then we'll just grab this paste it into there then what we want to do it will ask us that there are a couple of other options in this function and I think this one is to do with if you have any other scripts that require are required or depend on this particular script we'll just do an empty array and then we'll do the version which we'll just call one and then this will be all which means that you know with some scripts they can be for print only and stuff like that this script is just going to be for all okay and then we'll do WP in cube script in cue style my bad and then we'll just by its name font so you're basically creating it registering it and then in queueing that and it's all done by this name okay so we've done this one we can just delete that one now let's go copy that paste it underneath and we'll do this one so bootstrap so let's just call this one bootstrap and we will change the URL to the bootstrap one okay so I will delete that one now and let's also include the Swiper CSS so we'll just change this to Swiper you can call it whatever you want but I'm just gonna call it what the name of the CSS is delete that and then we'll just copy another one and pretty much do the same with all of them so paste that into there we will call it I on icons and then the last one will be styles dot CSS will just call styles and there is one more thing you might want to do and that is add another another style sheet which is for your own overriding style so we'll just create another one called custom and inside there we will just put in main star the main father and we'll just call the customs or css so you can base it so anything you type into this custom style sheet will actually override all the other styles on the theme the last thing we want to do after we've created this function is actually make it an action so we're pressing those two users so we'll do add action WP in queue I believe it's scripts or yet it's scripts and then we'll do load style sheets so that's the name of it done okay so we've in queued the style sheets for this particular template so if we save it and we go into our actual project so let's where's our project here we go refresh it there we go okay great so it's still not looking a hundred percent but what you can see is that the pictures have started coming up and the Styles are looking a bit better now obviously the javascript is not include yet so you'll also notice that the WP or the WordPress admin bar which is at the top isn't displaying and that's because we haven't done the second part to this so let's go back to how our theme will go to our footer now and we're going to add in we're going to put these scripts into our function store PHP and in queue them but we need to replace them with WP foot up and that is going to then call exactly the same way that it did with the style sheets but with the scripts so we'll go back to functions dot PHP and what we'll do is we will go down make a bit of space here and we're gonna load scripts now it's pretty much works exactly the same way function ad I'm just gonna call it J s IJ s you can call it whatever you want and inside they're going to do WP register script which is a bit different we did register style for this one we're going to do register script and I'm just gonna paste what we're gonna do so this is gonna be jQuery okay so with jQuery you can actually do it a different way it's probably better not to do it by including it this way and I'll show you how to do that now actually coming to think about it it should be okay we'll try it how it is but if it doesn't work we'll do it a different way so what we can do is we can just do exactly the same thing we'll just call this jQuery make sure you put jQuery that as a the top script otherwise anything that depends on it won't work then you just do get template directory URI again and then dot Vertica Murs and then you can just put in the link to jQuery and then you pretty much do the same thing as the other one I'm just going to do one one one and actually just to clarify why I'm doing that I'm gonna go on to the WordPress site and we're going to look at the register script function with WordPress and explain to you what it all does so handle is the name of the actual script and then we have source which is the Lincoln and we have dependencies which is the same as the other one version is the same thing which I've just put as one and then the last one is in footer so in footer means that it's actually going to display it's within the footer okay pretty self-explanatory I've just lost the project here sorry about that where is it okay so yes so if you want to know understand what all of these little little things are just I'll just change this to array actually you can you can just look it up on the WordPress site but if you follow this it will definitely work okay so now that we've we've done that we need to do exactly the same thing we'll just do WP in queue script and then we'll just call it jQuery and then we want to do this exactly same thing with everything else you know bootstrap and then we have Swiper jeaious so we'll just call it Swiper and then the last one is just the basics common scripts now if you wanted to add your own custom JavaScript file as well you can so you could just do the same thing we'll just call it custom and we'll also make it inside the theme custom GS so now that we've done that we'll do a new file we would call it custom jeaious within the theme and also we forgot to do the custom dot CSS as well okay so now that we've include that let's save it and then go back into our theme and see what happens there great okay so the now as you can see that header bar is working because we've included that WP foot up what seems to not be working right now is the images which we can apart from the images that are included within the CSS automatically so this image is actually included in the CSS if we have a look here you'll notice that it's a background in there that's why it's working if we actually go into the inspector we should see in our console if there's errors so basically there's no CSS or HTTP error is the only errors of the image errors so let's go and make these images work so the link to the logo for if we copy the address and paste it in is within an images folder if we go into our theme folder with my theme folder we have an images folder which we pasted over so this should be relatively easy if we go into our header and we look for that image you'll notice that it's just linking two images we need to tell WordPress the dynamic URL of the images folder Saltworks so we'll do PHP login for template directory there we go and now the logo should come up perfectly there we go so we have our logo there what else will be missing we're missing these Pizza images so if we go to our front page you'll notice that we have all the images here that aren't working what we'll do is we just do a find and replace so do replace and we'll do images and then we'll just replace it with like that done okay let's refresh it now great okay so looks like that's all good now if we go into our footer we're gonna do exactly the same thing we're just gonna replace images with that save it refresh fantastic okay so it's all working now which is great so now we have the front page done and this information here is still within the actual template it's not it's not something you can just go into say your home page and editor easily now there's a few problems with the setup of this website that is going to make it quite difficult for us to kind of edit the content in this type of format as you know with WordPress it's just one box and you know we can't identify can't basically unless we're going to paste this code which I'll show you how how we could do it if you really wanted to which definitely isn't the right way to do it and you can't do because it's got dynamic.php in here but you could basically paste this code into there and then edit the code within the editor which is what we don't want to do it kind of sounds like we need some way to create custom fields here so that when we edit them they then change on our front page so if we want to edit this part we could go here and maybe there'll be a box there for just that part and what we'll use for that is a plug-in called advanced custom fields so what we can do is go to our plugins and advanced custom fields is probably the best plug-in available for WordPress in my opinion maybe that in gravity forms up to the top plugins but advanced custom fields is free well there's a free component but you can also get the pro version which provides you with a bit more functionality I'm going to use the free one and then if we need the pro I'll install the pro because I have it and you'll see what the pro can do as well so just look it up advanced custom fields and we'll just download advanced custom fields and install it and once that's installed we should be able to add in these fields okay great so let's activate it I'm sorry about the slowness of this and then you'll see custom fields on the left hand side if you click into custom fields and you go into add new let's go back to our theme and what we'll just do is create a custom field that is just for the front page so we'll call it front page and in so actually it's not a custom field it's a like a custom field category I guess now that we have front page created we'll go to add field and let's see what we need to edit so we want to edit the hero image we want to be able to edit all this text here we also want to be able to edit this title and this information here and then we want to edit bestsellers and all that sort of stuff we want to our menu and then we want to edit the footer as well so that the footer can be done differently which is fine so let's just see what we can do here firstly we'll create a group for the hero image so let's go group and we'll call it hero and inside the group you should be able to create extra fields so the first thing will be I'll just call that there I'll just make it I'll call it the small title as you can see when you create it and then you click here it automatically creates the field ID which is cool and that's going to be a text okay so it's just text we need to type in there and then we're going to create another one called main title oops main title and that's text as well and then see today's menu is a link and it's also text so what we want to do is create one called link text and then another one as you can see that's text as well and then we want to create a link and we'll actually call or change that to a link and make sure that it only uses the link URL so when we use the PHP to grab the it will just give us the URL which we can link to that okay great so we've got that and then we want to attribute it to the actual front page so we can go to page type and then front page now we'll publish that and we'll go into pages and we'll go into our home page and you'll notice now that we have our hero image now I'm gonna type this let's change the title to my first website main title will be welcome to my restaurant the link text will be click here now and the link it will link to another page which doesn't exist on my website yet so don't worry about that right now we'll just update the page and voila you should see that oh okay no it has changed why all right cool all right so we've done one part of it which is the actual back end part which we add the content into the database now in the template we need that custom field to display so let's go back into our theme into our front page I'll get out of the other things now let's let's call the hero group for the yet the hero group so let's do PHP actually what we can do to make life easier when you're using advanced custom fields you can actually look up all of the things they've got really good documentation so with groups how it works is you'll just grab the the name of the group and then you can use it kind of like an array okay so let's call the group so PHP let's call it hero equals get field and the name of our field if we go into our custom fields from page it's actually called hero so get field so now that we have the data we can grab we can do PHP echo hero and if we look inside hero we have these fields so that's small title okay cool so let's go into our theme now and see what happens great okay so my first website is now there we can obviously go into pages home and change this to whatever we want so just update that and then refresh it and there you go it's changed automatically which is great okay I'll change it back now now pretty much you have to do exactly the same thing with the other things so just grab that and we called it we called it main title so we'll do main title refresh it there you go welcome to my restaurant and then see today's menu we'll be let's just see what that is link link text cool so we'll just grab that put that there link text refresh it click in out ok we click on it's not working ok because the link hasn't been set up but then again we don't even have a link but if we want to use this link here we need to basically do something like this we'll do an if statement I'm just going to make this a bit bigger so we can figure out what's going on here ok we need to do an if statement so that it won't actually show that button unless the link is there so firstly if we do have a link we'll do PHP if hero link and then PHP and if and exactly the same thing on actually no we'll do it on the h5 here ok so it won't actually display if there's no link and also we want to do PHP within here PHP echo hero link so if the link exists then show the link and then when you click on it it will go to that link URL so I'll refresh it now the button should be gone that whole button should be gone there we go ok but if we then go into our home page and then we add a link which we can't so I'm just gonna go and create a test page let's call it test page actually we'll call it about us because we're gonna do the about Us page after this one go back into all pages go back to home and then go to link and you'll see about us there we'll just click add about us update it go back to our theme refresh it the link will work now and if we click on it it will actually take us to the about Us page which is blank of course okay so we've done that first part and then we have the second part here and pretty much it works exactly the same way but with WordPress as you probably know you can't really do a two column layout so what I would suggest is creating a group which you can call column one and column two which I will just do now we may as well do it because so it is the front page so we're just going to create another group on the front page and we're just going to call it main information we'll create another group and we'll create a text area actually we'll call it a YC week editor and we'll call it left side and we'll also duplicate that and we'll make one for the right side okay and we'll also we'll just update that now if we go back to our home page we should see left side and right side they don't look too good that way we might want actually put them side-by-side so go back to there and if we want to change the width of this wrapper to 50% and the width of the right side wrapper to 50% and update it we'll go back to home now we should see left side and right so now fantastic okay we'll go and get some basic long in some text I know a lot of people don't like it but it's just so much easier to fill up content so let's just grab that and we're gonna paste it onto the left side and we'll paste it into the right side as well now you don't need to do a YC week editor you can also use just the standard text which means that you can't paste any styles into there okay so once we update that and we look at the page ah it's still not really working it's still got the old stuff there and that's again the reason why that is is because we don't have we actually haven't added it in so we can do exactly the same thing by doing PHP we'll just call info equals and what's the name of our group now let's just have a look the name of our group is main information get field main information and then we need to do here inside here we'll do PHP echo info left side and then exactly the same thing with the other one but on the right side so let's go and refresh it now great okay one thing you'll notice if we look in the actual text is that for some reason this has brought over another paragraph and that's because I've pasted it in from another website if we actually go into the text version of here you'll notice that it's pasted over all these Styles just be sure that when you paste in stuff from other websites you paste it in through the text editor so that it doesn't actually bring in all the styles and all that stuff with it because you don't want to be putting other styles into your website can ruin your design okay so there we go and if we refresh this you'll also notice that again that there is actually a paragraph within the paragraph so what we want to do is we want actually remove the paragraphs from here because the what-you-see-is-what-you-get editor with advanced STEM fields automatically inputs those P tags around around their content okay so there we go we have the information they're both left side and right side if we refresh the homepage and we just you know add whatever we want and just hit update exactly the same thing left side right side and it looks like it's all responsive which is great so that's how you do that okay going further down the page we have bestsellers now you can do this in a couple of different ways you could obviously create a custom post type which will explain which will basically pull the data from the custom post type and you can kind of have like your menu set up that way or you can use advanced custom fields repeater field to just basically add the information as you want on the front page so what we'll do is we'll use the advanced custom fields repeater field to do that let's go back into custom fields and let's then add a new note it's gonna be in the same group because it's on the front page do add field and we'll look it doesn't have the repeater field no and that's the problem so advanced custom fields is a fantastic plugin as you can see but it the the free version doesn't have something called the repeater field now it would be better to use advanced custom fields Pro so I am just going to go into my plugins and I'm gonna install advanced custom fields Pro and that will give us that functionality you can purchase or get advanced custom fields somehow online from other web sites if you'd like and it's Doolin into here and it will be much better for you so I'm just in installing advanced custom fields Pro and I believe I can install it with the free plugin and then just deep remove the free plugin okay good so yep we'll just deactivate that now delete it okay great so what we want to do now inside the custom fields plugin is going to our front page one again and do add field and we want to choose repeater and we're going to call this best sellers because that's what it is on the front page here obviously you can use advanced custom fields to change these titles as well and I would just definitely do the way I did by creating a custom field within the group and just adding it in and changing it same thing here I'm not going to spend too much time doing all these titles okay so with the repeater what are the some of the things that are standard we have a picture then we have a title price and a order now okay so we'll do we'll call it image and we'll give it a field type of image and then we'll do titled and that's just going to be a standard text and then there is also a price which I believe will just pretty much be the same thing so I'll just be text as well and then we'll have link we'll just call it link again and we'll actually give it the field type of link just got to find it here link okay I can't find a link for some reason it's called page link now and then we'll also do well the link text we don't really need to do because it's all going to just be order now that's done so we'll update that now we'll go to our pages and we'll go to our home page and you'll notice here that we've had a bit of a problem here we're two advanced custom fields Pro there seems to be some sort of issue here and and I think that might be due to the plug-in not being the latest version so I'm just going to quickly update that and that should fix the problem okay I've just updated advanced custom fields Pro and it's fixed that issue if we go further down now we should see something called their sellers but I've actually made a mistake here so we're gonna go back to custom fields again go back into our front page and for some reason I didn't actually do it the right way so let's delete that will delete that as well and yeah we're gonna pretty much delete that and delete that and we want to go into our bestsellers and because it's a repeater field we want to do it within the repeater field so we'll do image again we'll give it the field type of image will do title which we give a field type of text will do price which is a film type of text as well and we'll do page link for its link again okay so the latest version has changed the back there was a problem with that version of the pro that I was using make sure that it's a link URL and then we'll update that so once you've done that now we have the bestsellers user interface set up you should see underneath here it says add row' there you can actually go into the bestsellers thing and make it say add best-seller if you want to refresh it and there we go add bestseller okay so the first bestseller we want to add let's just grab this image put it on the desktop and we'll use that image and where is that image there we go okay we're gonna upload that image and then we're going to call it margarita pizza and we'll give it a price of $20 and then you know we can link it to whatever page we want I'll just link it to the about Us page and then I'll update that and as you already know because we haven't made the template pull that data it's not going to come up okay so with the repeater field what's basically going to happen is all of these these things are going to go and we're just going to one of them and it's going to repeat so go into your browser go to a ACF repeater and it should provide you with some code that you can use rather than typing it out from scratch I would recommend using the advanced loop and we will just grab that and we will paste it into this template okay we're gonna change a lot of it but this is the thing that repeats this is one block this is basically one pizza with the price and the name in the template right now so we want to grab that and we want to then I'm gonna delete pretty much quite a lot of things here we'll just delete all this I will delete that will delete that will delete that okay cool so this is the within here is the actual I'm gonna delete this as well sorry this is the loop so if you have a repeater it's going to loop over and it's gonna show you all of the items you've added into that field or into that repeater so I'll paste that in which means that we can delete all of this stuff I'm also going to put the end row into here and I'm gonna put the start row into here so basically what that means is that if there are no bestsellers then this area actually won't come up at all if there are bestsellers then it will actually to do that we need to grab this whole section and put it within that if statement and we also need to grab the bottom of the section and put it underneath here there we go so if there are no bestsellers nothing is going to come up now we need to get the the row name which I believe is bestsellers so best underscore sellers and you can obviously change it within the template to whatever you want you know the best pizzas or whatever if we refresh it you should see now that we have the best pizzas we have one Peter there but that's not the data we've actually entered in that's something different because we haven't actually put the variables of the repeater field into that specific thing so what we need to do underneath the row we need to create our variables the first thing is going to be image so get sub field image because this is a repeater it's a sub field and then the title would be get sub field title and we'll just copy that and do price and then the last one will be link so we'll replace pizza margherita with PHP echo title and we will replace the price with echo price and you can change it you know change order now button to whatever you want so check it out for example okay and then we'll refresh it and there we go so we have margherita pizza which is what I called it we change the link to check it out and also because we have a link there we need to do an if statement around this we'll do PHP if link PHP and if okay and we will do PHP echo link so there we go it goes to the about Us page which we enter to the 20 has a doesn't have a dollar sign in front of it so we'll just put a dollar sign there and you'll notice that this particular Pizza has a little ribbon here that says offer we might want to change that or make it available so that on some pieces we can put that and some others we can't so to do that we just want to go to our custom fields page and we'll go into bestsellers and inside this repeater we'll create a new field and we'll call it a arm true or false field and we'll call it just offer okay and basically if it is an offer it will be true and if it isn't it will be false and therefore we won't show the picture or that off the ribbon so we'll we won't make this an offer but we'll create another one and we'll use the same image and we'll call it test pizza for $30 we'll make a go to the about actually we won't give it a link and we'll make it an offer okay and we'll update that let's refresh it now and one thing I actually haven't done is change the image to make a dynamic which we'll show you shortly but with this ribbon what we can do is we'll bring in that field which is called offer get sub field offer and we'll do PHP if offer PHP and do and you can obviously change this to whatever you want we can make it you know sale and then refresh it and there you go so that has a sale and that doesn't but if we go into the best sellers and we make that an offer and make that not an offer and update it same thing okay so that that works and it you also notice there's no button there because it doesn't doesn't have a link associated with it the last thing with this one is the image now the image if we just say go here and do you know PHP echo image it's not going to work because if we actually look at the source code image is kind of it's not it's not just a link or URL to that image it's it's more of a like an object or an array with data so if we go back to ACF we do a CF image it will be image URL and then refresh it now and there we go but you'll notice the image looks a bit strange it doesn't look like how the image was before because the image that we uploaded was automatically resized to the size of 200 by 200 which is WordPress's I guess default image settings we want to actually make our own image sizes when we upload images onto WordPress and to do that you can easily do it using your functions.php file and let's just go down here and we'll go custom image sizes and we'll do our add image size we'll just call it product image large and we'll make that eight 700 by 700 and we won't hard crop it if you want to hide crop it you can do true and it will just automatically hard crop it to that size and then you can do product image small and maybe make it 400 by 400 and we won't hard crop that either so what you can do now is you have that product the the image name and you can do image sizes and then a name okay refresh it now and it's still not working or it kind of did work but it's not doing it the right way because it's it's it's still it's not pulling that image size so if we go into our plugins we need to regenerate the images so WordPress has a plug-in which can allow us to regenerate the images and what that's going to do is just basically process the images again and then recreate them at those sizes that were requested so force I think is force images force regenerate that's the plug-in that I'm looking for anyway there we go force regenerate thumbnails okay so once you do that any existing images in the media gallery will start being resized to the sizes that you've just created any new images you upload won't be affected but if we will just do force regenerate cool and that's force regenerated the images and as you can see they're back to how they were before but I've just done a hard refresh which is control refresh and then they've come out like that again but the images that I have actually uploaded are quite small and they're 200 wide by 200 high and if we look at functions you'll see that there that the small one is 400 by 400 WordPress cannot resize an image that you upload that is smaller than the sizes you have set so that's why the image is still coming up is 200 by 200 what we want to do to test this and see if it works properly is we'll go and get a picture of a pizza a really large picture of a pizza or 600 by 600 actually we'll try and get something even larger we'll just do large and hopefully it's a yep it's a PNG file so that's reasonably large and we will then replace that with this one now the image is a thousand by nine eight nine but the website is automatically going to resize it and then display the image at the 400 by 400 size okay so if we refresh it you should see that it's 400 by 396 sorry because the image itself isn't for hannah square it can't resize it if you set the settings in functions is our page picture true that will hard copper to 400 by 400 but it may cut off some of the pizza so as you can see that's kind of how it's working right now I'm not sure why it's doing that it's a bit weird but yeah with the repeat field you can you know drag the order of the pizzas so we can move it and that Pizza the sort order of the pizzas will change so that's how the repeater field works and if you look at see today's menu that's exactly the same thing you might want to just add that as a custom field or you can just remove it altogether now if we go further down on this website we have quite a few other things here which for some reason this this menu isn't working which is kind of doing my head in so let's see why that is not working there must be some sort of jQuery error or javascript error no it doesn't seem like there's any error there if you give me a minute I'll work it out and I'll get back to you okay so I figured out the issue there I said I'm looking at an old version of this site the issue has to do with JavaScript not working so actually I ended up reverting back to an old version of the site okay one second guys I'm so sorry about this okay we're looking at the theme that's why okay cool all right JavaScript we missed one thing on our JavaScript so when we include it we didn't actually run the function and I always make this mistake so as you can see we have this we want to make it as well we want to do in queue scripts and we do add Jas and if we refresh it now it still doesn't seem to be working so let's see why says dollar sign is not a function and that is a java jquery error it's basically saying jquery is not working jquery isn't working because if we go back in here you'll notice that we called this jQuery and because jQuery that looks kind of like a reserved name I think WordPress does ship with jQuery in it sometimes what we want to do on top of that is to WPD register script and if we refresh it it should then load jQuery so now we have everything working how we wanted to all right so now that we've done this part we want to go down to our menu and I'm going to show you how to do this after that I'm going to show you how to make the menu work with WordPress and then we'll set up another page and then that will be it this has been quite a long tutorial already okay so let's create the repeater we're going to use another repeater for this field here so go into here go to custom fields go to front-page and what what is what is this exactly it's it's just the menu so we'll just call you and it's going to be another repeater field and within the repeater field we're actually going to have a category note so we're gonna have another repeater field within our repeater field if that makes sense so as you can see each the menu has multiple categories so we want to do a repeater field called category and that's already within the hour menu repeater field so then we can add multiple categories and within each category we can add a image for the food item make sure you make the field type as an image and then we can do title and description so title and that's the it's text field type and then description and what we'll do here is we'll do text area so the it's not actually styled okay so now that will update that and we'll go back into there and we'll just change something we'll do we'll make this as add category and then within this repeater we will do add menu item great okay so now we've set up the UI for that go back into our home page and we'll see our menu at the bottom here we'll add a category and we'll call category actually we missed something and I'm sorry for making so many mistakes too you guys will go to front page again with advanced custom fields go into our menu and we want within this repeater we want to actually put a title so that's the category name actually in my bad it's not there inside category we want to put okay what have I done here I've done something wrong and I can't figure it out yet no that's that's completely fine that's completely fine what we want to do here is category name and update it it gets starts getting confusing when you got repeaters within repeaters okay so we have add category and then you have category name and then you have the category menu items okay so let's just do one called pizzas and we'll also do one called sides and look this isn't sometimes it's not the ideal way to do things you might want to create custom post types I'll do that in a different tutorial but this one will be using a CF for that so then we'll add you know cheese pizza and we'll just use some some basic text will also do BBQ meat lovers and do some text there with sides will do salad add the content there and then we'll do like garlic bread and paste that there okay so we have two categories and within each category we have two menu items so again let's go to a CF repeater on google go to the a CF site copy that loop and let's give it a go so the first thing we want to do is go down to where this menu is you'll notice because this is kind of a like a toggle menu we need to firstly change that and then we need to it's kind of like two we're going to call the repeater twice okay so this is the top part where you click on the actual links so I'm going to create a repeater and we're just gonna go into custom fields and find out what the names are to all of that so it's called our menu the repeater is called our menu I'm gonna get rid of all this garbage here so it's clean and within our menu we want to get the sub field which is the category name and the category okay so category name equals get sub field category name and then the category or the menu items will be get sub field category okay so if we say PHP echo category name and just refresh it and have a look at our house theme we should see the two categories we created Pizza insights okay so now what we want to do is want to grab that put it with within here then get the outer surrounding divs and ul and put it within there so it's not within the loop and then we want to obviously only have one of these allies so or list items so we will do PHP echo category name and as you can see the active one it's called active so just give it a class of active and you'll notice each one has its own data select which is kind of like a the unique identifier for that particular category which we're going to have to somehow use PHP to convert that into like a like a slug so with WordPress there's a function called sanitized title we can do PHP echo sanitized title category name and there we go done okay so let's save that refresh it pizzas insides great okay but they seem to be both active or one of them's active but if you actually look at the not sure what happened there sorry about that I can't stand it when that happens one of them seen both of them seem to be active if we actually go into the content you'll notice here that they both have oh okay no they don't JavaScript exchanged that which is great okay so now that we have our top level we then need to get our bottom level okay which is the actual where or the menus are so let's grab this and basically repeat it again we'll just more copy it will delete everything out of it and this is gonna be a repeater of the menu items so let's go into here and grab the row paste it there and put the ends row here and we will grab this information here and paste it there so that's that basically represents one single menu item and then we can just delete everything else actually looking at it it's got food menu and then it's got the name pizza so that is going to be the unit Niq identifier okay so let's just delete the road good okay so if we go back and refresh this on looking at an old version again sorry about that still doesn't work nothing's come up there okay so now that we're repeating our menu category names let's just do a sanitized title and change Pizza to that and now within with inside our food menu we need to do another repeater because this is actually an individual item within the menu so let's grab this and do have rows and then we want to do a repeat that within a repeater I'll just grab all of this that's that's the actual for each loop and then we want to do ENDIF and we want to do I want to grab that as well put that there so yes essentially sorry if I'm confusing you but essentially we have a repeater within a repeater and now within each category or each repeated category the field is called category okay so let's just save that if we refresh the screen now we should notice that item should come up on the actual yeah there we go good okay so now when we click on pizza and sides both two items come up so we need to now identify the different items within each one so within this repeater field we want to change it so that it has the if we go back to our field we'll go and refresh it to our menu it will be image title description okay so let's change this to title equals get sub field title description equals get sub field description I think I missed out on price there which will add in PHP echo title and in PHP echo description let's refresh it and have a look okay we've got the name of got the descriptions there we go as you can see now the prices so let's add price there which is a text field we'll do a price equals get sub field price just add the price in there after the dollar sign and then the image obviously so how we did the image before on the previous setup was that we just did image sizes all that sort of stuff you can kind of do the same thing just copy it and change it you can obviously change menu image alt tag to a PHP echo title for SEO purposes and then what we'll do is we'll refresh it and you'll notice that no images will come up because we haven't set actually we ok so what's actually happened here is that that image from the top has come up which is really really strange the price doesn't come up either sometimes these things can conflict with each other so what you can do at the end here is do WP reset query and that sometimes can fix issues that you have with okay so it seems to still be the same thing with image and the reason is because we haven't set up image as another variable we're only using the one from up there so let's change image to be equals get sub field image and now what will happen is if we refresh it the image won't come up so let's do an if statement to say that you know if there's no image then don't show an image so PHP if there no image PFP PHP if image and then PHP and if sorry for my code is a bit messy guys I hope I haven't confused you too much will refresh it now and we should see that the images won't come up but you'll notice that there's still that indentation which you might not like so you can always make the if to be there after the div refresh it again and maybe the indentation should go hopefully it doesn't seem to be going so it looks like it's more about more of a stylesheet thing that you need to do to fix that the price isn't there because obviously the price hasn't been set so I'm just going to refresh this go down and put you know twenty five twenty ten five whatever and we'll add some it will use the same image for each one I'll change it to that one and just update it refresh it there you go so now we have the prices with the names and the descriptions and obviously if you can make it that if there's no price then it just says $0 or something like that I'll leave that to you okay so that's how you do that menu part that was a bit complicated but hopefully that you got through that the last couple of things I'm going to show you is how to make this menu work so right now that menu is just let's go into the header you'll see that the menu just looks like that we want this to work with the WordPress menu so if we go into WordPress and we go to appearance there should be something here that says menus and there isn't and we need to give tell WordPress to support menus so the first thing we need to do is go into our our functions or PHP to add theme support menus and save it refresh it we should see appearance and then menus there now let's create a new menu we'll call it top menu okay great and then we have home and about us let's just paste it into there and save it like that now we also need to create a menu location so a menu location is basically you can set the location where you want this menu to be you can have it in multiple locations and then you basically put the location PHP code inside the theme wherever you want that specific location so to do that we need to go into our functions dot php' again as you can see functions is used a lot we will do register nav menus and within there we will do another array and then we'll do top menu underscore underscore open brackets top menu that's the name whatever you want to call it you can call it whatever you want and then we'll just put theme there and also we just close this off so register menus and menus support okay so let's refresh it now you should see now the top menu location comes up and we'll just save that okay so now that we have a menu we can just call that main menu who doesn't have to be called top menu so now that we want we want to grab this top menu location and put it into our theme somehow so to do that we want to go to our header and where this menu is located here we want to change this and pull PHP WP nav menu within there we want to do an array and within that array we want to do theme location and we'll link it to the slug of the menu location so as you can see it's called top menu ok top menu and then we want to just close that off and if we go to our theme we should see there's two menu items there about us on home right now we just want that to be within we want it to replace these ones as you can see that this particular menu has a few things here that we need for it to work so within the menu we want to do menu class and we want to do main menu so copy these things here okay I'm just going to comment them for that out that menu will refresh it now it still didn't actually do what we wanted to do so let's see why it's not doing that because it's actually given the class to the Container surrounding the two that it's actually giving it to the container surrounding the menu as opposed to the UL so I believe we need to change it to something that is a bit different go back to our header will do I think it might be container class I might have to look this up we'll just refresh and see what it does no it's not doing that so why isn't it doing that okay I'm just gonna do a bit of research and I'll get back to you in a second okay I have managed to figure it out so we'll delete this menu class and what we'll do is menu and we'll give it the idea of main menu as you can see that's the ID there and then underneath that will do container and we're going to tell the container to actually be the UL which is an unordered list and then underneath that we're going to give it these classes so we'll do menu class is that and that should be it's all just delete that and we'll refresh it and there you go great the only thing that is different is that the content is they're not they're not caps so if you want them to be capitalized you need to capitalize the titles on your pages or on your menu items anyway so you could do this you could make that home and you can make that about us okay so there we go we have the the actual menu now working which is good and it's all by the looks of it it's are going to be mobile friendly or let's have a look just going to open up this in a new browser window okay the menu doesn't seem to be actually working which is a bit strange if we go back to our to the actual theme itself let's see if it actually works okay that does work so what are we doing wrong here let's have a look or what am I doing wrong here okay if we actually look at the the menu the unordered list is called menu main menu I think we need to make sure that it's called main menu we don't want it to be called menu main menu so let's see what we can do to change done simple thing we need to do is menu ID instead of menu and I believe that should fix the problem there so let's try that out now we'll go back to our theme and we'll see if it works beautiful okay so we'll just open it up in fantastic okay good all right so so far I've shown you how to use advanced custom fields to edit the content I've also shown you how to add the menu the footer is pretty standard so you could do that with the knowledge you've already gained so just the last thing I'm going to show you is the about Us page or any page any sub page if we go into the actual project and we go to page dot PHP that is actually the template for that so let's go into this theme and we're just going to go to the about Us page we'll open it up in our editor we have the header we have the footer we have all that stuff how does this page actually look best in town cool so what we're gonna do is we'll just grab this all the way to the foot up oops all the way to the footer and then paste it into our page make sure that you've also with all of your pages all your page templates you you put the header and the footer at the top or the PHP code and let's now go to our about Us page what I'm going to do is just change the the the page so that it's the home is first okay okay for some reason it's not doing that so it's actually really strange right there so let's figure out why that's happening okay and the reason why that's happening is because as you know when I created this location let me just go get the project again we call it top underscore menu it should be top - menu to reflect that name there okay so if we refresh it now it should show home and then about afterwards beautiful go to about us and then it automatically has all that stuff that we had there before that we paste it in there so all we need to do obviously is go into the page and refined and replace on all the images so that they so I've already got a preset from before replace all refresh it there we go so that is pretty much it the only last thing I'm going to show you is the featured image so at the top here this image here may very well be an image that is let's have a look here and see okay so it's something that's included in the actual stylesheet but you might want to use this kind of area here and you might want to depending on which page you're using the header to be different or the image to be different I'll show you how to do that shortly but one thing I noticed that we use page dot php' for this about Us page which means that every other page we create is going to be exactly the same thing so if I create you know contact us and go into appearance and then we go into menus and we add in contact and refresher oops we're in the same template we'll go to contact you'll see that's exactly the same thing we don't want that obviously we want each template to be different so to do that what we need to do is now grab all the data out of that page dot PHP that we pasted it in there and we want to create a custom page template which will be called template - about dot PHP you can call it whatever you want and then at the top you want to do forward slash or asterisks I think it's full slash asterisk sorry I do PHP fault slash asterisk template name and we'll call it about and then asterisk and forward slash and close it and then you obviously want to put the you know the get header and then at the bottom you want to put get footer and then you want to paste that within there now when we go into our about Us page we can tell that page to use that template but you'll notice that there's no template coming up which is very strange on the right hand side you can't actually see the option to use that template that we've just created and that is firstly because I should put the template name at the top there and then you'll notice that I've actually put it in the wrong area so I've haven't put it in my actual theme folder we need to paste it into our theme folder we'll call it template about PHP guys I'm really sorry about all the mistakes but it's good for me to make mistakes so that you can see the common errors okay if we refresh it now we should see template name or template option and then you should see the about there and then if we refresh the page contact is blank because we actually deleted all of the information out of the contact page or out of the page template but if you go to about us you'll see that it's there then what we want to do is go into our about Us page and then change a couple of things like this one about our pizzeria that's actually the title of the page so it appear to be the title which will grab the title page change this to whatever you want or use advanced custom fields to to change all of this information in him the last thing you want to I want to show you is featured images now featured images each page can have a featured image and then instead of you including the image for each page in the style sheet you can include it in the featured image and it will just call it dynamically so if we go into edit this page on the right hand side you should see something that says featured images but you can't so what you need to do firstly is you need to allow the theme to allow you to do featured images so go into functions or PHP and then you could add something that says add theme support and then do post thumbnails I'll actually put that underneath there and we'll just do theme support okay and refresh the page now and we should see that we have a featured image available on the right-hand side then what we could do is we could just go and put in any image we want so let's just go look for a large pizza image we'll grab that one save it it's making me hungry now save it onto the desktop and then we will just drag it in will attach that featured image to the actual post go back to the page nothing's there yet because we need to now tell WordPress to put that image in there and in this particular theme the actual image here in the background is set in the style sheet of this thing here so of this section so we need to do some style overrides so to do that we'll just create a new style here and then we will do background:url and close it and then do important as well and then within here we want to do a PHP function PHP the post thumbnail URL okay will refresh that there you go so now we have the post thumbnail in the background instead of the other image so kind of overrides our you'll notice that it's not covered it's it's kind of repeating there so need to do a couple of other styles one which says background size cover important and then refresh it again and then it should cover the whole thing another thing is that your featured image might be absolutely massive so you might not want it to be if you upload a 3 megabyte image you don't want it to be 3 megabytes so as I showed you before if you're go and create a new image size and we'll just call it hero image and we'll cook will do it 1200 by 600 or something like that and we'll do true so we'll crop it we'll go back into our template and we'll do hero so it's going to use that hero size and then let's just go to our fourth regenerate thumbnails and regenerate all of our images and we'll do about us now and you should see the image will look a bit slightly blurry err but it still is it's cropped to the size that we wanted it to so if we go here you'll notice that it's 1200 by 600 1200 by 600 now which will increase the size of the speed size of your website for some reason these images aren't loading so let's just go back to our about page again and just see why they're not loading for some reason it reverted back to what it was before so we'll just replace all again and refresh there you go cool okay so that brings us to the end of this tutorial it's a one and a half hour tutorial my longest ever done obviously there's tons of other stuff you can do but hopefully this has given you an idea of how you can do it yourself and what I've taught you will maybe help you get all the other stuff done if you have any questions please write them below and yeah good luck with everything thank you

Channel: Mr Digital

Views: 269,365

Keywords: html to wordpress, convert html to wordpress, wordpress theme development, wordpress theme, wordpress, how to convert html to wordpress, html, html to wordpress theme, how to convert html to wordpress for beginners, html to wordpress theme development tutorial, wordpress themes, convert html template into wordpress, build wordpress theme, convert html to wordpress theme, how to make a wordpress theme

Id: FN5jhyspVXc

Length: 91min 3sec (5463 seconds)

Published: Thu Mar 07 2019