How to Convert a Lovable Site to a WordPress Theme (Easier Than You Think)

0:00 Okay, in this video I'm going to share 0:02 how I've been using Cursor to turn my 0:06 lovable build into WordPress themes. So, 0:09 I've spoken about this before. I've 0:12 mentioned that you can use WordPress as 0:14 a you can use a a headless WordPress 0:17 CMS. So, you could have WordPress as 0:19 your back end. You don't have to use 0:21 Superbase, but you can build a React or 0:24 Nex.js front end and then you can have 0:28 WordPress as your back end. But you can 0:30 also just make the whole thing a 0:32 WordPress theme and then use plugins. So 0:35 that's exactly what I've done to build 0:37 my directory tool. So if we head over to 0:41 um mk.d directory, this is where I've 0:43 got the current uh theme and build. So 0:46 this was all designed in cursor. This 0:48 entire WordPress theme was created in 0:50 cursor. Um everything just everything 0:54 everything that the design the 0:55 functionality the animations this is all 0:59 uh me instructing cursor but we love how 1:03 lovable works. We love how lovable works 1:06 how it designs how how we can easily 1:08 manipulate the designs and just see it 1:11 in front of us. and cursor. Although it 1:15 does do very well with uh designs like 1:18 general, you can give it a prompt and 1:20 create a vi and react or next.js site 1:23 really well with WordPress themes. I 1:25 don't know if maybe it's not trained on 1:27 as much data for WordPress, but the 1:30 themes usually leave a lot to be desired 1:34 and you've got a lot of tweaking to do. 1:36 So, what I've been doing is redesigning 1:40 this. So, this is cool, but we can do 1:43 better. And I want I want better. And 1:45 also, I want this this whole the ease of 1:49 color schemes and things like that. And 1:51 again, lovable is amazing with that. 1:54 It's not taken that many prompts to get 1:56 this. So, my initial prompt, I gave it 1:59 the I just copied and pasted what I had 2:02 and I told it that I wanted to create a 2:04 directory landing page that would be 2:06 perfect for turning into a WordPress 2:09 theme. a WordPress site. So with that, 2:12 it would structure it in a way that it 2:14 would be easy for cursor to pick up and 2:18 convert into a theme. So that's exactly 2:20 what I've done. This is where I'm at so 2:22 far. Looks pretty much the same. Let me 2:26 just swap between them. Yeah, it looks 2:28 it looks the same. Like everything 2:30 everything I've asked it to do except 2:32 for the popular categories because these 2:35 icons are maybe shaden or something 2:38 else. So, small things that need to be 2:40 done, but what I'm doing is converting 2:42 it page by page. So, we've got the 2:45 featured businesses. Uh, if we click on 2:47 one of them, I'm building it out. Let me 2:50 just go over to one of these ones. As 2:52 you can see, the design is exactly the 2:54 same. So, it's been 2:57 copying the files, the everything it can 3:00 see, it's been replicating that into 3:02 PHP, which is absolutely this is 3:05 amazing. So again, everything. This one 3:07 doesn't have Does it have reviews? No, 3:09 this one doesn't have reviews, but look, 3:11 it's got the photos. These don't work to 3:13 enlarge, but it's done everything. It's 3:16 doing everything in the same way that 3:19 I've designed it in lovable. So, let me 3:21 see if I can Which one has reviews? I 3:24 need to find one with 3:26 reviews. Yeah. So, again, something's up 3:29 with this. Uh, it's it's treating this 3:31 side as the sidebar. So, small things 3:33 that need to be done, but essentially 3:35 it's copied the design. So, this is 3:39 React design and it's just being 3:41 converted into PHP and I'm just making 3:43 sure that the animations and whatnot are 3:45 in line. So, that's something that you 3:47 can do. So, you don't have to do the 3:49 headless CMS option. Granted, it would 3:52 be much quicker to just do the headless 3:55 CMS option, but again, this is for the 3:58 directory plugin. So, I've created Smart 4:01 Directory Pro and I've built this plugin 4:03 which is what you can see. So, when we 4:05 click through here, this is all the 4:07 plugin. The map, the about section, the 4:10 AI generated content, the imported 4:13 reviews, all of that stuff is the 4:15 plugin. And then everything else that 4:17 you can see is the theme. So, that's 4:20 what I'm doing now. It's just 4:21 redesigning the theme and reinforcing 4:24 the things that I want to in the plugin. 4:26 And again, I'm just going to go bit by 4:28 bit and get it 4:30 to build these features in. So, one of 4:33 the things that I was having issues with 4:35 with the native, like the WordPress 4:38 native theme that I built with that uh 4:40 customizer was having trouble. like 4:43 everything I wanted to do. If I want to 4:46 change the color scheme, I've got to go 4:48 back and forth with cursor to get it to 4:51 make this something that's easy to 4:54 change in customizer. And then that gets 4:57 finicky because you've got to change the 5:00 background for lighter buttons and 5:03 things like that. So there was quite a 5:05 bit of conflict. So I decided, let me 5:07 recreate the theme. Let me start in 5:10 lovable and then I can design it exactly 5:12 how I want it. Keep it clean and then 5:14 factor in this color scheme because look 5:17 at this. So everything that I can do 5:19 here I'll be able to do in the WordPress 5:21 theme. So that's where I'm at now. So 5:23 what does this look like in cursor? How 5:25 can you actually do this? The first 5:27 thing that I did is I told it what I was 5:29 going to be doing with it. So initially 5:32 when I I started the site, I told it 5:35 that I wanted to eventually turn this 5:37 into a WordPress theme and then when I 5:39 was happy with it, I reinforced it. So I 5:41 said, "So I'm going to be converting 5:42 this theme into a WordPress theme. So I 5:45 need to make sure that all of my React 5:46 folders are prepared. Can you do this?" 5:48 And then I've said, "It needs to be well 5:50 structured with modular components, 5:52 header, footer, homepage, all of that 5:56 stuff." And then it says, "Look, I 5:58 already know this. That's exactly how 5:59 I've built it. So there's nothing else I 6:01 have to do. And then I've downloaded 6:03 this file and I've given it to cursor. 6:05 So here we've got it here. Uh all the 6:08 files inside it. And then I've created a 6:12 conversion rules file or just the MDC. 6:16 And that's just got more instruction 6:18 telling it what I want it to do the just 6:21 everything that I would want it to do to 6:23 convert to WordPress. And this is 6:25 something that you can get Lovable to 6:27 do. You can tell it to make this file or 6:29 you can go to Claude or Chat GPT and get 6:32 it to make you a conversion file. And 6:34 then the next thing you want to do is 6:36 get your local environment set up. So I 6:39 should have used Docker. I usually I use 6:43 Docker the first time around and I found 6:47 it I found it easier because it could 6:51 manipulate the WP admin and all of that 6:55 stuff. And to be honest, cursor, it can 6:56 still do it, but I shouldn't have opened 7:00 the WordPress content folder only. So, 7:03 I'm only in the WordPress content 7:05 folder. Whereas with Docker, it sets up 7:08 the entire virtual environment. And then 7:11 you've got uh WordPress content, you've 7:13 got WP admin, and then you've got access 7:15 to the WP config file if you need to up 7:18 the memory or do anything like that. The 7:21 reason I chose to just use WP content is 7:24 because I want to focus on the theme and 7:26 the plug-in file. So, anything that I do 7:30 is it's easy to replicate because when I 7:33 package the theme and the plug-in to 7:35 give to people, I want them I want to 7:37 know what experience they're having and 7:38 have the same experience. Whereas, if 7:40 it's accessing all the other folders and 7:42 tweaking things that I wouldn't have 7:44 access to if I'm giving somebody the 7:47 plugin or the theme, then I'm not going 7:49 to know. I'm I'm not going to I'm not 7:51 going to know how it would behave on 7:53 somebody else's installation. So to 7:56 minimize any tweaking with anything 7:58 outside of the theme and the plug-in, I 8:00 just said, "Let me just open up the WP 8:02 content folder." And the result is yes I 8:06 get to see how this will work for other 8:09 people but also I have to now when I 8:12 need to debug something I have to create 8:15 a separate log an download that log 8:18 analyze it give it to cursor and whatnot 8:21 but yeah for the most part it's been 8:23 it's been fairly simple what I would say 8:25 is when you're prompting cursor to do 8:27 this have your conversion file and then 8:31 every time you start a new chat you're 8:33 going to need to tag that that file and 8:36 remind it what you're doing because it 8:37 it doesn't know. It's not just going to 8:39 follow on. It will do its own thing. So, 8:42 every time I prompt it, I say uh I tag 8:46 the conversion file and I'll tag this 8:49 folder. So, it will look something like 8:50 this. Let me start a new 8:53 chat and I'm going to It's already got 8:56 it tagged. So, I'm going to So, it's got 8:58 the conversion file tagged, and then I'm 9:00 going to say something like um 9:03 let's continue 9:07 uh 9:08 converting this build and then I'm going 9:11 to tag that. So, just copy path because 9:15 we can't tag the folder. Um let's let's 9:19 continue converting this build 9:23 into a WordPress theme. 9:27 And I'm going to put the actual theme in 9:29 brackets. So this is my theme here. Copy 9:35 path. And um what was the next thing? So 9:38 let's continue converting this 9:41 build into a WordPress theme. 9:46 Uh let's check let's check 9:49 over what we have already 9:55 replicated and 9:57 um make sure everything 10:02 is this is why I use voice to text 10:04 instead is in line with and then I've 10:09 got my plugin as well. So again, this is 10:11 why I wanted this controlled environment 10:13 because I've got my theme and my plugin. 10:16 These are both in the 10:17 WP content folder. So, 10:24 uh, so, 10:31 um, let's let's make sure let's make 10:35 sure everything is in line 10:37 with the 10:41 plugin and build any missing 10:46 pages. Oh, ages. So, let's put that over 10:49 there for a second 10:51 and see what else we need. Do we have 10:55 the submit page? That was that was 10:58 something to submit your business. I did 11:01 see it 11:02 before. Let's go here. Submit your 11:05 business. Okay. So, we've got this. So, 11:07 it will replicate this 11:09 page and it's done the footer 11:14 already. And then this the footer is has 11:17 already been set up in customizer. It's 11:20 it's made it so much easier to set up 11:22 the customizer, the header, those kind 11:25 of things. You've got map settings here. 11:28 I'm not going to click on it because it 11:29 shows the Google Maps API, but that 11:32 allows the street view to show up if the 11:34 business if you've imported the 11:36 longitude and latitude. So, uh that will 11:39 show up there. And uh footer settings 11:42 here. We've got all of this stuff. It's 11:44 just made it so much easier to edit 11:46 these things. And as I go, I'm just 11:48 making sure that all of the sections can 11:50 be edited in 11:53 customizer. So yeah, pretty pretty 11:57 awesome. This is what it said. Okay, I 12:00 have the directory 12:01 listing source build typical modern web 12:04 development structure blah blah blah. 12:07 And then it looks at the 12:09 structure which is what Lovable built 12:12 and the target theme which is what we're 12:14 working on. Uh analysis next step. So 12:17 build versus theme structure. So it 12:19 compares where we are with the theme 12:22 that we're building in comparison to the 12:26 the template and plug-in interaction. 12:29 Making sure it all coincides with the 12:31 plugin. And that that's very important. 12:33 If you're not building a plugin with it, 12:35 of course, it doesn't matter. 12:37 Why it matters is the taxonomy. So every 12:40 all the business pages, the business 12:42 categories, all of those things, they 12:44 need to be picked up and acknowledged by 12:48 the theme. You it otherwise it will just 12:50 do its own thing. It will just create 12:52 its own things and then the content 12:54 won't show up. So very important. And 12:56 then it says to proceed effectively. It 12:59 wants to 13:01 know the main page views that were part. 13:04 It wants to know, but I'm just going to 13:05 tell it to look at the files, which is 13:07 the whole point. And then it wants to 13:10 examine the 13:11 template within the plugin to see what 13:14 templates it provides. So again, these 13:16 are things I'm going to tell it to do to 13:18 analyze the files before it writes any 13:21 code. And then we'll just go from there. 13:23 And I probably need to get it to create 13:25 a change log, which I thought it did the 13:28 last time, but never mind. We'll just 13:31 get it to do that. And I highly 13:33 recommend creating and keeping a change 13:35 log because just as I did with this, you 13:37 could tag it in the call and then it 13:39 will see what it's done and what it 13:41 needs to do. Um, so yeah, that's pretty 13:44 much it. You just have to take it step 13:46 by step. There may be an easier way. 13:48 This has been working and this way I get 13:50 to get very granular with the things I 13:53 want to do and of course make sure that 13:55 it interacts with the plugin and does 13:58 everything I need it to do. So, all the 14:00 different elements all work together. Uh 14:02 otherwise, it wouldn't really work. The 14:04 plugin with another theme, you're going 14:06 to have to do a lot of tweaking. And my 14:08 whole thing is making sure it's as 14:11 simple and as clean as possible. And 14:13 then any updates once we've got the 14:15 child theme, any updates are just going 14:17 to be seamless. So, that's it guys. If 14:20 you found this video useful, 14:21 interesting, anything, drop a comment, 14:24 drop a like, subscribe. It helps the 14:26 channel and it helps me and my morale to 14:29 keep creating videos. So, on the next 14:31 one.