How To Create AI Tools With WordPress

1. What will we create?: Everyone, this is my Wordpress website. You can see here, I built a lot of AI power tools directly on Wordpress. In this course, I picked the AI Who generator tool. I will show you step by step how to build this tool on Wordpress. For example, you can say here digital marketing tips for the topic. You can set a content type, let's say for a video intro and click on Generate. And now this awesome tool, powered by AI, will generate this awesome results. You can copy one by one, copy all all these functionalities directly on Wordpress. This will help you understand the structure behind this tool so you can build maybe any tool you want later like I did on my website. Not only that, I will show you also how to monetize these tools with the point system so you can sell points and you can turn your Wordpress into As Business. If you are ready, let's start. 2. Basic WordPress Setup: Okay, friends. So step one, you need a Wordpress website. It's obvious because this course is about building the AI hook generator tool on Wordpress. In my case, I have this simple, new, clean website. It's a new website I created for this scores. If you don't have a website, you can simply get one on Ten Web, one of the best web hosting services, maybe Kinsa, maybe host stinger whatever you want. Or even if you want to follow up without getting a hosting plan, You can install Wordpress locally with Dive. Kinsta's a free tool for local Wordpress installations. So you can download Vekinsta install Wordpress locally on your computer to follow up and learn with us. In my case, I'm using my own web server. I use this for educational purposes to create sites easily. Maybe I'll show you this in other course anyway. So step one, you need a Word press website. Then we are going to log in to the dashboard. I will enter my credentials, then simply go to Plug Ins here and click on a U Plug In for building tools, we mainly need one plug in. It's called the WP code snippet plug in. This will help us customize our tools with custom codes. You'll see this later in the course. Install and activate. That's it. We have now our press website with WP code free version installed. We are ready to start building our tool. 3. The Tool Structure: Okay, friends. So this is our basic tool structure. If you understand this, maybe you can build any tool you want, An AI power tool. First, we have our front end, where the user will enter a topic and click on Generate. When the user clicks on Generate, the request will go to our Wordpress back end, our dashboard. Let me show you this, this is the front end. We will enter a topic, we will select a content type, so this is the user input and then the user clicks on Generate. We click on Generate. This request will go to our back to our Wordpress dashboard. This is the back, more precisely to the code snippets plug in here. We'll add a snippet and we'll connect the front end with this snippet Again, we click on Generate. The request went to the back to our snippets. Now the snippets, our word pressed back. We'll connect with open AI to generate the content or the results with artificial intelligence. With AI, we will get back the results. And then they were pressed back and we'll pass them to the front. And again, going back here, we get the results from open Y to the WP code snippets. And this snippet will pass them again to our front and we will show them to the user in this awesome styling. So one last time, we have the UI, the interface, the front end, the user enters the input. We click Generate. The request will go to our back end to code snippets. Then code snippets will connect with open I API to generate the content. We will get back the content and show the user in the front end. Again, I hope you got the idea. Don't forget. Anytime you feel something is unclear, you need more details. I'm here to help you. Just post your questions. I'll be here almost every day to help you answer any question you have. Don't move on. If you find something unclear, just stop, ask me, get things clear, then continue. 4. Generating Hooks With AI: Okay friends, in this video let's play with AI and charge pet. I think you know ChagpT. Usually when you want to generate something with ChargPT, you simply say generate. For example, three hooks for my video about marketing, anything like that. It's a very simple basic prompt which I don't like. You will see why now Chip will say, okay, I'd be happy to help and start generating and so on. That's fine. If you're a beginner you can do that. But we are here to learn something beyond beginners. Let's open another chat. Let's see, Another basic prompt. We are still beginner level here, but a little bit, I elevated the prompt. We say he, as an expert copywriter specializing in hook generation, your task is to generate three hooks for the following topic. And you can pass a topic here between parentheses then for using it in something like a short video. The output we are defining, the output should be only the list of hooks with its type. Then we add the hooks list column and then click on sand and you can see no difference. Chagipeti will directly generate the hooks, the list and will tell you the question hook, the type of the hook, and the example hook and so on. So I think this is better if you are building a tool, you want only the output. So the trick here is using this in your prompt. I don't know if you are on my website and you checked my prompt engineering course or maybe you watched my free course on my Youtube channel. It's one of the top courses on prompt engineering on Youtube. Almost 1 million views now, with almost 35,000 likes. I'm not bragging here, but I really worked hard on this free course on Youtube. And you can check the comments below to see the reviews on this free course. You can go now and check it anyway, going back to Cha GPT. So this is the basic prompt you can use to generate hooks. As I mentioned, we are still in a basic level. We just tweak the prompt with some prompt engineering tips, adding the role and adding the output. And adding this at the end to generate only the hooks directly. Now let's go beyond beginner level a little bit and show you somehow an advanced prompt. Again, I will open chat. And here is my new prompt. It's somehow big, you will know why now. Now the prompt is almost the same in terms of setting a roll. But now you can see the task is defined here. Your task is to analyze the provided hook examples and then use the top templates that fit to generate the three new hooks for the following topic and use it in this form, output should only be the list of hooks with the type. Now I provide the hook examples. In this prompt, we are powering our tool or our prompt with data we collected. This is not simply generic hooks generated by AI. I'm asking AI to generate based on my own examples and templates that I collected and I know it's working. And then the list again to generate only the hooks run. And now the output will look the same, but the content is different. It's using my templates. Now my hook types like the entry in question, the fact, the call to action, and so on. It will pick up the best template that fits the topic and the use case. Again, going back to my channel on Youtube, I don't know if you are following. I published a video a couple of months ago about building custom PT's the right way there. In this video, I will show you how to create custom PTs that really sell and stand out in the competition. The right way to build GPT. I mentioned that one of the best ways is to build a GPT based on your own data. Other example, if you go into my tool section, we have the Youtube title generator. A lot of people create these tools. Block tighter generator to tighter generator. But the difference here, if we select a topic and click on Generate, the prompt I'm using behind this tool is not any prompt. It's built also on my top templates I collected. If you go here, let me show you this prompt as an expert, Youtube blah, blah, blah. I'm sharing here my successful Youtube title templates. So the prompt is using my data that I know it works and generates titles based on that. This is the importance of connecting your tools with your own data. This is how you stand out in the competition because anyone now can create a hook generator with AI, or a Utu title generator, or any generator. But the prompt you create is different. This is why I always mention to learn prompt engineering the right way and to understand the importance of adding your own data when building AI tools. So this is the prompt you are going to use in our tool. Later on, we'll talk more about a more advanced prompt that will allow us and help us to build this awesome UI. You can see here the structured UI we have. Another prompt will help us do this anyway. For now, I hope you got the idea. You can go with a basic prompt or go with an advanced prompt like mine that is based on real successful templates and data. By the way, all the prompts, everything will be attached with the lectures. Don't worry about copying or writing this. I will attach all the prompts and the scripts. Everything we'll use will be attached with this course. 5. Generate With WordPress Snippets: Okay friends, in the last lecture, I showed you the prompt we are going to use and we generated the hooks. But inside cha GPT we got the hooks. Wow, perfect. But now, how to move into word press. We want to generate hooks inside word press. This is what the course is about. In this lecture, we are going to go a little bit more in depth. We are going to create the back end. You remember WP code snippets, this plug in. You remember the structure, the Wordpress back end that will connect with open to generate the hooks for us. Now we are going to set up this part here. We are going to connect the back end with open AI to generate the hooks inside or plug in WP code snippets. Let's create and use snippet. I will select Use Custom code. And now I will name this snippet Basic Open AI Connection. We will start the basic example to understand how things work. Select the code type as PHP snippet and bum, here is the snippet. Don't worry, I know you may think now. Okay, I'm not a developer. I can't create these scripts or these snippets. I don't know HP. I also don't know HP. I never wrote a single line of code in PHP. I just chat with the ChagPT and generated this function and I'm using it and it's perfect. And if you know a little bit of coding, you can understand this script just by skimming through it. So here we are defining the topic like an input. And this is our prompt to generate three hooks for a blog about certain topic. Then we enter the open AI, URL, the API of open I. Then we enter our API key and we construct the call and then send a call to the API to open AI. And here we are reading the response and sending it back. That's it. Again, don't worry about the details here, the function is perfectly working. You can just copy and use it in your website. This is the basic example on how to generate text with AI. With open AI, activate this script. But remember to enter your own API key here. If you don't know how simply open, click on logging API. Simply here, go to API keys. Click, create a new secret key. And I will say tools test anything for me. Now, create secret key, copy it, go back here, paste the key and save snippet. Perfect. We have the function now saved inside code snippets. Now to make sure that this function is working on your website, we want to test it before we go and create the interface and the front end and so on. We want to make sure this is working and we are getting a response from open AI to test this. We have many different tools. We can use an app called Postman. If you have visual studio code, I installed Thunder Client plug in or extension. You can use it to test or even you can use online tools like this one Rock Been. I will leave the links and all this attached. The idea is you want to test this API call to our website. This request or website. I will do this now in both visual studio code and online to show you different methods inside under client. Here we select post as a request, as the request type. And then you get your website URL like this. You paste here you say Sp admin, admin Ajax, Php. This is the URL we are going to use. Then we go to body, then forming code, We add the name as action. It is the function name. Here we add the parameter which is the topic in our case. Let me show you this. The action is this function name. We copy it. This is the action we paste here. If you look inside the function, we have the topic as a parameter. We just copy this past here, you see we paste here. We add a value like digital marketing, anything, any input you want. If we have multiple parameters, we can add them. We'll see this in a little bit. We have the action name, the function name, and we have the topic as a parameter. Click on send. You can see now we got a response from open AI in the content section. Here we have our hooks. You see here is our hooks. The same if you want to test with this online tool here simply you add the URL in the content. You select form URL encoded, you add the action topic, click on Send. You can see here down we have the response this to make sure that our function is working perfectly. Now, what if we want the response to contain only the titles? We don't need all this information from open AI, like the object, the model, the tokens, and whatever we want, the generated hooks, how we can extract only this value here. What I will do simply is change the response I get back from this snippet. Again, I used GP to generate this. I didn't write any of these codes. You can see simply, I'm here navigating through the data object. I'm selecting choices, the first choice, the message, and the content. If you go back here, you will see we have choices. Then we have the first one, since it's an array, Then we have the message, then we have the content, the same way I accessed the content. And return back the content update. Now let's go back and test the same call send. You will see now I get only the content, the hooks directly. And this is what we want. We want the generated content directly so we can access and show to the user in the UI later on. Going back to our snippet, you see here in this basic function, we are using only the topic as a parameter. We have only one input in our prompt, if you remember, we have two inputs. We have the topic and we have where we are going to use it. Remember here we have two inputs, the topic and we have the content type, where we are going to use this hook in a short video, in a block post, and so on. We have two inputs, we need to update this with another input. Simply, we are going to change the parameters and the prompt like this. We have another topic, we have the usage parameter. We have the new prompt. If, remember going back here, we have, I think, this one. Yes, this prompt with two parameters. Here is my prompt. We have the usage parameter, and we have the topic parameter. You can add 34 inputs, whatever you want just by adding them to the prompt this way. Now if I update this script and go back here to test, I will add now the usage. I will say blog, for example. Click on Send and Perfect, We got our response question hook and the hook example, and so on. This is how you can create a function inside or a snippet inside WP code snippets to connect your Wordpress website with pen AI. In order to build any AI tool, you need to understand the concept of parameters and the prompt. Change the inputs, Change the prompt, and you have a AI tool, maybe a block tighter generator, maybe an AI writer. Anything, just decide on your inputs, craft your prompt. And you have your tool, the back end of your tool. Now it's time to create the UI. Till now, we've created the back end. We generated the hooks with AI. Now we want to return back the results and create the user interface on Wordpress. 6. Generate the UI: Okay friends, now it's time to start with the front end to build the UI, the user interface. So to make it simple, we will start with the basic user interface. If you remember, we have two inputs. The user will enter a topic, we select the use case, or the usage on a short video, on a blog, post, whatever, and then clicks on a button to generate the output, the hooks, and the results. The hooks will appear in a box. We have mainly a text box to enter a topic, we have a drop down box to select the use case. We have a button and we have an output box. Let's create this. So what I did simply is I opened ChagiPT and asked to create the UI for me. You see this prompt? I told it you're an expert in HTML. Yes, S. And your task is to help me create a professional, yet simple and clean UI for my tool, the hook generator. The tool has two main inputs, Textbox and Drop down, and the results will be shown a text earlier. Then I asked it to generate only the design for me without any other codes, just HTML and CSS code, the front end of the design code and make sure to align all controls correctly and add proper spacing between them. I use this prompt and simply it generated for me the HTML code for the tool and the CSS styling. I just copied it and used it directly. Remember, I will leave all the codes, all the prompts, everything. Don't worry about anything right now. You'll find all the codes attached with the course. But please follow up. Now to understand the concept and how I build the UI, I simply use chargPT. What we can do is copy this code and create an U folder. This is a simple basic way. I will name it whatever UI for example, and then create two text files. The first one is, for example, UI. And replace XT with HTML to change the type of the file. And the other one, it's called Styles for styling. Simply again, go to ChagPT, copy the HGML code and the CSS code and paste inside these files. Just write a click and edit with note pad for example, and paste the code here. Then simply open this file and you can see our awesome hook generator tool. Of course, it's not working right now, but you can see we can enter a topic here. We can select a type like block, post, video, whatever, and click on Generate to get the results in this box in case there's a problem in spacing or maybe there's something wrong the design. You can simply chat with ChagPT and ask to solve the problem. This is why I always encourage you and tell you to learn at least basic coding, Basic CML, basic CSS, Basic Java script. Just in case you want to generate tools and generate code with ChagpT to understand what's generating. And if you want to ask and solve something, you can ask it so you can understand what's going on anyway. So this is our UI. Our basic interface now is ready. Step two is to connect this interface, this button, with our war press back end. Remember we created this function here that generates the hooks. Now we want to connect this UI with our snippet. That's what we're going to see in the next lecture. 7. Connect The UI With The Snippet: Okay, so till now we created the back end and the front end. Now it's time to connect both together. In this lecture, we are going to work on these arrows. We are going to connect the front end to our back end. Let's see how, before that maybe you are wondering that we created this basic UI. But in the intro I showed you this interface, this professional user interface. Don't worry, we start with this basic example and later on I will show you how to optimize and create this user interface. Just follow up with me now Step by step and we'll cover everything. We have this HTML CSS front end. We need to connect now with our code snippet here how using Java script going back to ChagiPt after it generated the front end for me, I simply again prompt it to generate and connect the UI with my back end. I told it, please generate the JS code to call my word, press Ajax function and show the results in the text area. Make sure to add a loading while operation in progress. And here is my Ajax function. And I passed the full Ajac function, the word press snippet, so it can understand more how to generate the code simply. Again, it generated a simple script. You can see the script. It generated it. I just copy Going back to our folder now here, create a new text file and I will call it script JS yes and simply edit with Notepad and paste the code. Here you can see here are getting the topic and the context type which is the usage in our case. You see defining here the variables, getting the value and simply calling the generate hooks basic function on press and then getting the results in the result area. Here we need to do one thing, change the Lee the URL off your website. I added this comment here, replace a Jack URL. Simply go back to our website, copy this, and paste here, and save. Now let's open again the user interface. Enter a topic, for example, Facebook ads, tutorial, anything, and I will select here a block post, for example, and click on Generate. Oops, we got an error failed to fetch. If you see something like that, the first thing to do is to open here the developer tools in your browser and check the error in the console. You see it tells me has been blocked by CRS policy. Sometimes this happens when you open the tool in the browser to fix this. Go back to your snippet here and we are going to add a couple of lines to turn off this browser CORS policy. It's something related to cross origin security. When you call your function from different domains, it's somehow out of scope for now. But let's now fix it. Just to continue our work, I'll add the following lines simply here. I'm telling it to allow all origins. Don't block any domain or any other domains from accessing this function update. And let's now try again, refresh the tool. Facebook ads to toil, and let's select chat, en, generate, and perfect. You can see now we get the hooks in the result text area. Perfect. Select something else, for example, Youtube growth, any topic, generate. Now the tool is working perfectly. We get 123 hooks. Perfect. Now we connected our basic user interface to our back code snippet. 8. Publish on WordPress: Okay, friends. So till now, we created the UI, the back, and on Wordpress, we connected the UI with Wordpress. The tool is generating the hooks. Everything is perfect, but the tool is not on Wordpress. We want to publish it on our website. Here on this website. So let's do it right now. I will go back here to the dashboard. Onward, press, go here to Pages, then click on a page. Now, the easiest and the most basic way is simply create a page like this hook generator for example. Then here, add three HTML blocks. The first one is for the CSS code. Just go here to the file, open the styles. For example, here with Notepad, just copy it and paste inside this block. Then another block for the tool HTML, you just copy again here, copy and paste. Another one for Javascript, like this open and get the Javascript file, copy, and again, paste here. Simply go publish the tool. There is a very basic way. Open the page and you can see now we have the who generator. But the design is broken. Why? Simply because if you want to add CSS and Javascript this way, you need to add up and closing tags. Simply add here style like this. Open it and then copy it. And go down and close the style tag. Now to understand the styling, the same for Javascript, we will say here script and go down and paste here. And close it. Now, update. Let's see now the magic, what will happen, Refresh and perfect. You can see now the whole generator. But there's a problem in the design. Usually you will see conflicts with a theme or something. To fix this, let's go back to our Wordpress dashboard and click on Appearance Themes. Let's install another theme. For example, adding. Let's select, for example, Hello Elementor Activate. Then let's strike this now, refresh, and you can see now the tool appears here. Design is still bad. I will fix this right now. But let's check if the tool is working again. I will enter a topic, select something, generate, and perfect. The tool is working on our Wordpress website. Perfect. Now the best approach, or what I prefer to do, is to install a plug in called Elementor. Elementor is a web page designer. It will help us design the web pages and create somehow professional designs like the ones on my website. Like if you go here on my website, you can see here the tool, the sharing buttons, this rigid areas and so on. And the menu and the footer element will help you do this. If you work on Wordpress, I think you know element. It's one of the most popular web page builders for Wordpress with 5 million installations. I installed it. Now go here to Pages again or the same page we worked with. Where's the page pages? All pages generator it. Now click on Edit with Elementor. I will delete all these codes. Now, delete update and click Edit with Elementor. This is our page, very simple. I will add here a container. This is the container. I will go and add an HTML block, one block like this. Then again, I will copy the codes, starting with the styling edit control. Go here again, don't forget, we will add style. Then we are going to add the HTML code. And the Javascript code here is the script code. Let's copy the script code. Script control C control, we have the HTML code. Just copy and paste in between. And you can remove the head section. Just keep the main tool code. And you will see it right now, directly in the builder. You can see it's a little bit sticked to the top. How to fix this, for example, you can go into the Navigator and click on the container. Then dance section, we have the top margin. We can add, for example, 100. And you can see, now the tool is not sticked anymore. Anyway, the idea is you can build your own pages, select the appropriate theme, and paste the HTML code of the tool within your page. It's that simple. Let's preview the changes as the hog generator. Again, you can hide the title if you want, or hide from the tool like this. Just select the HTML code here. You will see in the HCML we have the ho generator H one tag. You can delete this update. Now, we will have on the tool as I do here, you can see this title is with elementor, this subheading is with element. The code tool is here. I don't have any titles inside the tool. I just paste the main code within this area. Let's go back here. Let's test it, add, generate, And it's working perfectly. Very nice. Now we have our tool within our Wordpress website. Again, if you face any problem, I'm here to help you. Anytime you can also chat with ChachiPT. If you face any design problems, styling or something, it can fix it for you. 9. Update the UI: Okay friends, in this lecture we want to move from this basic design to this professional clean UI. This lecture is very important if you understand the concept behind this lecture. You can build almost any tool you want. Let's go back here to the basic UI. If you look at the results, the response, it's pure text. The main problem here, please focus, is we have the result as this text can be shown in a text area like this one here. But it's super difficult to turn this text into this arson design, this organized design data analysis. We say garbage in, garbage out. If you have bad data, you will have bad results. If we want to apply this concept in our case, if we have this bad response, which is simple text, it's super difficult to have this organized design. To have this organized and structured design, we want structured output, structured response. So how we can do that, How we can retrieve and get structured responses to build any UI we want. There is where it comes again. The power of prompt engineering and crafting the best prompt. Let's go back here to char GPT and open and U chat. Remember our advanced prompt in this lecture. We are going to apply it. We're going to use it. We are generating hooks based on data, remember. And we use this prompt hack to generate directly the list of prompts. You see the list of prompts? Now we want to get structured response. We want to get organized response that we can easily access to build any UI we want. Here it comes our super advanced prompt. Let's open again a new chat. And let's take a look on this new prompt. Again, we are generating hooks based on the provided hooks example and our data. But look now what changed. The output should be only a valid Jason as follows. And I gave the prompt an example of how I want the response to look like the hook type and the hook adjacent structured response. If you don't know what is Jason, it is simply a structured representation of data. Instead of having dummy text, we have this structured response. And at the end, I said that Jason objects. So we can get only the Jason response directly. Let's take a look on the results now. You can see now the response is Jason and we have three hooks organized so we can access each alone and we can access easily to build UIs based on this. I talked about this in more details. In two block posts and this one the function chains and this one how to create I tools fast and I shared my scripts here. I will link to these block posts if you want to learn more. But again, what you have to understand if you want to build organized UIs interfaces, you need to get structured response out of the AI model of the language model of GPT in our case, or Open API in our case. So we have this output now, we can use it to build our UI. I hope you got the idea again, if you have any questions you feel something is unclear, I'm here to help you. So we are going to update our function now with this prompt. I will copy it and go back to our snippet here. And now we are going to replace our prompt. You see here the prompt again paste. But now we have a small problem. Usually the strings in any probing language or the text is put between two double codes. Since we have here double codes inside our code or inside our prompt, we need to escape these double codes. We just need to add a backslash like that so we can escape these characters. Just add them one by one. Don't forget to change the inputs again. I will delete digital marketing. Here I'm doing this, many will need to show you how in case you want to test yourself. You add two dots and you add the variable inside. Again, for the age double codes. And that's it. I think the prompt now is ready. We added it. We still have one here. This one here. Okay, perfect. Let's try it now. I will save update, snip it updated. Let's go now to our tool. Again, I refresh here. Enter a topic, Google ads, for example. Anything generate and perfect. You can see now we have the structured Jason output, perfect. Now we have this Jason output. We can build the UI based on that. I hope you got the idea and you understood what we did here. Again, I remind you, I encourage you to learn, prompt engineering, how to craft prompts like that. That this will help you not only in building tools, but in getting the most out of language models. If you can't invest in premium courses, you can check my free course on Youtube. I will keep links to all these resources and attach them with these lectures. Anyway, so now we got the structured response. Now it's time to use this response to build this UI, this user interface. Now, since this is not an HTML and CSS and Javascript course, and it's out of scope to teach you this right now, what I did is I created the UI, the base template for you and I will share with you in this course. We can use it and if you want to tweak, change something, ask GPT to change something for you. It's up to you. I will give it to you for free. Can use it directly in your website. And by the way, this template can be used for title generation, can be used for a lot of tools, anything that has an input or two inputs and generates a list of things. Anyway, what we are going to do simply is go again to our folder and we will create a three files. Again, the same operation, but now we just have a new code, the new design code. You'll find the files attached with this lecture. Just get them, download them, and you'll find advanced I, advanced style advanced script. If you open this advanced UI, you will see the new design. Let's try it. I will say here, for example, a CO tips for a documentary for example, generate and perfect. You can see now we have the UI working perfectly. Just one reminder, when you copy the script open with Notepad or any editor you want. And change the base URL here, your website, URL, that's it. And you'll have a fully functional who generator. And then you can copy, the same way we did with the basic design, we can copy the Wordpress and publish it on your website like I did here, and they have it inside my Wordpress website. The next lectures, we will see how we can restrict access to this tool for only logged in users. And how to implement this tool with the point system. If you notice here, if you click now on Generate, the points will decrease. So we are consuming points or credits when using the tools. So it's like building a SAS using these tools. We will see how to do this also in the next lectures. 10. Restrict Tool For Authenticated Users: Okay, friends, let's see now how we can restrict Ace to this tool for only logged in users. So this is our tool. Again, I will refresh and now anyone can use it. What we can do simply is go back to our snippet. Where's our snippet here? Before reaching the code, the main code, We will check if the user is logged in. Look how easy it is to do this with war. Press this simple line of code. If the user is not logged in, you see this exclamation mark. If you did some coding before, you know this means if not user is logged in, I will send back log in first. That's it, update. And now what's nice in this template, I already also created the log in logic. Let's see this. I will say here a CO tips again, anything click on Generate. Now it will tell you you need to log in first and click on a button. And we'll take you to the log in page. Now in this case, I put my user log in page. You need to change the CRL. I will tell you where in a little bit, but you can see now how easy it is to protect your tools from unauthorized access. Only logged in users can access this tool. And this way you can collect and build email lists or as you'll see next, we can allow only users that have enough credits or points to use this tool. Just add this small line of code and you are done again. Let's go back to the advanced script and open the JS file edit. And if you go down, you will see we have this show pop up, login pop up. You can see here is the link to my user login page. Just change this and you can also change the image if you want the no axis PNG that you can see here. Let's go back again. This image here, You can change it if you want. It's up to you. This is how we can restrict access to logged in users. Let's implement the point system and start selling these tools in the next lecture. 11. Add The Credit System: All right, friends. Now let's make some money with our tools. Let's turn our Wordpress website into a business. Going back to my website, you will see again, whenever you use the tool, click on Generate. Look at the points balance here, decrease. You can see we are consuming our points. If you click on the points here, it will take you the points page where you can buy power points back. It's like any Ct system, any Sa business, but on Wordpress. Let's see how to do this in this lecture. Step one, we go back to our Wordpress dashboard. We want to install a plug in that manages the points or credit system easily. Go back here to plug ins, add and plug in. It's called my Crid. Install it. Here we are. Install and activate. Perfect. Let's keep this for now. And here we are. We have the points. You can change the name if you want to credits or something. But now it focus on the main point. Go to users. Here, all users. Then you can see now the admin has zero points. You can click on Adjust. And let's add some points for now, update. Now we can see I have 100 points. Perfect, I can test with. Now what we want to do is if the user is logged in and then clicks on Generate, we want to check if he has the right balance to use the tool. Let's see how to do this again, inside War Press go back to cold snippets. The cold snippets. And open our wo generator snippet that we created before. And what we are going to do right now, you can see here, let's move this here. If the user is logged in, we will move and now we are going to check for balance. Okay, And you'll add this simple code. We are going to get the user ID. The user is logged in. We passed this condition so we can get the user ID. Then we are going to get the user balance with this simple function. You see now how easy it is to implement the point system with word press. Because these are built in functions, if the balance is less than five, we will send no balance. It's that simple. One last thing, before we send the request back to the user, we want to ensure that we are deducting points. We have this also subtract method. We pass the two name and the user ID. How many points we want to deduct. And a simple description and a time. And that's it, update the script. And let's see now the magic. Before we see the magic, instead of testing the code here, let's move it over. Press website again. Where is my page? Here is my page. Click on with elementor. I'm going to update the codes. It's simple. We did this before. Just move the HTML, CSS and Javascript codes these codes. And put instead of this code here, advanced styling copy. Again, remember we add the style tag. We paste the style here. Let's go down, by the way, this style sheet is used to style all my tools. We will copy from here, the main section, and that's a copy paste here. You see now the tool appeared and we still have the script. Let's get it control C and paste. Perfect. Let's update. Don't forget, you need to update the URL and the images URLs. You remember here we have the login pop up, we have the image source. We need to enter a URL here instead, to access a public image. So to do that, I'll go back to my Wordpress dashboard. Go here to media add new media files. Select File, and I'm going to upload the No access and no balance images. Png's perfect. Let's copy URL to clipboard the public URL and put it here. Again, I encourage you to learn basic HTML, CSS, and Javascript. This will help you a lot. Anyway, again, let's get the no balance and paste it. Here we are, Update. Let's now test the tool open. Now simply say for example, Facebook ads again generate and perfect. You can see that tool is working perfectly. If you refresh the page, you'll see minus five deducted for using hook generator. This pop up is built in the microd plug in. It's really perfect. Let's go back to our dashboard, all users, and you can see now we have 90 points. I will test this again, mail generate. Now if we go, it must be 85. Let's refresh and perfect, you can see 85 points. The point system is also integrated and working perfectly. The last step to do is to allow people buy points. You can do this with two options. Here you have bride gateways, You can implement directly within the plug in, like using Paypal, Scrill, whatever stripe. Or you can use, as I do on my website, I use Woo Commerce. So you can install Woo Commerce. I think if you already worked before with Wordpress, I think you know Woocommerce, it's number one. Plug in to sell products on Wordpress. Okay, now go here to products, Add a new product and simply say, for example, 1,000 points. And the idea here mainly is to check this box reward with points and add the number of points. Now whenever someone buys this product, they will get 1,000 points in their balance. That's it, you have the point system and now users can access your tools only if logged in. And whenever they use it, they will consume their credits or their points. Now, going back to my website, if you notice I have here the points balance in the header. I also have this template where I show the costs and this to recharge power points and so on. If you are interested in learning more about building as word press and steal all my codes and so on, you can check my other course, turn word press into AS. I don't know if you're a power member. If you are, you can access this course for free. If not, you can check it on my website. Here You can learn everything in detail how I build my tool system. Don't forget, if you face any problem you have any questions, anything. I'll be here to help you almost every day.