ChatGPT: Convert Static HTML to WordPress (THIS IS INSANE)

what's up guys we're back at it again with another chat GPT and WordPress video in this one we're gonna build out this front page template that you're looking at right here this is something that I already had all done in static HTML and CSS and I used chat gbt to convert it into a WordPress template and I have to say I don't even know how it does what it does this kind of blew me away I wasn't expecting the results that I got to be as good as they were and for this to be as easy as it was to build out I can't even believe how much it could speed some things up so let's take a quick look at what we're going to be building here before we really get into the code so this is a pretty basic home page on the left we have a logo on the right we have a menu right here we have a featured post on the right we have some new posts and then across the bottom we have three more posts and that's pretty much all there is to it so the first thing I want to do is actually jump back into chat gbt and see if we can have it upgrade the header PHP file I really need it to have the logo and also have the navigation menu right now our header file looks like this it doesn't even have any HTML it just stops with the body tag so let's see what we can have chat GPT do for us here okay so I'm going to give chat GPT a prompt and say can you update the header file you're going to include a logo and navigation menu okay so our response has finished let's see what it gave us it definitely gives us a lot more in our header file I'm going to copy this first and paste it over here and save it and then we can kind of review what it gave us so let's see what it says down here the above example the has custom logo function is used to check up a custom logo has been set in WordPress if it's been set it displays it using the custom logo function and that's something that it actually added for us in the functions file so that should work the wp nav mini function is used to display the navigation menu that we register to functions PHP this is again something it added when I asked it to just upgrade functions file for me and it gives some other information about how we can use that and at the bottom it says we can customize the HTML structure to use the classes that we want and that type of thing but for now I think I'm going to call this starter theme that we've been working on I've done I mean this is pretty solid this is something that I think we can work with so the next step is that we really need to add some content in the back into WordPress if we just keep going with the code there's no way we're ever going to get anything that looks like this because we don't have any posts we don't have any images we don't have the logo so I'm going to jump into the back into WordPress and the first thing I want to do is add a couple plugins that we're going to need and once I do that I'm going to add all the content and but I'm just going to skip through the content edition part but I do have two plugins I want to use the first one is going to be the classic editor plugin which shocker is all the way at the top this disables Gutenberg and I am not a fan of Gutenberg at all I think it's the worst thing that WordPress ever did so I pretty much installed this on every site if possible if you're a Gutenberg fan I'm sorry um you can unsubscribe if you want leave the video I don't know what to tell you but Gutenberg is not for me and this is a safe Gutenberg free zone so we're going to turn that on and the next book that I want to install is Advanced custom Fields I pretty much use this on every WordPress build it really makes it super easy to add any kind of custom Fields you might need and I know we're going to need at least one for that mobile image that we need for the featured image the one I showed you right here when you scale down in Mobile and it changes that's not something that WordPress is going to handle out of the box so we're going to go ahead and activate this plugin okay so I actually ran into an issue when adding the content there's a few SVG images and WordPress out of the box well now let me upload them so I'm going to ask chatgpt to give me a function that will allow SVG uploads in the media library and see if it gives me that okay so chat GPT gave me this code here that should allow SVG images I'm going to paste that into our functions file I just want to make sure everybody saw what I did here so it wasn't just some magic that happened okay so that's all done I added a bunch of content to the back end and match what we needed for this design here so let's take a quick look at what I did I added our seven posts here and I made use of tags that way we can tell which one we want to be featured and which ones we want to be the numbered posts that show up at the bottom and I'm going to go ahead and click on this featured one so I can show you what I did with that mobile image I added an advanced custom Fields image field here and I named it mobile featured image that way we can make use of that in the theme and the way I did that was going into this custom Field section which that advanced custom Fields plugin adds and I clicked add new group and I made this featured image options group and within that I'm in a mobile featured image field that has a label and this field name mobile featured image so now we can jump into the code and what I did here was I made this static assets folder and inside here is all the files from that static website that I've been showing you guys we're going to take some of the stuff and copy and paste it into our theme instead of asking chat gbt some of this stuff's super simple so we're just going to use a couple brain cells here and do some copy pasting so our style CSS file we're going to copy everything in there and paste it into this style CSS file and next I'm going to do the same thing with my JavaScript file and I know they added a function for us in here where it loads a Javascript file okay it's in JS slash theme.js so I need to make that folder real quick in the file and spell it correctly or it's not going to load and here we go we got this file and I'm going to go into our static assets grab the script.js from here copy it and paste it in here let's go refresh actually we didn't do this yet let's refresh our page and see what we have so um we don't have much but we can see that all that content is being output our logos here and our navigations here so there's a lot more than there was before but we have a lot of work to do still so let's jump back into the code and the next thing I want to do is take a look at our index.html file from that static website we need a way to copy basically all this stuff into our theme and I think chat GPT will be able to help us with some of this so I think rather than try to get chat GPT to like do all of this at once let's kind of take it piece by piece so let's start with our header here and compare it to what's in our theme so what I'm going to do is I'm going to copy and paste this code into our header PHP file and we can kind of see the difference here we definitely have very different classes on here compared to what we got from Chachi BT that we're gonna need to update and it did tell us we would have to update that stuff when it gave us the code but I want to see if it can do it for us but I wonder if I can copy this HTML in the chat GPT and ask it to update the theme based on this if it can't then we'll try to do a different way I don't even know if this will work so let's check it out okay so what I did was I asked it if it could update the header PHP file based on the HTML below and I pasted in all that HTML from our static website all right so I got my response and it like this is kind of shocking the result I got here I didn't even know that this would work at all and it really did a good job here it checks to see if there's a custom logo if there is it outputs it and if there's not it outputs a logo based on the HTML that I gave it like looking for it in the folder so that's pretty cool it also updated all these classes and HTML structure based on exactly what I gave it it added our toggle menu it added our wrappers around the navigation and it updated the wp nav menu function so that it has everything that we need here so it doesn't output extra stuff so this is like exactly what we need I am kind of blown away by this so I'm going to copy and paste this into our header and we're going to just get rid of all this other code save this and let's check out the site and see what we got here see what kind of update we have cool so our header looks a lot better it's actually pulling in the CSS correctly now since all the classes are right so this is awesome and like I'm honestly like I said I'm blown away by this I did not expect it to be that good and just kind of do exactly what I needed it to do so this is kind of crazy let's move on to the footer I don't want to mess with the main template part yet I can't even imagine what it's going to give me so let's go to the footer that's going to be simple and then we'll get into like the meat and potatoes of this with the front page template this this is insane okay so here's our footer file it's pretty much empty and we really don't have much in here either but I'm just going to copy this and we're going to put it in chat gbt the same way I did for the header I'm going to ask it hey can you update the footer to match this HTML below and let's see what we get Okay cool so this gave me exactly what I wanted and I didn't expect it not to based on what it did for the header somehow it even knew that this was a challenge if you read the the script here it says it's displaying the attribution of the challenge I think it actually knows what front end i o is so that's kind of crazy as well um let's go ahead and pop this code in here right cool so that's Doug I don't even want to really mess with this index HTML file I want to leave this the way it is okay so let's see if chat gbt can do anything with this whole main content area I I kind of want to paste the whole thing in there because of how good it's been at everything else but I know this is pretty complicated I'm just going to go for it and see what we get so let's just full send and see what happens okay so we got a response and this was not uh not as great as the last one it tried but I really didn't expect much here I mean I gave it a lot and gave it no instruction really I said hey can you make me a front page template based on this HTML and I pasted it in this giant wall of HTML and it gave me a front page template it did it loads the header loads of footer but as far as HTML that it actually put in here goes for the most part it just kind of gave it what I put in and it updated things like images of the bull from the temple directory which is not really what I wanted I would have liked it to pull this obviously from the posts that I created but I didn't tell it to do that I really just wanted to see if it would figure it out on its own and it didn't so what I'm gonna do now is kind of try and do this section by section but give it more instruction and see if I can make it do what I want it to do so before I move forward with trying to get more code out of here I do want to make a front page template just so we have it ready to go so that's all we really got out of this that was useful I think we're going to get a lot more we just need to work with it next step is that I'm going to copy all of this HTML from here and pop it into that front page template just so I have something to look at without messing around in this static file anymore so let me go ahead and do that so let's work on getting this featured image section and actually this is sort of two sections in one but I want to focus on just this inner Arc and I want to actually update what I put in here and see if this will be helpful so what if I say instead of this actual like real page title that's in here let's just say the post title unless that foot uh we'll put the and here we're going to put the post excerpt and see so if we do stuff like this again we need to spell things right here I'm really really struggling with this today I don't know what the deal is and in here we can put we can leave this as read more I think in all these links maybe we'll put post link or something I don't want to put exactly what the function names are because I think that's kind of cheating what if you didn't know so I'm just going to write Coastal link here post link post link and here we can put I'm going to put featured image and I'm going to leave the mobile one alone because that's going to need some separate um error I mean I used Advanced custom fields for that I think we can probably have a chat GPT help us with it but I don't want to do it all at once so let's copy and paste this code into chat GPT and we also know that that host I made the feature post I gave it a tag I tagged it featured so I'm going to give chat GPT all this information that it would need to figure out what to do with this aside from the mobile image and see if it can do it right this time okay so we got a response and this looks way better this looks good I kind of watched it as I was reading it out I do want to give a quick glance at the explanation it gave so the wp query class takes an array of parameters we read the WordPress database for post in this example we're using the tag parameter post with the tag featured which is what I asked it for and it has parameters for post per page order by order parameters to get the most recent post within the loop we use the following Temple tags to split the post data so we're getting the thumbnail URL and it actually updated it and pulled in the large one and the smaller one within that picture element because I didn't tell it that we use an ACF field for that so that's actually pretty cool that's not what we need for our purposes but it recognized that there were two different sizes in there and it even knew which one was a smaller one so this is insane this is good um the only thing that's kind of annoying is when you get a long response it cuts off when you have to type in continue um and then when it spits it back out of its code a lot of times you don't have that wrapper around it so I have this weird stuff at the bottom that's no big deal let's copy and paste all this back in this is crazy I'm like again I'm kind of blown away by this so we're gonna replace all this code here and this shouldn't this should do good this should work and I do need to grab that extra little piece of code that was at the bottom that we kind of missed I think it was down here yeah Okay cool so let's save that and we're going to go back to our website and refresh it to make sure that we didn't get any errors or anything because I've just been copy and pasting stuff in here so I didn't actually assign this template to the page so nothing changed so let's go ahead and do that out I'm going to jump into the back into WordPress and we're going to go to pages click on we don't even have a home page so let's do that real quick I'll add a home page I kind of forgot to do this earlier and we'll publish it we will set the default template to front page update it we need to go to settings and then reading I believe it is and say let's use a static homepage select home page save our changes and let's go back to the front end and we should have set and this is already looking really good this looks really close to our static page I mean it's missing a few things that we haven't added yet but if you compare it I mean you know we're getting there so this is the part that we actually updated the pull in from WordPress and we can see this links to the single post we can click on it and it takes us here now it loads from the index so this all works and it is let's confirmed this is pulling an image from WordPress right yep it's on it from the starter theme so we're looking good here we do have an error here this is because XD bug set up in my local environment it's not really a big deal it's a warning not an error okay so I've disabled those errors we can see they're gone now that was just kind of an annoying thing I needed to get rid of so the next thing I want to do is update this sidebar and I imagine we're going to get very similar results if I go in there and change all this text so it just says like title and excerpt the difference here is that this actually shows three posts not just one so I'm wondering if I can just update the first one and if it'll figure out what to do so I'm gonna try that that would be cool so we don't have to do it three times so I'm gonna go down here and we're gonna change this link to post link we're going to change the title to post title and we're going to change the excerpt to post excerpt and I'm just going to paste this whole section in and see what we get so let's go okay so we have our response and let's kind of give their explanation a little bit of a look again so we use WP query just like the last time and again it resets the post data and at the bottom it says it should be placed within a template file where you want to display the three most recent posts which we already know because we copied that out of our template file so let's go up and see what we got nice it didn't have to split this up so we should be able to copy and paste this right to where it goes and it did exactly what I hoped it did it got rid of those extra two posts and we just have the one inside this Loop so this looks good to me let's roll with it and paste it in here fix up the tabbing a little bit add an auto tabber on here and it drove me nuts so I turned it off and let's go back and refresh our page and see what we have now nothing changed which is a good thing um and yeah we're linking to these posts now so everything with this looks like exactly what we needed again this is like this is crazy this is awesome um definitely could be a Time Saver especially if you're new to Wordpress ridiculous like I can't even believe I can do this let's go ahead down to this numbered section and we're going to do the same kind of thing we did for that sidebar except this time we need to tell it to pull from that number to tag kind of like we did for the featured image so let's go into our code and update this just like we've been doing and I can't imagine we're going to get a better response here let's go so an even shorts I'm just going to write featured image I guess I could probably even feed it a size here if I want this to be a certain size but for now we'll leave it as is and for this I'll put the title post length and host excerpts and again we are having some spelling issues today already and I'm just going to copy I'll copy the whole section in there and let's get our code I mean I can't imagine it's going to be bad this time let's go let's see what we got okay so we have a response let's give it a quick review and one thing I forgot to mention that I did ask it to do specifically was to give us the article number with the leading zero inside that article num span and it looks like it did that for us so let's check it out um pretty much all the same stuff it's been telling us and then at the bottom it says they used a variable I to keep track of the order of the Articles and it displayed them in this organum span exactly like I asked it to do so let's go ahead and copy and paste this code into our theme and we'll give it a quick look and make sure it all works which I can't imagine it won't so let's take a look here and yeah so phone from that number Tag we have our code in here that runs our counter so it should display one two three all right so let's take a look at the front end and we have what we need this matches pretty much exactly to what our static website was the only difference is the footer we'll take a look at that in a minute but I mean this is insane I can't believe this worked so well I bet I could have did this in about five minutes if I wasn't recording and it wouldn't have taken a ton of time to do it manually either but if you were like a little bit unfamiliar with WordPress this could have taken you like an hour or a few hours if you're you know like I said a WordPress maybe and you could probably figure this out with chat GPT in about half hour I would think if you're new so this is insane my mind's kind of blown and uh let me know what you guys think about this in the comments but we're going to take a look at this footer section real quick and make sure that we didn't mess something up there I don't know why that's Goofy and then we'll review the responsive to make sure all that stuff works as well so let's open up our footer file and take a look at it I don't see anything wrong here let's take a look at the index and oh this is why they had Styles in here at the top this is just something that front end i o gives you so I don't care the footer is good in my eyes let's give a quick review on responsive and make sure that all still works I don't know why it wouldn't and as long as that Javascript file loaded okay so we do have maybe an issue here uh this looks a little weird unresponsive I don't see the button I can click it but I don't see it okay so the issue there is the image isn't loading and that's probably a CSS thing I think so let's go ahead and fix that real quick I believe it's just a path because we're loading those images from CSS let's see here svgs I believe they are okay cool yeah so we're pulling from assets images icon menu SVG we need to pull these from WordPress now this is going to be kind of goofy but I'm just going to use the full URL and then back into WordPress this isn't probably the right way to do this but it should work for what we need to do so I'm going to go into our media library because I did upload all these files and I'm just going to copy this URL into the clipboard and update it in here and we'll do the same thing for the close image refresh it and we'll open up our Dev tools so we can go responsive mode okay so that fixed our issue with the icon we see our menu icon we see our close icon our mobile menu works fine we do still have this issue with the mobile image though I kind of forgot about this but this was from that ACF field that we added so let's see if we can have chat gbt update that for us and I first want to scroll to the bottom and make sure everything else looks good and it does so we're going to go ahead and update this image now jump back into our code here for that front page and scroll up to our featured image section okay so we can see we are pulling in our post thumbnail twice here it's pulling in the large size for the desktop I'm going to change the whole because I don't need the crop I uploaded it at the correct size and this is the one we want to change the mobile so let me copy this code in here I'm just going to copy this one line since we know what needs to change and we're going to ask chatgp to update it all right we got a response and it looks like it's correct and it gave us a little explanation so it does know what Advanced custom field is and it understands it so it says this code uses the field function for advanced custom Fields plugin to retrieve the value of the custom Field Mobile featured image and displays it in the SRC attribute of the image and then it gives some more information about where you might want to put it and that type of thing but we already know that so let's copy this code and pop it in here give our website one more review on mobile and there's our mobile image that works scroll it back up and there's our there's our full size so this did a great job in my opinion I can't even believe how well this worked this didn't really take long at all and I was kind of figuring it out along the way knowing what I know now if I wanted to build out a custom template like this I would just from the start right in thing is like post title link instead of putting in content and when I feed it in I could probably just put the entire HTML in there and it would just work and I'm going to be making a lot more content like this because this is just this is insane I'm thinking about maybe doing a plug-in see what it can do with that so stick around subscribe give my video a like if you want to see what I do next with this

Channel: Piler Codes

Views: 3,454

Keywords: chatgpt, wp, wordpress, homepage, home page, frontpage, front page, custom wordpress template, chatgpt wordpress template, chat gpt development, web development, ai web development, html, css, static website to wordpress, static website, custom WordPress theme, custom WordPress template, artificial intelligence, static to wordpress, ChatGPT html to wordpress

Id: V4ZzcscwnyE

Length: 23min 47sec (1427 seconds)

Published: Sun Jan 15 2023