I Didn't Expect This When I Taught ChatGPT How To Make a WordPress Website!

hopefully you're not tired of chat gbt videos this is my only my second one by the way this one's gonna be a big one because I taught chat GPT how to write code for the Gutenberg editor and what that means is at the end of this video you're going to be able to take chat GPT and have it create complete layouts for you and I'm talking about the structure of your Website Layout including the words for it for whatever business you're making a website for if you go back to my video two weeks ago it was about how to have chat gbt write all of the web page content and I got to thinking well why can't it just write the code as well just eliminate that whole step of copying and pasting and having to build the Website Layout yourself and have it do the Website Layout and you just copy and paste the code in and I figured it out now a lot of testing went into figuring this out I'm gonna reveal it all to you right now all that I ask is that you hit the thumbs up button right now and if you're interested in this kind of content click on the Subscribe button let's get started now it's important to understand that artificial intelligence it works off of patterns that's it and we need to feed it the pattern for it to do what we want it to do so first thing we need to do is create that pattern the pattern of especially formatted code for the WordPress block editor so we're going to create a sample layout for chat GPT to go off of now every website is pretty much a series of sections and those sections have columns they'll have headings they'll have paragraph text they'll have buttons and they'll have images in them so that is all I want to teach chat GPT how to create so first we need to create that so that we can teach it to chat T so here I am it's just a blank page on this website I named it training and let's go ahead and and start using some of the core WordPress blocks so we can teach it how to work with them so the first thing I want to do is put the group container in like this and then I want to put inside of the group I want to put in two columns so I'll click on columns I'll choose two and then in the First Column I want to put a heading because I want chat GPT to know what a heading is and I've got to put some text in there there it is this is a heading I'll hit the enter key and I'll put in some paragraph text then I'll hit the enter key and I will put in some buttons and then I put a simple label button text and then in the second column I want to put an image here it is and I'm going to click right here it says insert from URL you could put the direct URL to any image that you want I thought it would be fun to take the Elementor placeholder image right here so I've got the URL I'm going to paste it in hit enter and there it is so this is what I want to teach chat GPT on what to create but how do I get this into chat GPT what we need to do is go into something called the code editor and it's simple to get into just click the three dots on the top right and it says right here code editor will choose that and this displays all of the code that is used to generate that simple layout that we just saw so what we want to do is highlight all of this and we're going to put it into our clipboard now for step two I'm going to show you the prompt that I used with this code to give to chat GPT so it would know exactly what I wanted to create I'll read the prompt you can tweak it all that you want this is what works for me it says right here act as a WordPress Gutenberg code writer and expert copywriter because we're going to have it do both things at the same time you will be creating a website for a mobile dog grooming business named Happy Paws now this part right here you want to describe the business and if it's a business that GPT should be aware of you don't have to go into a lot of detail about the business but you can try for see how your results end up being but chat GPT is going to know what a mobile dog grooming business is that's why I just I just say what the business is and I give the name of the business so it can be used throughout the website copy that it's going to write for us it says I will instruct you to create one section of the website at a time and you will write the code for that that I can copy and paste into the Gutenberg code editor you will also write compelling words for the website so there's this part here where I say you will create one section of the website at a time the reason we need to have chat GPT create one section at a time is because it has a character limit so if you wanted to say give it specific detailed instructions on the entire web page layout it's going to exceed that character limit it's just not going to work it'll stop somewhere in between okay and so then I say output should be formatted like this but inside your code editor so I can copy and paste it even though I ask for it to go in the code editor it doesn't do a good job of doing that and you'll see what I mean in a moment then right here I will paste the code in and then it says all your output must be in your code editor I ask a second time never listens and then I say if you already say ready so let's go ahead and paste in that code that will be used as the training data let's highlight and copy all of this and then we're going to put this into chat GPT I'm going to say it's hard to say chat GPT over and over again all right I'm going to paste it in now if you've used chat GPT you know your mileage may vary at this point it might be overloaded it might say error is like a dozen different things that it might say so I don't know looks like he's ready pretty quick I'm ready what would you like the first section of the website to be about fantastic so I've got this instruction right here create a hero section with a title a tagline a call to action button in one column and an image in the second column so what you're doing is you're describing the layout and what the purpose is of this section and chat is going to take that training we just gave it it's understanding about the business and it's going to give you an output now I have noticed in some of my testing that you might get better results if you remind chat GPT at this point what it is the information about the business the type of business and all of that but let's just go ahead and take this okay I just pasted it in let's hit enter and see what it gives us now I've got to say out of every single time I tested this not once did it give me the output in the block inside of their code editor where I can click this button right here and copy and paste it it did this time so when you're doing this it might not and you'll just have to highlight the code and and copy and paste it so if I go to a prior chat this is what it was looking like you just had to copy and paste it inside of the code editor but but right now it's actually giving it to me so let's see how this works I'm going to click right here where it says copy code now what's nice because it's in the cup the code editor I should be able to copy and paste this right directly into my Website Layout if not I'll have to go and put it inside of the code editor so I've got a new page I created on the site here I named it chat GPT created and let's just try pasting that code directly in because it gave it to us in the code editor and here is what we have now what I've noticed is when I paste it in sometimes there's an issue with a heading and you simply need to click right here where it says attempt to block recovery and there it is so it looks like I've got a great first section if I expand this to go into the list view I have my group I have my columns my two columns and it's all just formatted exactly as I instructed it to so now let's ask chat GPT to create our second section so I'll paste in the instructions and I'm asking this time I say create a section for details about services including section title and subtitle and info plus descriptions on four of our services with one in each column so again I'm describing the purpose of the section and I'm describing the the structure of this section now the the only thing I want to do is I want to remind chat GPT of the business just in case it forgets because it's forgotten for me in the past so I've rephrased it a little bit create a section for details about Happy Paws mobile dog grooming services so hopefully that's a little bit more for it to go off of let's see what we get so far it's looking good I can tell from reading the code we've got a heading called our services underneath it a description about it and then what I can see is then it creates columns for me which is exactly what I wanted the columns have the service description or the service name and then the service description which is exactly what we wanted and so we'll let this finish and then we'll copy and paste it alright so it just finished I like How It Ends it please let me know if you'd like to make changes that's what's nice if there was a change you wanted you could just ask and it will spit out the change okay so it did it again in the code editor I tell you this is the first time so I'm gonna click on copy code and let's go ahead and paste it into our website Editor to see how it did all right uh here was the first section I'll click here and I'll just paste it directly in and I gotta say it got it right again so let me expand it it's in a group we have our heading we have our subheading and then we have four columns in each column has a heading and a description of the service and it's looking fantastic now let's throw chat GPT a curveball and ask it to create a pricing section for us and see how it goes this time I'm asking chat GPT to create a section for happy pause mobile dog grooming pricing including a title a subtitle and three prices one in each column with benefits and an order button in each column so now we're really going to put chat GPT to of the test and I don't know what to expect this time but let's just see what it gives us ah you can see this time it didn't put it in the code editor just like I'd been saying which is good for this video because then we'll just manually copy and paste it in okay so it looks like GPT ran out of output characters remember there's a character limit on it so if you're going to ask this you might want to ask it maybe just a little a little bit fewer details to go into it I asked it for a lot a lot of structure a lot of pricing plans a lot of description so you can see it outputted all the code which is fine and it kind of got cut off here but that's okay we'll try to fix it so I'm going to highlight all of what it gave me and I'm going to put it into the clipboard and then on my site I need to go into the code editor like this and I'm going to go to the very bottom and I'll click here I'll hit the enter key and let's go ahead and paste it in so it looks like it stopped outputting the code right around um the last service when it was listing out bullet points of the benefits so let me see if I can fix this okay I think I fixed it this is going to be unexpected results let's see exit the code editor Let Me attempt a block recovery like that and I've got a pricing table so here is my heading for the section subheading and I've got three packages right here they include details they have bullet points talking about what's included and I have in order button wow so you might be thinking great it's in the WordPress block editor but I use x y z block editor package but did you know that most of them have conversion options so you can convert the container to the container system of what you use the headings the paragraph text the buttons to what you use and it's very easy so let me show you so I'm going to click on What's called the group block right here and you can see right there there's a little icon in the toolbar and when you click on it you can see it says transform so I can transform it to container now I have Spectra installed on this site so I can convert this to the Spectra container and now it's going to start working with my full width layouts and all of that now there's another way of doing this I can go into the list View and I can expand the different items I can do the same for each of these parts so I've clicked on columns I can click right here oops let me click on columns click right there transform into containers so now it's let's expand this it's fully converted over to the container system inside of Spectra and I can go inside of the First Column right here I can click on the heading and let's convert that into Spectros heading so now it's inspector's heading format I could do the same thing I leave paragraph the way it is and so you can just continue doing this as you go through you can do the same thing for the image I can click on the image and I'll convert it to Spectra's image which has some really nice formatting options as with anything chat GPT related your mileage may vary so you saw what I was using it I got the code editor and then I didn't get the code editor so there is sometimes it's a little on the inconsistent side but this is a great way to generate layouts with the copy in it convert it to your block packages of choice add some background color some styling to it and what's really nice is it's already going to inherit the different topography Styles font Styles the button Styles and all of that from your WordPress theme or whatever you have set in there it's just creating these layouts adding a little bit of design to it and you you are good to go now if you want more AI kind of content like this I do have a newsletter and I have a link inside of the video description you can click on that and sign up for the newsletter where I send out information like this these tricks that you can use in your business to speed up your workflow using Smart Tools like Ai and now that I've given you some of my prompts I want you to give me some of your prompts when you're trying this and you discover certain things maybe descriptions of sections that you want that work out really good for you why not share it in the comments section down below so that it can help other people as well thank you for watching this video keep an eye on the channel for more content like this and I'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 21,719

Keywords:

Id: jVWNzXy8kUo

Length: 16min 30sec (990 seconds)

Published: Tue Feb 14 2023