WordPress SaaS Tutorial: How to build a Wix Clone and Sell Website Builders

0:00 In this demo, I'm going to share complete clone for Wix website and I'm not going to clone like the design and so on, but rather I'm going to clone the whole idea of infrastructure, the idea of creating other websites websites. So, we are going to create a machine that creates websites for other people. So, I'm going to share how we are going to build it using WordPress, how we could use WordPress to have like different plans, people could select a certain plan, subscribe to it, they could check out, they could pay to a subscriptions.

0:32 And we are going to have to integrate with, for example, with Stripe to handle the payment gateway. We're going to use a platform called WPCS to handle the scalability for our WordPress like creation machine. And then instead of us caring about the infrastructure, AWS, Kubernetes and all of this stuff, we're going to use their platform. And eventually we're going to be able to create other websites to our customers, so they have like another website for them to build their whole platform or their whole website for their company.

1:04 And it would be almost exactly like Wix, so we are going to have tiers, we are going to have features, we are going to have reliability and scalability for our system. So, keep watching this video to be able to understand how we built the whole system from the idea to the concept to the architecture and eventually to coding this part and deploying and doing everything for this clone for Wix. So, yeah, keep watching and let's start.

1:32 But let's answer the biggest question, which is why WordPress? Why do we choose WordPress instead of building from scratch like using Go or Rust or Node.js or Java like whatever programming language you would like or even go with the full no-code platforms. And the idea is that in WordPress, WordPress is not just a plugging system, but rather it's a complete ecosystem that have ton of plugins. So, at the moment there is almost like 60,000 free plugins that could provide you with every feature you would like to have. Like any feature you would have in mind. Like maybe you would like to have a store, so you would have WooCommerce, one of the biggest known store platform. And you would have a lot of paid integration with it.

2:16 Maybe you would like to build inside your app, I don't know, like CRM. So, you would have free plugins for it. Maybe you would like to have SEO, you would have SEO plugins as well. Literally like every feature you would have you would have in mind, it would be already programmed. This is one thing, these are the free ones. But at the same time there are also paid plugins which provide like more premium features and they exist on CodeCanyon website. So, you would have a lot of free plugins you could buy and most of them are like one paid like one-time payment, you don't have to pay subscription similar to like no-code website. So, you'd only buy it once and you are also own the code, own the data, everything is under your control. So, this is one of the upsides.

2:58 Of course, you would need like a developer or someone like to handle like the technical stuff if you need. And there is ton of freelancers who already understand WordPress and there is of course like the high expertise people who also understand how WordPress internals work and so on. So, you have the code, you have control over it and you also have the people who could help you to do like the technical stuff if you need to, but most of the time you wouldn't need this stuff because you just like combine them together and then have your own like SaaS application and build your SaaS company. So, this is the reason why to use WordPress.

3:34 So, this is answer why okay. The next question would be how? How do I use WordPress to build my company or my SaaS application? So, when we build a WordPress SaaS application, we have like a certain architecture that exist literally like in everyone. So, the first part is that we have WordPress already provide us with plugins. So, we have the external plugins, we collect our features first like we list our features and then we collect the plugins that already exist in WordPress. The second part is we leverage the custom plugin capability in WordPress.

4:15 And also there is custom themes. So, of course like there is also like free themes, but we would like to have our own like private design or like custom design. So, the first part which is custom themes, in this one we add our custom design like brand, look and feel and all of this UX UI stuff to be able to sell our website and our SaaS product. But also we use the custom plugin and this is the critical part to store our business logic. This is where we are different.

4:46 Like we are different from other companies. This is where the part where we are like making money basically. Like this is where we are differentiating from the others. Maybe you are getting like different plugins and the integration between them is not good. So, in this case you would use our custom plugin system to build the integration to maybe like WooCommerce to interact with subscription and maybe interact with other stuff. So, this is number one, custom plugin where we store our business logic code like the things that differentiate from other companies.

5:17 Custom theme where we have our custom design. And the third part is external platforms because yeah, unfortunately you will still need to rely on external platforms. like it is not also like unfortunately, but actually it's a good thing because you don't need to spend money, time and energy and people and stuff to use your like to like to spend them on your product. So, you don't need to hire developers, you don't need to hire a whole team to manage, for example, your infrastructure because you have different servers and different websites. Maybe something goes down, like you know, like these websites already are on servers, so you don't need to care about them, but rather handle them to another third company.

5:58 So, maybe you could use AWS, for example, or Google GCP or in our case we are going to use WPCS, which is a platform to handle our infrastructure. This is one thing. Another thing maybe you would like to use a payment subscription like a company to handle your all your payments. So, in this case you would use a payment processor company and we are going to use, for example, Stripe or maybe you would use PayPal or maybe you would like to use any custom other company. So, this would be the third part which are like external platforms that you rely on to deliver more reliable service and you don't need to hire people in your company. Of course, like when your company grows very huge and so on, maybe you would like to build your own AWS. I don't know if you need to do that or you could build your own payment processor, for example. Like these things would happen on the long run, but at first you would like to save as much as we can and also to own the code at the same time if we are, for example, like selling something very critical and we won't don't want to like expose our code or like rely on third like rely make our business all of it rely on third-party platform, but have like a little bit of a middle ground.

7:10 So, this is why to use WordPress. Like everything like we said, like most of the plugins are free and if they are paid, you could buy them, it's easy. And we use a custom plugin to have our business logic stored and custom theme to have our look and feel like different look and feel from other companies. And the third part which is like the other third-party platforms that we need to rely on to deliver our code. So, this is how we use WordPress in general to build our SaaS applications. Now, let's discuss our example that we are going to build, which is our Wix. We are going to build a Wix clone. So, we're going to build a Wix clone.

7:51 And when we start discussing how we are going to build the SaaS, we need to first line up what are the different features that would exist in our SaaS product. So, when you go to Wix, like let's forget about WordPress and everything and let's focus on Wix. So, when you go to Wix, we have two things that exist on their platform. The first part is the storefront or the place where they are selling you like different subscriptions, tiers, what you would like to do, what your name, details like billing and all of this stuff. And the second part is your website that you are going to build through Wix. And let's call this website, let's call it tenant for now.

8:36 Like this is the term that we are going to go with. It's a tenant, it's like a tenant in a house. Basically, so basically we're a tenant in Wix. So, the storefront would have first part, we have products that we are selling or things that we need to sell. And with products, we have of course like our products would be subscriptions. So, this is the first part. We also have a payment gateway that we are using.

9:04 We are going to have different inside our products, we are going to have different tier systems. So, we would have like basic, we have gold, we have platinum, maybe like custom. So, we have like different tiers that we have in our system. And Wix as well, they provide custom domains because you need to have your own domain for your website. Sometimes websites because you might forget your username and password, they also have single sign-on. So, you are able to with a single button, you are able to log in into your website, don't need to to remember your username and password and all of this.

9:38 So, we have the scalability. Okay, this is the part on the storefront. The other part on the tenant side, the website that you are going to create, we are going to have what you see is what you get with like system to build our different pages. So, you have your page and then you have like different drag and drop and you are going to build the different pages that you have in your website. This is a one feature. Maybe you are going to have a SEO as well. You need something to handle the SEOs for your website.

10:08 Some websites also would have store. You could build instead of a normal website I would like maybe for the basic tiers you only have the is the editor and they have the SEO but they don't have a store. Maybe I would add it inside the gold. You have ability to have store. Maybe the third tiers that platinum I would like to have analytics. So this there is also another feature I would like that and so on and so on. So there are different features.

10:33 So this is the first part. The first part is that we list the different features that exist and when you see it you see okay this would take months to build if I'm going to build it custom. Like you cannot imagine how hard it is even to do very reliable payment gateway custom domains or like how to handle DNS how to handle the scalability because you know like this is just like the storefront part. This is just the part where you are going to sell and there is also the different tenants that are created. So you can imagine if just we go to another page you have your storefront and the storefront is just spawning different websites. So if you are going to build it completely custom you would need millions to build this stuff.

11:21 But we would rely on WordPress and different custom platforms and to rely basically on the shoulders of giants. So let's now go to how we are going to use it with WordPress. So after we listed the feature we need to check first part is the plugins. So we found that okay with products we have already WooCommerce. We could use this plugin to have our product system. With payment gateway we would rely on Stripe as our payment gateway platform to pay our stuff.

11:51 With tiers we are going to use WooCommerce as well and for subscription there is a plugin to do different subscriptions as well. So we are fixing this part also with a custom plugin. Custom domain there is none. So in this case we have to program this part with ourselves. So we are just like going to do an X here. So in this case we have to program this part. Single sign on as well doesn't exist. So we are going to program this part on our side.

12:18 Okay. And when we go to the tenant part with the editors there is already Elementor. And there is also in WordPress site as well there is there there is Gutenberg editor that you could use to do the editor the editing as well. So it's like that but we are going to use Elementor because Elementor has like a ton of features you could use and then you would wow your customers. With SEO we are going to use Yoast as our plugin to do SEO stuff. With a store stuff part as well the feature we are going to use WooCommerce. With analytics there is Google Analytics that we could add inside our system.

12:55 So what you see now is just we are going to program these parts and the rest is already done. Okay. So we answered this one. The other part which is scalability. You remember that we rely on when we discuss this part we rely on custom plugins. We have custom themes. This is we already we are going to use like free themes. We are not going to do like HTML CSS and JavaScript in this demo. And with platforms we said like different Stripe we are going to use it but now the scalability because if we if you see this part okay I'm going to spawn this and this and this and this and there might be hundred of customers you would have on your website and that doesn't make sense to add all of them under single server. So if you add all of them of course like you wouldn't last for long and your business go out and then you would start okay we just like increase the instance size and it's huge. Another solution I would build my own custom stuff to have like Kubernetes on AWS and maybe like scale it and have all my system. But in this case you need to hire a team of DevOps to handle this part and you would pay like a lot of money to them and your startup at first cannot handle this part. And that's where the platform that we are going to use which is WPCS and WPCS allows us to have Kubernetes power and using Kubernetes power we could scale to like virtually unlimited amount that we need of tenants that we are going to build. Each one of them have their own configuration and they are like similar to each other so you don't need to configure each one of them but rather they are like template and they just take the templates and generate different ones of them. But it's not just Kubernetes it's actually a WordPress Kubernetes and this is the good thing. You don't need to configure the image you don't need to upload and get and all of stuff but rather you are going to use Kubernetes power for scalability. You are going to also use AWS power to have like very reliable system and at the same time all of this has WordPress included. So you don't need to do a ton of setups but rather and when you are going to see where we are going to build it in the demo you see how easy it is to just like configure the different tiers because we are going to use WPCS to have different tiers because we are going to have basic gold platinum maybe custom maybe express maybe like enterprise or whatever amount of tiers that we would like to have and it's just like few clicks to create and it's super easy. So this is a good thing about WPCS. You also you like going to save ton of money from DevOps and you send this stuff to support and to maintain and make it reliable and so on to another company to handle this part and you don't have to handle it just handle your product and you deliver your value eventually which have for the for our demo at this moment which is Wix clone. Of course if you have like different ideas to clone you could add them in the comment and I would create a video for cloning them and you will see like how easy it is to build this stuff using different plugins. But of course you need like expertise in WordPress development if you need to to develop this custom part but the rest of the stuff you don't need to. So you don't need to spend millions to build your SaaS company but rather maybe like few thousands and then you start your own business and yeah generate income from it.

16:23 So this is how we are going to build our system. Like these are the different features. We have here WPCS. We are using it to have good scalability for our system. Like this part and eventually we are going to build our whole demo from it. So let's start by building our demo. And the first step would be to build our storefront. So you remember from this architecture we are going to have our storefront and then from it it is going to spawn different tenants from it. So we are going to just like have the first part which is the storefront and I'm going to use DigitalOcean to host my storefront and I got the question why DigitalOcean. There is no specific answer for this demo. I'm just using it because it's simple to build it with DigitalOcean like it's just like few clicks and I don't care about scalability just like a simple website.

17:15 You could use AWS or even could use WPCS like of course like it depends on case to case basis. So the first part I'm going to create my WordPress website for the storefront part and it's called on DigitalOcean droplet. And I'm going to go to marketplace and I would like to select the WordPress installation website and they are going to select which instance you would like. So maybe I would select this one. This is enough. This is the first part where you would like to host it. I would use Frankfurt just because it's close to Berlin here. And they would ask about the password to be able to log in to the SSH. I would use any one password website to generate password. So I'm just going to generate strong password and maybe go to one password website and then just let's copy this one and let's copy it and let's use it here.

18:09 Maybe yeah everything is nice. I'm just going to also to keep it on the side because we would need it to log in. And I wouldn't care about the rest of the stuff. You could check them out and then I would create my droplet. So now I'm going to create the first part which is my storefront and this we are going to have like my WooCommerce. We are going to add our different custom plugins and then we are going to build our basic part to create the different tenants.

18:37 So now after our instance is ready from DigitalOcean we are going to open it and log in to the console because we need to log in to it and set up WordPress and also to set up our cron jobs because we are going to use cron jobs to handle the custom domain part. And I'm going to explain this part but I'm just like going to explain each part at each step. So the first part is to log in and how do I know it is just because I did it before multiple times so I know we need to log in to set up our WordPress website. So we are waiting for it to go to the console.

19:14 And after it log in it will show us like different stuff and it will going to ask what is the domain and subdomain for your website. And I'm just like going to copy the current IP for our instance. There is no like specific reason to have like a domain now for this demo. So we are going to go to it. Okay. And I will just like keep this one here and minimize this part to make just the demo easy. Okay. I'm going to add my IP address. This is my domain name for now. It going to ask for my email address. And for emails also for simplicity of this demo I'm just going to use a website called Temp Mail and it gives us like different emails that we could use to help us for our demo. And of course, like you see like different ads, but we don't care about them now.

20:02 Okay, let's add our email. And then it does about username for WordPress. I will just use admin. And password, I'm using strong, powerful password. And for the blog title, we add Wix Clone. Of course, like it's not a blog, but rather it's a whole system. It says information is correct. We say yes. And then use Let's Encrypt for HTTP. We don't care about it for now. It's just a simple demo. You could install it if you need to.

20:31 It would configure our WordPress instance. And now our instance ready. But there is one last step we need to set up, which is cron jobs. And cron jobs is a way to have different tasks scheduled to be done later. Why we need this stuff? We would come at in the custom domain part. So, I already stored the script to be able to go to to to install the cron jobs. And you would be able to go to the repo that you would have link for it in the description section. And you would just like go to crons cron job SSH and just like copy this part. So, just like copy it and paste it.

21:10 And we are done. Now we have cron jobs enabled for WordPress. We don't need to do more stuff for it. So, now we have our WordPress ready. We now need to log in. So, we go back to Digital Ocean. We copy our IP address. And I would add IP here for our WordPress website or storefront. I will just like keep it here. And then I need to log in into the admin part. And it would ask for our username and powerful password.

21:42 Let's log in. And now we need to install different stuff. So, you remember from the features, we need to install WooCommerce plugin. We need to install Stripe. We need to install Yoast No, sorry. Yoast and all of these are on the tenant side. But only we need to install this part only. So, let's add the plugins. And the first part is add new. Let's remove this. And we need to install WooCommerce to have our storefront part.

22:13 Install. And then it would We also need Stripe to integrate with Stripe. So, we install these and we need the plugin to handle the subscriptions. So, we are going to install it. So, there is this plugin. We just write subscription. And you would find this one with animation and it's super cool plugin. So, install it. And we need to activate them. So, we go to installed plugins. And first, activate WooCommerce.

22:54 And we just add any address for now. Let's add 1 2 3 Berlin Street. And country, Germany. Berlin. And city, Berlin. And postal code, any postal code for now. Let's continue. No, thanks because we don't care about this for now. Continue. Now we need subscriptions. We remove this part. And we press continue. We add your selling three products. We say no. We remove recommendation. All of this is just like they are collecting different stats about like people who are using it or survey.

23:32 Okay, we are going to use this simple theme for now. This is one of the famous WordPress WooCommerce themes. So, now it is enabled. Now we need to enable the other two plugins. So, I'm going to enable subscrip- subscription and Stripe, but let's enable one by one. Let's enable subscriptions. And just to give us the way to make people pay us pay a subscription for each tier. So, we are going to remove add to cart because you would like to have subscribe.

24:04 Subscribe. And then we press next. Press next. We press next. We don't care about all of this part and we say finish. So, now this plugin also is ready. And now we need to add Stripe as well. So, we need to activate it. And we need to connect Stripe with our WooCommerce part. So, I'm going to log in into my dashboard for Stripe. Mhm. Okay.

24:34 Let's go to Stripe back. So, we go to Stripe. And we press sign in. Okay. After we sign in, we need to create an account in Stripe. So, basically your our company and let's say Wix Clone. And we say like the company the country which is it's in Germany. Of course, like with Stripe you need to enter the real information, but for now we are just going to use the test mode for showing this demo. But you need to enter the real details like address, tax information, legal system, all of this part. Maybe you would like to integrate it with your invoices system as well.

25:14 So, all of this would be needed. And we just need to copy our keys. So, maybe instead of jumping to this part, let's first go to WooCommerce settings. And then we go to payments. And then we find Stripe credit card because we would like to enable credit card. So, we click on it. And then we enter our account keys and click test. And then we enter our test publishable key, which is this first one. We add it.

25:41 And then we add the second part, which is the secret key. So, we added our secret key and we save test. Okay. So, now we have our basic parts. Which is Let's just confirm that Stripe is enabled. So, Stripe is also enabled. So, now what we have done, let's just omit them. We have We have installed WooCommerce. We have installed Stripe. And we have the subscription. Now comes the custom part. And this part is a custom plugin that I have built to integrate different things. So, the first part is to handle the custom domain and single sign on. And to handle the integration. You remember that we said that we need the custom plugin to be able to integrate integrate these plugin and create our application, which is a Wix Clone. So, this custom plugin also handles the integration between these parts. And also it is able to create the tenants through the PPCS.

26:40 Like you see, it's a little bit complicated part and this is the power of WordPress. We didn't care We didn't We didn't need to care about any of these stuff like payment gateway, WooCommerce products, all of this stuff for subscription or when someone cancels a subscription or create subscription or pause it or like there is a lot of edge cases. We don't care about it. We just care about adding these new features because they don't exist in the WooCommerce part. And also integrating with the PPCS to be able to create the unlimited amount of tenants that we need.

27:15 So, I already have the plugins on the link for the repository and they are hosted. You just like need to go to the links that is added in the description. Click the releases and then you need to download these two. So, the first part would be installed in the storefront and the second part and we come to the explanation part for it, but it's going to be installed on the tenants to have the communication between both of them.

27:40 So, we are going to download them. So, you could download them. And then we are going to upload them as a custom plugin on our storefront. So, we go to plugins. We add new. And then we click upload and we choose file and then we need to upload them. So, I'm going to upload them. We just go to projects. I'm just like going to upload the one that I have now. And we click the host. This is what we need. And we click install now. It's going to add the plugin. We create activate.

28:12 After you activate, you now see a new thing that exist up here, which is the PPCS.IO. And we need to define different things for the PPCS. we need to define the region where things are hosted. We need to define the API key and secret. Okay, what API key and secret for the PPCS? So, when we go to the PPCS and you saw you have a link for it and you could also like have credits to use it for free at first.

28:37 So, the first part is that we need to create a product. And the product is like it maps to one of our apps that we are going to create. And inside the product, we need to define few things. Or yeah, not too many things actually. We need to define first the template. So, the template that is going to create these tenants. And these templates in the PPCS, they call them versions. They call them versions and basically they are used to create different like different Yeah, it's different tenants from these templates. So, you are just creating a template and then they are going to create these tenants from them.

29:16 So, the first part we go to products and we need to create a new product. And we say Wix Clone. This is our application that we are building. It would take a while to be built. Now it is ready. And as you remember, we are going to build our template. And they call it versions. And of course, there is link for documentation for the PPCS in the description. You will be able to understand like the whole the PPCS system because there is a lot of stuff to be done. But their platform is actually simple to use. So, we create a version and a version is like assimilated to templates, like it's similar to templates.

29:55 So, let's name it as a first version, which is our basic plan, like our not the first version, but rather the first template, which is basic plan. This is our first tier that we're going to create. We need to select PHP 7 7.4 because this is how the plugin is going to work, the one that we are going to install it and we get into details why do we need it? And we need an empty WordPress, so we create this one.

30:20 Now, after our basic plan is ready, we need to create the golden and platinum plan. But, I'm not going to do that. Why? Because inside each one of these plans, we need to create our template. You remember, we need to create our template and to create our template, we go to the editor and by clicking the editor, we are able to log into the WordPress like this template and add our different stuff like plugins and pages if we need to and so on.

30:44 But, we need to add inside each one of these plans like the basic golden and platinum, we need to also add like Elementor because each one of them would have Elementor. We need to have different SEO plugins. Maybe we need to do it. Maybe only the golden would have WooCommerce, but this is like a special case, but there is at least like common parts between them. So, instead of doing it like two times or three times, I would rather create it once and then copy it to the others. And this is where the snapshots come in. So, the idea of a snapshot is that when you do different changes for your tenant or like your template not tenant, sorry, your template. So, when you have your template, which is the version, and you do add like different plugins, you install our custom code that we need to use it for the communication that will come into later and do different stuff.

31:38 After you do this part, you take a snapshot for it. Basically, it's like okay, I would take it and I would take it like at this moment, I would save it and it would create like yeah, it's creates a snapshot for it. Like it creates something in in the memory, like it's a file and it's saved now. And from that, I could take it and create my other versions from it. So, I could create the golden and also I could create the platinum.

32:05 So, instead of like doing it in the golden and platinum, install the plugins, maybe I forget to do stuff inside it, create a setting and so on. Although like they are similar to the others, I would do it first for the basic part and then create a snapshot and then copy it inside the golden and the platinum. So, let's go back to our basic plan and let's install the basic part and then save the snapshot and create the others and add the custom plugins to each one of them.

32:34 So, I would log into the editor and then now I need to create my template. So, the first part I would need to add my Elementor stuff. Like you remember from this part that we need to add like the basic stuff, so maybe we would like to add Elementor, but maybe not just this one, we need to add like different stuff as well. Let's add some premium plugins. Not your premium plugins like they call it premium.

33:01 Okay. So, after they are ready, maybe I would like to also give them some basic SEO part. So, we also install Yoast. Okay, and now we go to our installed plugins and we activate them. I just like click bulk and apply and activate. So, all of them are activated on my template.

33:33 Okay, and we go to install and click next next. We don't care about all of this now. Okay. So, yes, everything is done. Congratulations, okay. Yes. Okay, and now we have Elementor on our website ready and we could create maybe like a basic page. And yeah, we have now Elementor. We could add just here the title home page maybe. And then if we go to Elementor just to see it. And now we have our drag and drop similar to what you have in Wix. So, we have like different stuff and of course they could be customized actually like you could add custom stuff to Elementor as well. So, we now have like our drag and drop see as you watch maybe. See as like yeah, like our editor. So, we just like say, I don't know like hero maybe here.

34:29 Okay, and we could also like maybe add part for an image if I would like to have it. Yeah. Okay, we don't modify a lot and we just like click publish just to keep it and now we confirm that Elementor is working. Now, we need to exit to our dashboard and now let's go back to our like like our template part, basic plan. And now we need to install our custom plugin for the client. Okay, now we need to answer the question. Why do we need the custom plugin for the client?

35:04 So, we have two parts. We have our storefront. Like this is our storefront that creates our tenants from it. Like we have our tenant here, we have another tenant, we have another tenant and they are created from them. So, the first part, we understand that there is a plugin here and this plugin that we added the Wix host one is to communicate with WPCS to like create these tenants.

35:40 This is why we need the host plugin to be able to create like each one of these. But, the plugin that installed in each one is is used to create like for the purpose of this demo, we would like to create a secure connection. Yeah. Connection. We would like to create a secure connection between the storefront and the different tenants. So, each storefront is able to securely communicate between each one of them using like encrypted public and private keys.

36:15 I would add video for what is public and private keys in the like you would see it here up until the video. So, you'd be able to see it and also I would add it in the description section. So, using this public and private key, we could have secure communication. But, the part is that the storefront first communicate with WPCS, tells it, "Hey, could you please create the tenant?" And after it creates the tenant, each tenant would need their own key. So, we create a public and private key to be able to have the secure communication, but each tenant have their own key. And in this case, we have inside each tenant this plugin and this plugin would communicate with our main website and tells it, "Hey, could you please send me my key to be able to in the future communicate securely between each other."

37:09 So, that's why we added this plugin. This is one point. Of course like there other stuff for it. I would come later to it, but this is the most important part to be able to create the secure communication between the storefront and my client to be able to get the public and private key. And that's why we after install the plugin, we need to identify what is like which storefront we would like to communicate to. So, we are going to add the link for it inside the plugin. In this case, we are able to after this tenant is created, we could get our public and private keys.

37:47 So, we go back and then we add new and then we upload our plugin and then choose file and then we upload the client and then we click install now. It installs the plugin, we say activate and we see the tenant settings. And now we need to add our host URL and our host URL is our DigitalOcean website that we have created. We just like copy the main link and we just add it inside the tenant part. And we need to remove the slash. It shouldn't have the slash at the end. This is how it's programmed.

38:23 And then we just like click save. Now it's added. And good thing as well, this plugin is also because you you know like this part is a template, this plugin would disappear for the people who are going to create the tenant for. So, this is only for you, but this part would disappear and also this part would disappear because you are going to give them different role. We're not giving them the administrator role, but rather we're going to give them the editor role.

38:48 So, we are now created the secure communicate like which host that we are going to get the secure communication from. So, this is the first part. Second part, this plugin is going to handle if you go back if you go back here. You remember that we would like to have our custom domain and we would like to have our single sign-on. So, custom domain is going to be handled with the plugin inside the storefront part, so it would be able to communicate with WPCS and says, "When you create this tenant, please give them this domain."

39:20 The second part, which is single sign-on and single sign-on is a button that we are going to see and when you click on it, you are able to log in into our tenant part. And in this case, this was one of the reason why we need the secure connection. So, this is a part. Second question is how this plugin internally works. So, inside the this is one of the cool stuff that they have. If you go to documentation and you would go to integration, I guess, or CLI. Maybe go to tenants.

39:54 Yeah, they have something called lifecycle hook. A lifecycle hook is custom code that you not lifecycle hook definition, but rather lifecycle hook are different events when the tenant is created. And when the tenant is created, we could do certain functions. One of the example would like maybe to enable certain plugins. For our case, we would like to get the public and private keys after the tenant is created. So, that's why we needed to add like this plugin inside here. And when the lifecycle or action comes to create the tenant and after the tenant is created, it would eventually communicate with my storefront and tells it, "Hey, could you please send me my public and private key?" This is of course like an extent like extensive Yeah, extensive explanation to how it is done or why do we need it as well. So, it would eventually run the lifecycle hook and communicate with the storefront.

40:51 Hey, could you please send me the public and private key? And that's why we need to install this one here and that's why we also needed to define our host inside the tenant setting. We need to define this part. So, let's clear things up and now we have our tenant ready. Let's go back now. We have finished explanation why this part is needed. And we come to the single sign-on like when this part comes. But just like to do everyone at at step at a time. Like step at a time.

41:20 Okay. Now, we need to continue creating our different tiers that we would like to have. So, before we creating our tiers, you remember back we said instead of creating like basic, gold, and platinum and then creating different copies of them, we would like to create only the basic and create a snapshot for it and then create the other two plans. So, doing this, it's called deploy on WPCS. And we click deploy. Of course, like deploy do other stuff, but here for this part of the video, it just like means we create like a snapshot for it. Deploy means is that we take the snapshot and then deploy to the existing customers image that they have. But for this part of the video, we're just like creating a snapshot for it.

42:03 So, we create say maybe the name for it. We say basic initial maybe. Like the initial of basic. Okay, and just we keep it inside the comment and then it will create our snapshot. Of course, like it do two parts. It create the snapshot and also it deploy. Now, after the snapshot is ready, we now create our two plans, the golden and platinum. So, we go here and create new version or template. And then we select PHP 4 like we said and then we create the golden plan.

42:38 And we select the basic plan version. This is the our base or like our which version and snapshot you would like to copy from. So, we select the basic plan and then we select the basic initial and we click submit. And then we create the other version which is the platinum. plat- inum And we select also PHP 7.4. And basic plan and basic initial.

43:10 And we click submit. So, now it is going to create both of them. Now, after our three other two plans is ready, we now need to install the custom features for each one because you know like people pay more to get more features. So, let's go to the editor for the golden plan. And let's install to them. And now we see like everything is installed. We didn't need it to do twice because of the snapshot. We create the snapshot and everything is ready and we now also see our tenant setting and we see the connection to the admin part is also configured.

43:45 Now, we go to the plugins. We add new. And then we add for this one, maybe we say like it has WooCommerce for it. Like they would like to build the store tenant for them. So, install it. And we activate it. Of course, I wouldn't go to details how they like different rules happen, how could they add product. I'm just like creating like a simple one for now. Of course, more details require more work basically to be done to create like proper WooCommerce and so on. So, I wouldn't enter details for WooCommerce here for now.

44:23 Okay. And now it's activated. And let's add for the other one or the platinum one to add like more features. But while it is doing it, I would create my snapshot for this one because each time when we do stuff, we need to create a snapshot for it and save it so that when we tell the WPCS, "Please create a tenant for me for this plan because they have paid to me this amount of money, so I would like to create this tenant." So, they need to have like a a snapshot or an image for it because this is like Docker and Kubernetes and all this stuff. So, they need like an image for it to be able to duplicate it and create like another one for us.

45:05 So, we go to the golden plan and platinum. Let's Let's rewind. So, we deploy first the golden plan. Let's deploy it and we say golden plan setup. And just like submit it. And while it is doing our stuff, we go to the platinum and we add our stuff here as well. So, I would install WooCommerce as well for them. I could already have like done this part in the golden like added WooCommerce, get a snapshot and then use it for platinum.

45:40 But anyway, let's add our WooCommerce Yeah. WooCommerce and we install it. And then we activate it.

46:12 And now we don't continue with that. We just like keep it. And we add CRM. Maybe I would like to add CRM for the people who are paying much more. So, maybe add Jetpack, maybe email marketing, maybe HubSpot CRM. And we need to activate all three of them. And this is important because if you don't activate it, the customers need to activate them somehow, but they don't have access to the plugins because we are not giving them the administrative level, but rather the editor level. So, in this case, they cannot activate them. So, in this case, we have to activate it for them.

46:48 So, just like activate each one of them. So, yeah. Okay, we go back. And maybe I will just like activate them through all the plugins installed here. So, activate this and this. Yes. And we click activate. Okay, so now this part is ready. Now, we could go here and click deploy.

47:21 And we say platinum plan setup. Let's copy it and then paste it here. Now, we create our image for this one as well. And now the platinum is ready. So, we have now created finally the three tiers that we are going to provide. Now, we need to connect create the connection between storefront and the WPCS to be able to create our tenants and create them automatically.

47:52 So, we go back to the WPCS. This is where we left. So, we added the plugin. We added the region, EU1. Now, we need to create the API key. An API key is the way to communicate between our storefront and the WPCS. So, we click API key and we create a new API key and we say maybe like Wix host website. Okay. We click submit. And we copy the API key and the secret as well. So, we add the API key and we copy the secret.

48:30 Save changes and now they are ready. Now, we need to go to WooCommerce and create our products. Now, we need to create the connection between WooCommerce and the WPCS. Let's go to Not WooCommerce, but rather products and create our first product which is the basic plan. So, create our product and we write the product name and we say basic plan. Of course, we could add stuff here, but I wouldn't add it here for now. And we need to select which version. You see like this plugin is now has communicated with the WPCS and got the different versions that already they have but had it have. test So, we click connect WPCS basic plan.

49:14 And we need to say subscription and we set the regular price which is 100. And we go to the subscription settings and we say it renews every 1 month. And they have like a free tri- like free trial full trial. And we also need to add custom image as well for the product to also appear nice for our website to not see like, "Okay, it's like a random image." So, I'm just going to grab this car. Maybe we say like the basic plan is just a simple car. So, it is going to upload.

49:49 And we select as product image. And we say publish. So, now we created our first one. Now, we need to create the other two. So, we create add new as well and we say this one golden plan. Go down. Subscription regular price. Maybe we say this one is 200. Subscription setting every 1 months. And we say trial is 14 days. And select the product image. We need to upload another image. Let's say it's a plane.

50:30 And we say this one. And we need to select the WPC as version. And we say this is the golden plan. We say publish. And we create the last one, the platinum. So, click this one. Platinum plan. And we click subscription. Close that. Okay, and we say like maybe this is 400 maybe. Of course, like all of these are random numbers. You could add like cheaper ones, of course, because that makes sense if you would like to compete with Wix.

51:04 So, yeah. We add the free trial and select the product image. And we say this one is a space rocket. So, we have our product. And we select the WPC as version, platinum, and we say publish. And last thing we need before we jump, because I see it here, we need to set up the something called permalink in WordPress because it would cause problems if it's not set correctly like with the API and the secure communication and all of this. So, instead of the custom structure, I use the post name. And we just like click save changes. It's just a simple thing.

51:46 Okay, and now we visit our website. I will go to shop. And we see our plans. So, everything should be set up now. We have the communication between our WordPress our storefront and WPC as. WPC as is able to create our different tenants because we have like the communication between the storefront and WPC as. And the tenant also have now the secure communication between the client and the host. Now, let's try it and create our first tenant.

52:20 So, I am just like now like remove the hat of the admin and let's put the hat of the user. And I'm going to use the same email for now just for simplicity. Now, I go to the website. Let's go here. And then I would like, okay, I would like to buy the basic plan. So, I subscribe. I view cart. And then check proceed checkout. Of course, like all of these could be a custom design. And we add my name.

52:46 And then we say the website name. We say cool website maybe. Yeah. Like just a simple one for now. And we could also add the domain name. Okay, I also brought real domain names because we would like to try them and they are from a website called Freenom. So, you could get like free domain names from them and you are able to use them for your website like for testing. Of course, like you don't use it because it's like.tk and yeah, it is not the nicest solution, but it's good for this demo for now to be able to see like real domain names. And we go to our area to see the domain names. Yeah, it's a little bit not the nicest place to see.

53:34 Yes, we go to service and my domains. Yes, and already I have bought these two domains. And when you buy the domains, you already have to set up certain like IP addresses for them and we have like documented them in the area. I'm going to show them at when like this part comes. but when you are building your custom website, you have to have like an FAQ page and then tell people how they could set up their domain names. We are not going to do it here for now.

54:03 Okay, and then I would use maybe this one like Wix clone test as my domain. So, let's go back to our shop. And yeah, it was a checkout page. And then I would add my Wix clone test.tk. And then the company name. Yeah, we don't need to enter it. We select the Germany. And then maybe like some address, post code, Berlin, and phone number. Okay, so everything should be set. And also let's make sure the email address is correct.

54:37 And card number, we need to copy this part. We add it here. And then the expiry date, we say just like something in the future. All of these are just dummy data because we are using Stripe custom data. Okay, and maybe like at 20 Okay, and let's add these numbers and then save payment. And then we could place our order. But instead of adding the domain now, I would just like yeah, let's keep it. And let's see. Okay, and then place order.

55:14 Yes, everything worked now. So, everything should work. And now we let's go to console and let's see our tenant created. Let's go to WPC clone. Let's go down. And now we see it is being created at the moment. This is the first part. Second part, if I go to my email as a user now who subscribed, I would see your order have been received. The first orders like these are from WooCommerce and your website is being created now.

55:41 And there is link to be able to log in with email and password. So, I could use it and then I will be able to log in to my website. Okay, now we just like wait until it is created because if I try to log in now, it wouldn't be possible. Yes. Okay, now it's ready. It should be ready. Yeah, it's just maybe I need to refresh. Yes, okay. Anyway, it is ready Okay, so this is the first part.

56:09 Second part now, we have logged in. Now, we need to go to my account page and try my new features. So, the first feature that we would like to create is to be able to log in to like the single log in part. And we go to subscriptions and now I see my subscriptions. And now we see like our domain is set up and I'm able to log in to like there is the single log in to like single sign-on. Okay, what is single sign-on? With single sign-on, we have two things. We have the first part which is our host and we have the second part which is our client.

56:49 And what we would like to do is that the host would tell the client, "Hey, could you please let this user with a certain account or a certain email to log in to the client." But the client doesn't trust anyone outside. But that's why we needed to create the secure communication. And with secure communication, we have private and we have public keys. And if you haven't watched this the video that I already said about the private and public key, in in summary, basically, we have a certain data and this data is just the email of the user.

57:26 And we say, "Okay, I would encrypt it with the private key." So, they take it, do certain encryptions. And then the only way to be able to read it, either you have the private key, but you don't have it because it's secured, or you have the public key. And the idea of public key is that everyone has this public key. You don't care. And that's why we had like, you remember that we have like the life cycle hook to be able to get it from those. And this is like a public API like endpoint. As long as you know what is the tenant ID, you'll be able to get the public key. And it's secure because public key, anyone should have it. It's not secret part. But this is a good thing about the encryption.

58:02 So, with encryption with public and private key, you could encrypt a certain message with a private key. And you could read it with public key. Like the only way to read it is with public key. Of course, you can read it with private key, but you don't give the private key to anyone. This is only inside. But if they encrypt it with another private key, it wouldn't work. The public key would say, "I cannot read it. It's unknown to me." Because it's always like every time, they always come in in pairs. They always come in public and private key. They don't come this one is separate from the other. There's like an algorithm on how this part is done, but they always come in pairs. And from that, we just like encrypt the user email and send it to the client and say, "Hey, could you please let this user to be able to log in to" instead of like using email and password. So, this is the idea of for this part.

58:56 So, I would just go back and just to make sure I cannot log in to like the WPC admin. And I would go here and then let's click log in to as this user. And now I am logged in. I didn't need to enter my username and password. I just like use the single sign-on. I just like click the button. And now I logged in without like entering the username and password. And everything is fine. And now I have my plugins as an editor and I could do like different stuff here. Of course, like because we give them an editor, but they don't have like full access to the other plugin features. They needed to have like other rules roles and they could be done with setting like different plugins. We would have a feature video how this part is done.

59:39 but for now, the website is ready and we can log in. So, this is the first part. Second part, we need to check the domain. So, we just get the domain and we try it. Let's enter it. And our site is working as well with the custom domain that we added. So, we didn't need to do any stuff. So, this part is ready. This is the first feature. Let's go back. Let's go back and you remember that we had the single sign on, but we also have the custom domain. And the custom domain is a little bit tricky.

60:10 This is the other feature. custom domain is a little bit tricky. Why? Because custom domain includes removing the old domain, adding the new domain. And if you remember inside WordPress database, when you go to any WordPress installation, I'll just go to this one. You have to change inside that it setting, you have to change like this domain. But of course, you wouldn't do it in the customer side. You would like to have it in my account, like on the website.

60:41 Let's go back. Like on the storefront, you would like the user be able to edit this part on the storefront. Because usually usually when they try to log in, let's try this feature again. When they try When they log in, they don't have access to the settings. You don't You don't want to give them access to change the domain or like add user or add roles. You don't want them to have this access. So, in this case, you add this part inside the my account page for every subscription here.

61:09 So, with the domain is tricky. Why? Because with this domain, it includes like updating the tenant database to change the domain. You need to change DNS stuff. You need to do removing the old domain. So, there is a lot of part. And this requires the cron jobs that we set at the first initial video, the custom link or the custom commands that we added. Like if we go to our page and you see like the script and you see the cron job, we added this part.

61:41 So, in summary, cron job is just a way to create something that is always called and create a schedule system in our like in our storefront to be able to do a job later. I don't need to do it now, but rather I would do it later. So, changing the domain include different stuff. So, the first part, when we send, we need to change the domain. So, we send the domain to the WPCS because the WPCS already stores the domain and does the whole networking part, so we don't need to care about it.

62:13 Let's go to WPCS console and we go to our cool website. And we see our domain already added and it's added as a main domain. but when we are would like to change the domain, we send signal to the WPCS, please first remove like this is the old one. We say, "Okay." First, we would like instead of like removing the first, we don't remove the old one, but rather this part, we say to it, "Hey, could you please set the new domain?" Okay, and it In this case, we would set the new domain and we say this is new domain is also the main domain. So, now it's going to be added.

62:52 But at the same time, we would like to remove the old domain because it's it's now not used. So, if we send the new domain and we send also the old domain, there is there should be a delay between remove adding the new domain and removing the old domain. Because if we do them both at once, it already sees like it already sees, "Okay, I have the new domain and you would like also to remove it. How? I cannot remove it. I need to wait some time."

63:17 So, that's why we needed the cron job. So, in this case, the other task, which is going to remove the old domain, is going to be delayed. And we maybe like delete it after 5 minutes to say to the WPCS, "Hey, could you please do it like after you removed Not removed, sorry. After you added the new domain." So, let's recap again. So, the part is the first part is we add the new domain. We say to the WPCS, "Please add the new domain." And we would like also to remove the old domain, but we can't remove the old domain directly because there should be a delay between adding the new domain and removing the old domain.

63:57 And that's why we are going to use cron jobs. And I'm going to show it in the code later. And yeah, this would be the delay that we're going to do. So, the first part, we add the domain, wait 5 minutes, then remove the old domain. So, in this case, we are going to free it for other people if they would like to use it. So, yeah, let's go and see it. So, we go Let's remove all of these pages. Yeah, we have many tabs.

64:22 Okay, and we would add the other domain, which I already set up. So, I would copy Wix clone. And we go to here and then we say update. Add the new domain. I'll click update. It will take a while. And the first part, it should add the new domain. So, if I go to the WPCS console, I would see now the new domain is being added. I will would pause because it would take like 5 minutes for it to add the new domain and remove and then remove the old domain.

64:56 but while it is doing it, maybe we could have some time and see the job where like the delayed job to What is the delayed task to remove the old domain? And this could be visible through a plugin. Like we said, everything exists in WordPress. And I'll just write WP cron. This is how we could see the scheduled jobs could be done later. And then we just install it. And then we activate it. And we go to settings and cron schedules. Maybe Yeah, cron events.

65:28 And now we see the task to remove the tenant old domain. And like you see, it's like after 4 minutes because yeah, there was like some time now. If I refresh, it would update the time. So, yeah, I'm going to skip this part until it is done. Now, after waiting, the cron job is about to be finished. It's only like 27 seconds remaining and I wouldn't do like any refresh because this is the idea of a cron job. It's something that is running in the background and we don't do anything. We just like It's running in the background away from WordPress.

66:02 Of course, like there are ways for it to work like with refresh with WordPress and so on, but rather we are using the idea of cron job. So, it's something scheduling that is running on the node. And it should be done, but I wouldn't refresh because I If I refresh, it would signal to WordPress to send it incorrectly, but rather we would like to make sure that the cron job that we added at first is working.

66:24 So, I will just go to WPCS and I am just like going to watch it while it is going to remove the old domain. So, we already said this one, but we would like to remove this one. So, I'm just like going to refresh and we see now the remove I didn't refresh the old WordPress website or the storefront website, but now it removed it from here. And now it's going to clean up the old domain. And now we are going to only have the new domain. And if I click on it, I should see my website.

66:54 So, everything should be fine. And if I close it and go back to my WordPress as a user, so I'm going to visit it. My account and I see my orders or subscriptions. And then if I click show and I click this one, single login, I should be able to log in using the new domain. And everything should be working. Of course, like this is one part. Other part, the last thing maybe like let's try to do like last one to create another subscription. So, if I go to my free no domain and just like copy this one.

67:35 And if I go to my shop and let's buy the platinum plan. Let's go to because we could have two websites. Users wouldn't have like one website. They usually Yeah, they like our product and then they would like to have like another subscription. So, now we say to the moon. And we add the domain and already everything is saved and we are using the old card. This is also something cool.

68:05 We didn't need to program any of this. It's already inside WooCommerce. So, we save ton of time to do development. Okay, and place our order. And let's go to WPCS and let's go to our project. And now we see that two to the moon is being created under the platinum under the platinum plan. And this is the whole demo. Like we built Wix in I don't know, like few like less than hour and it is ready and working. Of course, like we could customize the design. We could add more features and we could bring our knowledge to build certain websites to other people. So, we don't have like three plans. Maybe we have like four, five, six. Maybe we sell these templates as WooCommerce images and we get like different image and each one One of them maybe like CRM websites. The other one is like for medicine or dentist or pharmacist. And each one like have their own plan and they are sold like under different images. So, we built it like less than 1 hour. Of course, like the coding part took some time, but like you see, we didn't do like many stuff and program like for months to do it. Like the whole custom plugin, it took me like 1 weekend or maybe like 2 days to build and everything is ready.

69:26 So, yeah, we finished this part. Now comes the part to show the code itself. This is part if you are like a developer and you are interested to know how this part is done. This would be very beneficial to you to understand how WordPress custom plugins are built. Like how do I build them in general? And I'm going to show them like in VS Code and we have here like the two package. And we have the first part which is plugin for the client and we have the plugin for the host. And I separated this part. We have the API. So, this would be the part where we have the single login functionality. So, when you click the button, you go here and then there is the code which communicate like encrypt the message. You would see here maybe under a little.

70:12 You would see the part to encrypt the message and create like the login part. So, this would exist in this part. So, we create like a custom REST API. And from the custom REST API, you would see the code back. And this is the part where we do like the encryption and create the message with the user email. And then it communicates to the client and then we have the single login part as well to communicate here.

70:38 And there are different features. I like to separate my features for the custom plugin into different features. So, in this case each one could be separated actually eventually become like its own plugin. So, you have go to manage the whole subscription. So, there is part of the code to create the tenant and communicates with the API. And we have our core part which contains the different services and I use dependency injection to add the code to like yeah, improve testing if I would like to add test in the future.

71:06 And eventually have our main index file which defines a plugin and we get the different API keys that we need for the WPCS. We don't store them in the code. Never store secrets inside the code. But rather we store them in the options API. And then we get them and we are able to create our services. So, we create one way to have like the tenant auth keys to have like the keys idea. Like the concept of having private and public keys. And this is where they are generated and how they stored and so on and how they client or the tenant are is able to communicate with the host to get the keys that they need.

71:46 Yes. So, this is in summary. Like we have like the two packages. We have the Wix host and we have the API keys. This is from the outside world how they interact with the core services, the core parts of the code that are used by different features. And this feature are separated. Each one could be its own plugin. There is one for the host and there is also one for the client as well. And all of them when I was developing them, I was using Docker Compose. So, in the Docker Compose, I'm able to start two instances. One for the host, one for the client and each one would have their own database. And so, I'm able to test all of them because I needed two host and client to be able to develop this part of the code.

72:26 And eventually there is last thing which is a script to be able to build my packages. So, I'm able to deliver them and upload them when like you would see them on GitHub. So, this is a general summary of the code. If you would like more ideas how I developed it, you could add them in the comment as well. So, I'm able to create like maybe another video to explain more how we do WordPress plugin development for SaaS project. If you would like, please leave them in the comment so I know like if people would like this part. So, I'm able to create video.

72:57 So, yeah, this is basically how we develop SaaS application for WordPress. And everything like you see now, it is done. And there is like the different architecture. And yeah, this is the whole thing. Like when we build SaaS using WordPress, we save a lot of time using existing plugins. We don't need to develop them. We already just build our business idea and we always change only like few codes. Like you see, like this is the only custom code that we needed to do. We didn't need to do like thousand files to build the whole Wix clone. Of course, like there would be like other files for the custom design.

73:36 But it wouldn't as much as the back end. Usually the back end is much larger. So, they didn't need to do many custom stuff. So, like you see, it's pretty easy to use WordPress for SaaS. And of we have ownership for the code. We could develop. We could add our custom features as we would like. We don't need to rely on like fully on third-party services. But we keep the things that is very costly. Instead of us managing it, we give it to other services. For example, like with WPCS to manage our infrastructure and it's easy to scale our application easily. And we focus only on the business side to generate money.

74:11 Yeah. So, that's all for this demo. And if you have any suggestions or ideas, any website you would like me to clone to show how easy it is to be done, you could leave it in the comment section and I would probably create like a video for it and you would be able to see like other ways to clone websites. So, yeah. Don't forget. You could leave a comment and yeah, like and share this video. Subscribe to this channel and see you in the next video.

74:38 Ciao.