How to Build AI Tools With WordPress in Minutes!

Our step-by-step free guide teaches you how to build AI tools with WordPress using the power of Language Models (ChatGPT in this case) like the one in this image below as an example.

An image stands for Best Free AI Story Generator.

Here is where you can use our AI tool for free.

The Importance of Artificial Technology and AI Tools

Let’s first highlight the importance of Artificial Technology (AI). Our free AI tool reflects the power of Artificial Technology. 
In an ever-evolving age of technology, AI stands as the magic force that could transform every aspect of our lives to levels that we couldn’t have imagined.

Not only does AI enhance productivity but also efficiency and precision in whatever field you want to develop.
For instance, in our field of digital marketing and web technology, AI can play an essential role in the following:

Interaction and Engagement Better With AI Tools

Users will prefer the sites that interact with them directly and generate information that caters to their needs.
Consequently, more leads will land on your pages and be more likely to give their information for long-term relationships.

AI Tools Enhance Organic Traffic

Search engines do their hardest to provide users with what better matches what they search for. 

Monetization

As you get more traffic the chances to convert your leads into subscribers and build your email list are higher.
There are different ways to generate revenue from your emailing list.
Maybe through selling your products and services to your subscribers. Otherwise, you can monetize your site through targeted advertisements.

How to Build AI Tools in a Nutshell

The short story of creating AI tools is as follows:

First, you need a WordPress function (code) that will connect with the language model (ChatGPT) in our case through an API key.

Then you have to create a webpage that will work as a user interface (UI) for the user to enter his prompt in the input field and get the generated output in the input field.

Finally, The language model will process the user input and collect the information to be sent to WordPress to offer to the user as an output through its webpage.

Now let’s go into practical steps;

How AI Tools Work

1-The Language Model (ChatGPT) Role in Creating AI Tools

You will want to go to ChatGPT (as a language model) and ask it to generate the required code to create an AI tool with WordPress about ( what you want).
Then you get the three required codes. HTML – PHP function – Javascript code.

2- Implement the PHP Function

The PHP function connects with the language model through the API key generated by the language model itself.
To implement the PHP function, we need to install and activate the WPCode plugin:
Go to your WordPress dashboard > Plugins > add new Plugin then Install and activate it.

WPCode plugin to implement the PHP function.

The WPCode plugin is where we will implement the PHP function.

How Do We Implement a PHP Function to the WPCode Plugin?

  •  Go to your WordPress dashboard >> at the left sidebar navigate to>> Code snippets>> add a snippet.
  • In the title field name your snippet something like Free AI Tool.
  • The code type should be PHP.
  •  Now it’s time to enter the PHP function in the code text box.

PHP function:

function openai_generate_entrepreneur_story() {
    // Get the topic from the AJAX request
    $prompt = $_POST['prompt'];
    // OpenAI API URL and key
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $api_key = 'sk-XXX'; // Replace with your actual OpenAI API key
    // Headers for the OpenAI API
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    ];
    // Body for the OpenAI API
    $body = [
        'model' => 'gpt-3.5-turbo',
        'messages' => [['role' => 'user', 'content' => $prompt]],
        'temperature' => 0.7
    ];
    // Args for the WordPress HTTP API
    $args = [
        'method' => 'POST',
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120
    ];
    // Send the request
    $response = wp_remote_request($api_url, $args);
    // Handle the response
    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        wp_send_json_error("Something went wrong: $error_message");
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON in API response');
        } elseif (!isset($data['choices'])) {
            wp_send_json_error('API request failed. Response: ' . $body);
        } else {
            wp_send_json_success($data);
        }
    }
    // Always die in functions echoing AJAX content
    wp_die();
}
add_action('wp_ajax_openai_generate_entrepreneur_story', 'openai_generate_entrepreneur_story');
add_action('wp_ajax_nopriv_openai_generate_entrepreneur_story', 'openai_generate_entrepreneur_story');

Now it’s essential to navigate to the insertion section of the plugin to set the location field to run everywhere as shown in the image below.

WPCode
Insertion part

Here is something very crucial to consider about the PHP function. The function is very specific for each user.
So you need to go to your OpenAI account and navigate to API keys to generate your key for this PHP function. 
That is why the Language Model includes this line in the generated PHP function to replace this fake code with yours.

replace your API key
a line from PHP function

This line of code instructs the user to replace the placeholder ‘sk-XXX’ with their OpenAI API key.

How do you get your KPI?

Login to your OpenAI account and if you don’t have an account sign up for one; don’t worry it’s free. 
You can now generate your API key as shown in the image below.

Create your API key image for AI tools to connect with.

Now the last step for the PHP function to work;
You want to navigate to the upper part of the plugin page to activate and update it as in the image below.

Activating and updating the WPCode for AI tools to work.

That is it for the PHP function to be prepared to work well.
That is of course after connection with the tool page as we’re going to demonstrate.

3- Create a New WebPage for the AI Tool

This page is where you’ll implement the HTML code for the AI tool to show to your users as UI (User Interface). 
The AI tool will look like the image at the beginning of this article.

HTML stands for Hypertext Markup Language which is responsible for building the page of the AI tool.
That is where will be the input and output fields and the generate button.

Now you want to copy the HTML code from the ChatGPT page. 
Sometimes you get another CSS code with HTML for further design of your tool page. In either case, copy the generated codes, and on your WordPress webpage add them as HTML codes.

Then save and publish the webpage.
Below are the generated codes.

HTML code:

<div id="entrepreneur-story-tool">
    <input type="text" id="keywords" placeholder="Keywords or Niche..." style="width: 100%;">
    <button id="generate-button" style="width: 100%;">Generate Entrepreneur Story!</button>
    <div id="result-container" style="display: none;">
        <div class="result-wrapper">
            <div class="result-content">
                <textarea id="result" readonly style="width: 100%; height: 500px;"></textarea>
            </div>
            <div class="copy-button-container">
                <button id="copy-button">Copy</button>
            </div>
        </div>
    </div>
    <div id="loading" class="loader" style="display: none;"></div>
</div>

CSS code:

<style>
    /* Basic styles for the entrepreneur story generation tool */
    #entrepreneur-story-tool {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    #keywords {
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    #generate-button {
        display: block;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #generate-button:hover {
        background-color: #2980b9;
    }

    #result-container {
        display: none;
        margin-bottom: 20px;
    }

    .result-wrapper {
        position: relative;
        overflow: hidden;
    }

    .result-content {
        display: flex;
    }

    #result {
        flex: 1;
        padding: 15px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .copy-button-container {
        margin-top: 10px;
        text-align: right;
    }

    #copy-button {
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #copy-button:hover {
        background-color: #2980b9;
    }

    /* CSS for the loader */
    .loader {
        display: block;
        margin: 50px auto;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

4- Connect the AI Tool Page With the PHP Function

Here is where the role of the JavaScript code comes to play.
JavaScript Code:

document.getElementById("generate-button").addEventListener("click", function (e) {
    e.preventDefault();

    var generateButton = document.getElementById("generate-button");

    if (generateButton.disabled) {
        return; // Prevent multiple clicks while content is being generated
    }

    generateButton.disabled = true;

    var keywords = document.getElementById('keywords').value;
    var prompt = "Share a success story of an entrepreneur in the " + keywords + " industry.";
    var loading = document.getElementById('loading');
    var result = document.getElementById('result');
    var resultC = document.getElementById('result-container');

    loading.style.display = 'block';
    result.style.display = 'none'; // Hide result textarea
    resultC.style.display = 'none';

    var formData = new FormData();
    formData.append('action', 'openai_generate_entrepreneur_story');
    formData.append('prompt', prompt);

    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        loading.style.display = 'none';
        if (data.success) {
            result.value = data.data.choices[0].message.content;
            result.style.display = 'block'; // Show result textarea
            resultC.style.display = 'block';
        } else {
            result.value = 'An error occurred: ' + data.data;
            result.style.display = 'block'; // Show result textarea
            resultC.style.display = 'block';
        }
        generateButton.disabled = false;
    })
    .catch(error => {
        loading.style.display = 'none';
        result.value = 'An error occurred: ' + error.message;
        result.style.display = 'block'; // Show result textarea
        resultC.style.display = 'block';
        generateButton.disabled = false;
    });
});

var copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', function () {
    var result = document.getElementById('result');
    result.select();
    document.execCommand('copy');
    alert('Copied to clipboard!');
});

Add the javascript code in the HTML field and save. Just now the tool home page is linked to the PHP function. Then the tool should work properly.

Keep in mind that you should take your users’ feedback seriously. That will help you further optimize your tool to be more user-friendly and always updated.    

What Do You Do to Tap Into Artificial Intelligence?

In a rapidly evolving age of technology, you have to consider some aspects regarding your way of thinking about learning and developing your work and your entire life at a pace that is getting along with this highly evolving age.

Develop Your Way of Thinking

Your traditional way of thinking and learning sure will get you behind. So, you have to open your eyes to AI and new technologies.

That certainly will help get the information accurately, precisely, and quickly. Consequently, that will enhance your productivity and result in whatever you do in your life.

How to Know and Learn About Artificial Technologies

Many institutions offer free and affordable AI courses. Also, you can seek valuable resources on platforms like Coursera and edX.

Connect With Like-Minded People

Connect with AI forums and platforms like GetHub, and AI-focussed communities like social media groups. That way you’ll have a good chance to stay updated with the latest research and tools.

Nothing Works Better Than Practice for Learning

Practice, trial and error, and learning from mistakes are fundamentals for learning and success.
Start with AI small projects and build your expertise as you grow.

It took me a long time to learn and practice to know How to build AI tools. I made a lot of mistakes but finally, the patience and persistence paid off.
 
Also, you need to spend enough time in practice and learning as success takes hard work and dedication.

Artificial Intelligence breaks into the web industry look at our AI website builder in our 10Web review.

Finally our Article in Summary

Introduction to How to Build AI Tools with WordPress:

  • The article provides a step-by-step guide on creating AI tools with WordPress using language models like ChatGPT.
  • Emphasizes the importance of AI in transforming various aspects of life, particularly in digital marketing and web technology.

Benefits of Building AI Tools:

  • AI enhances productivity, efficiency, and precision in different fields.
  • Improves user interaction and engagement on websites, leading to more leads and long-term relationships.
  • Enhances organic traffic by providing better matches on search engines.
  • Creates opportunities for monetization through increased traffic and email list building.

How to Build AI Tools in a Nutshell:

  • Describes the process of creating AI tools in WordPress.
  • Involves obtaining three required codes: HTML, PHP function, and JavaScript code.
  • Highlights the role of ChatGPT in generating the necessary code for the AI tool.

Implementation Steps:

  • Explains practical steps for implementing AI tools with WordPress.
  • Instructs on implementing the PHP function using the WPCode plugin.
  • Provides PHP function code for connecting with ChatGPT via an API key.

Creating the Webpage for the AI Tool:

  • Guides the creation of a new webpage to serve as the user interface (UI) for the AI tool.
  • Instructs on copying and pasting the generated HTML and CSS codes onto the WordPress webpage.

Connecting the AI Tool Page with the PHP Function:

  • Describes the role of JavaScript code in connecting the tool page with the PHP function.
  • Provides JavaScript code for handling user input, making API requests, and displaying results.

Tips and Considerations:

  • Emphasizes the importance of replacing the placeholder API key with the user’s actual OpenAI API key.
  • Recommends obtaining AI-related knowledge through courses, platforms like Coursera and edX, and connecting with AI communities.

Conclusion:

Encourages continuous learning, adaptation to new technologies like AI, and practical experience through small AI projects.

User Feedback:

Advises developers to consider user feedback for optimizing AI tools and ensuring user-friendliness.

Final Thoughts:

Stresses the need for a proactive approach to learning and adapting to AI and new technologies in the rapidly evolving age of technology.

Subscribe for More

    Leave a Comment