Create Custom Tools on WordPress

In this lecture, I’ll take you through the process of creating a custom tool and publishing it on your WordPress site as I did with my Tools.

We’ll cover the steps from understanding the Tool structure to integrating it with WordPress functionalities, including user access and point management.

And to make things simple, we will go with a real example from my tools. And I will show you how I built the YouTube Title Generator Tool.

Understanding the Tool Structure

Look at this picture:

You can see two main parts:

  1. 🖥️ Front End: Think of this as the face of our tool. It’s our WordPress site where people come and use the tool. In our case, this page.
  2. 🔧 Back End: This is like the engine room. It’s where our tool checks the user balance, checks if logged in, generates titles, deducts points, and returns the result back to the user.

The OpenAI API is used to generate YouTube Titles based on our prompt. We will talk more about this later.

Let’s Get into this step by step!

Step 1: Create The Basic Backend Function

We will start with the backend, and we will create the function that generates YouTube titles with the help of the OpenAI API.

Here is what we will do:

  1. Navigate to the WP Code Plugin settings and create a new PHP snippet.
  2. Create a Basic Function that returns a list of titles.
  3. Get an API Key from OpenAI.
  4. Create an Updated version of the function to call OpenAI’s API to generate titles.
  5. Test The Functions Externally.

Let’s Do it!

Demo Video (Create the basic function and test with API Client, get API key, and mention that you need an active subscription based on token pricing. The update and test)

[Test Here Basic]

[Test Here OpenAI Generate]

Step 2: Creating the UI

Great! So now we have the backend function that generates titles and returns the JSON response. It is time to build a UI for our tool, The Frontend!

This includes two steps:

  1. Design and Create the Tool UI with HTML, CSS, and JS
  2. Publish the tool on our WordPress Site.

Let’s Do it:

Demo Video: Create the tool, test locally, and publish on WordPress

[Get The Code Here]

[Test Here]

Step 3: Handling Non-Logged-In Users

Ok, now we have our tool published and working properly. we want to allow only Logged-in users to use it.

Yeah, we learned before, that you can hide from non-logged-in users. But this will not protect our tool from some techy users who will hijack your tool with some techniques, so it is better to check if the user is logged in from the backend function.

It is super simple, you just add this line of code:

if (!is_user_logged_in()) {
       return;
    }

Demo Video:

Show how to add the function, and how it is not working. you can ad custom message box as I do on my website. (show them) I will give you all my codes in the next lecture.

Step 4: Checking User Points

Now it is time to

  • Before executing the title generation function, check if the user has enough points.

Code to Check Points:

Demo Video: Implement and test.

Step 5: Deducting Points

In the next lecture, I will go in deep in my system and give you my codes to get the full user experience I have on my site.