Some of the more popular use cases of WordPress AI tools are the integrations of chatbots, generating content and images, and optimizing SEO. Given the vastness of the WordPress ecosystem and its popularity among users and developers, adding such AI-powered functionality to a WordPress website can be quite straightforward. Usually, all you need to do is install a plugin that will do everything for you. But what if the plugin or functionality you are looking for is not directly available? Today, we will take things a step further, by showing you how to actually build a fully working AI-driven tool for your WordPress website, step by step.

What Is an AI Tool for WordPress, and Why Would You Need One?

We will define a WordPress AI tool as an added functionality to your website that uses Artificial Intelligence to generate its results. For example, you could add a title generator on your website that creates search engine-optimized titles for YouTube videos or blog posts, based on certain keywords entered by your website visitors. Or you could add a children's storyteller, a spellchecker, or a book summary generator. Having such a tool freely available on your site could help generate traffic.

Of course, things can get a lot more complex as AI can be used to perform various difficult tasks. For example, you could create a chatbot and have it use your knowledge base to answer the website visitors' questions. Or you could build an AI-powered product recommendation tool for your WordPress store that will suggest products and services based on user behavior, boosting sales or engagement. For example, Amazon recently introduced Rufus, which is a "generative AI-powered conversational shopping assistant designed to help customers save time and make more informed purchase decisions".

AI could also be used to provide an intelligent search functionality on your site with predictive typing and voice search. Another possible use case is in the field of fraud detection and security, where you could integrate AI to protect your site against spam, identify fake signups, and suspicious transactions.

Bottom line is that AI boasts a wealth of possible ways in which it could add value to your website. The purpose of this blog post is to show you the basic principles of building an AI tool in the context of WordPress with a real-life, fully working example. Once you have that foundation, you could go on to create your own integrations regardless of the platform. You are not limited to just WordPress, as you can easily translate that process to any other CMS out there.

Creating an AI-powered Domain Name Generator

We will use AI to extend the functionality of our reseller hosting website HectoHost.com to add a domain name generator. You've probably been there yourself. You are looking to start a new website, but you can't think of a good domain name for it. Our domain name generator will ask the visitor to enter a description of their business or project, and then we will use ChatGPT to come up with suitable domain names. You can test it yourself at the Domains page.

However, if you've done this yourself, you've probably found that, although quite on point in most cases, ChatGPT will often come up with domains that are already taken. That's why we will use the ICDSoft freely available and documented API to check which of the AI-generated domains are available and will only display those to our visitors with a direct option to order. Not only that, but we will also show you how to integrate the tool on any WordPress post or page while utilizing your existing theme style.

We will use AI to do the heavy lifting for us in terms of writing the code for our tool, so you can follow those principles and create your own WordPress AI tool without any programming skills.

Quick Project Overview

The first step when developing a WordPress AI tool is to have a clear idea of how it would operate. Here is a quick overview of how our domain name generator would work:

1. The user enters a description of their idea or business/project.
2. The information entered by the user is sent to ChatGPT to generate a list of domains that best match the provided description.
3. Each of the domains generated by ChatGPT is sent to the ICDSoft API to check its availability.
4. Only the available domains are sent back to the user as results with an option to directly purchase each domain using the custom prices configured in the user's ICDSoft reseller hosting store.

You can learn more about setting up an online web hosting business using the ICDSoft reseller partner program in our blog and on our YouTube channel.

1. Setting Up a Staging Environment

Whenever you are looking to add a new functionality to your WordPress website, modify an existing one, or simply make a design change, it's always best to do it in a testing environment first. This way, your live website will remain intact and fully operational, while you are safely "breaking stuff" at the staging instance. Once you are fully ready and have ensured that everything works as expected, you can then transfer your changes over to the live site.

Back in the day, this entire process used to involve a lot of manual work, as you would have to copy the entire live WordPress website to another location, set up a new database and update the configuration file, apply your changes, and then recreate them at the live website or move the staging instance in place of the live one. Fortunately for our customers at ICDSoft, those days are long gone.

If you are hosted with us, you can use our freely available WordPress Manager included with all of our hosting plans. It allows you to back up your entire WordPress installation and even set up a staging instance with just a single click. Once you are done working on the staging site, the WordPress Manager allows you to transfer all your changes to the live site using the "Set as live" option.

Once you've created a new subdomain for your testing environment, you can use the WordPress Manager in the Control Panel to create a staging instance of your live website there. You can watch the video below for a quick step-by-step walkthrough.

2. Configuring Access to the AI API

As per our definition of a WordPress AI tool, we will use Artificial Intelligence to generate results, so we would need a way of feeding it data and then serving the output to our users. In the world of web development, this is done through the use of API calls. API calls are like communication channels between different services. For example, a weather app makes API calls to a weather station to obtain information about the current temperature and wind direction.

So our WordPress website will make API calls to an AI chatbot. There are a number of publicly available chatbots you could use. All of the tech giants have released their own language models, and most of them provide API access.

ChatGPT is perhaps the most powerful and certainly most popular conversational AI available to the public. It can answer complex questions, write content or even programming code, brainstorm ideas and perform various tasks, such as code debugging or language translations.

Google's Gemini is another quite capable AI chatbot similar to ChatGPT. While ChatGPT is generally better for text-based tasks and doing research, Gemini can be used to create images even with its free plan.

Both Gemini and ChatGPT's web interfaces are free for general use. You just need to sign up, and you can enter your questions or prompts to get the AI's response. However, access to the API usually requires a subscription.

In our case, we will use ChatGPT, but you can get similar results with Gemini. It's up to you to decide which service is best for you in terms of quality of results and cost. The Gemini API has a free tier that allows you to use the API with lower rate limits for testing purposes. For commercial use, you will probably need to scale things up a bit and move to one of their paid plans.

As of now, OpenAI does not offer a completely free tier for API access to ChatGPT or other models. However, they provide trial credits for new users.

The good news is that both services provide a "pay-as-you-go" type of plan, so you won't be charged a fixed rate; you will only pay as much as you use. The charges depend on the number of tokens (words/characters) you process. This is a great entry point for developing a WordPress AI tool as you can monitor your usage in real time and see if it makes sense for you financially. Obviously, if you release a tool that's free to use like our domain name generator, you want to make sure it does not go overboard and incur significant costs. You can configure hard limits and soft limits to prevent unexpected charges.

In terms of pricing with ChatGPT, access to the GPT-3.5 language model via API is significantly cheaper than GPT-4, so that's the one we will use, and the results are still quite good.

Getting an OpenAI API key is a straightforward process. Here are the steps:

1. Create an OpenAI Account

• Go to OpenAI's website.
• Sign up using your email address, or log in if you already have an account.

2. Access the API Key Section

Once logged in to your OpenAI account, navigate to the API Keys section.

3. Generate an API Key

In the API Keys section, click the + Create new secret key button. A new API key will be generated and displayed.

3. Configuring Access to the ICDSoft API

Now that you have access to the ChatGPT API, the next step is to set up your access to the ICDSoft API, which we will use in order to check the availability of each domain suggested by the AI.

The next step is to log in to the Account Panel using your login credentials. Since the ICDSoft API is designed to allow resellers to have access to information related to their hosting services, you would need to set up an online store in order to obtain an API key. The online store is where you will set up custom prices for all the available domain names that you can resell at a profit. This will allow us to not only show visitors a list of available domain names suggested by the AI, but also give them the option to register them directly.

Navigate to the Online Stores menu on the left side and click on Management. There, press the "Create a new store" button. Enter your brand name, hosted storefont address, currency, and contact email.

When you press the Save button, your online store will be created. The interface will directly load the Main Settings menu of your online store, and that's where you can find your API (Authentication) key at the bottom of the page.

For the sake of keeping our example as easy-to-understand as possible, we will switch the API security toggle to "Authentication key". The HMAC security is more complex, because it involves the addition of an HMAC secret in combination with the API key. Armed with the ICDSoft API key and the key for ChatGPT's API, we are ready to move on to the next step and configure our domain generator script.

4. Installing the ICDSoft Reseller Store Plugin for WordPress

In order for our domain name generator script to provide visitors the option of ordering the available domains, you would have to install the ICDSoft Reseller Store plugin for WordPress. The plugin is available at the official WordPress repository, so all you need to do is go to your WordPress Dashboard > Plugins > Add New Plugin, and make a search for "ICDSoft Reseller Store" > Install Now > Activate.

With the ICDSoft Reseller Store plugin installed, navigate to its Settings menu that will show up on the panel on the left side. This will load up the configuration wizard. Since we've already created an ICDSoft reseller account, select the "I have an account" option.

Now, enter your ICDSoft API key under the "API Settings" section on the next page > Authentication key. Make sure to disable the Test mode at the bottom, and press the Save Changes button.

5. The Domain Name Generator Script for WordPress

Here is a quick summary of our WordPress AI tool's workflow. In short, it will take the keywords entered by the website visitor as input, send them to the ChatGPT server in an AJAX request, then the generated domain ideas are passed to the ICDSoft API to check their availability. Finally, the available domains are shown as results. We will use WordPress' built-in AJAX functionality to seamlessly display the results on the page without a refresh.

Here is the complete source code of our script (you can download it at https://www.hectohost.com/domain-name-generator-code.txt):

<?php

define('CHATGPT_KEY', 'REPLACE-WITH-YOUR-CHATGPT-KEY');
define('ICDSOFT_KEY', 'REPLACE-WITH-YOUR-ICDSOFT-KEY');
define('STORE_URL', 'REPLACE-WITH-URL-OF-YOUR-RESELLER-STORE');

function my_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');

/**
 * Create a shortcode to handle the domain AI search form submission and display results. 
 */

function domain_name_generator_shortcode() {
    ob_start();
    ?>
    <form id="domain-generator-form">
        <label for="keywords">Enter keywords to find available domains that best match your brand:</label><br>
        <input type="text" id="keywords" name="keywords" required>
        <input type="submit" value="AI Domain Search">
    </form>
<div id="domain-results"></div>
    <script>
        jQuery(document).ready(function($) {
            $('#domain-generator-form').on('submit', function(e) {
                e.preventDefault();
                $('#domain-results').html('<p>Generating domain ideas...</p>');
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    method: 'POST',
                    data: {
                        action: 'generate_domains',
                        keywords: $('#keywords').val(),
                    },
                    success: function(response) {
                          console.log(response); // Check the structure of the response in the console
                        $('#domain-results').html(response.data);
                    },
                    error: function() {
                        $('#domain-results').html('<p>There was an error. Please try again.</p>');
                    }
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}

add_shortcode('domain_name_generator', 'domain_name_generator_shortcode');

function handle_generate_domains() {
    // Get user keywords
    $keywords = sanitize_text_field($_POST['keywords']);
    if (empty($keywords)) {
        wp_send_json_error('Please provide keywords.');
        return;
    }

    // Step 1: Generate domain ideas using ChatGPT
    $chatgpt_api_key = CHATGPT_KEY;
$chatgpt_response = wp_remote_post('https://api.openai.com/v1/chat/completions', [
    'headers' => [
        'Authorization' => 'Bearer ' . $chatgpt_api_key,
        'Content-Type'  => 'application/json',
    ],
    'body' => json_encode([
        'model' => 'gpt-3.5-turbo',
        'messages' => [
            ['role' => 'system', 'content' => 'Generate a list of domain names related to the topic: ' . $keywords],
            ['role' => 'user', 'content' => 'Please provide 10 creative domain names based on the following keywords: ' . $keywords ],
              ],
          'max_tokens' => 150,
    ]),
]);

if (is_wp_error($chatgpt_response)) {
    wp_send_json_error('Failed to communicate with ChatGPT API.');
    return;
}

$chatgpt_body = json_decode(wp_remote_retrieve_body($chatgpt_response), true);

// Debugging: Log the full response from ChatGPT
if (defined('WP_DEBUG') && WP_DEBUG) {
    error_log(print_r($chatgpt_body, true));
}

if (empty($chatgpt_body['choices'][0]['message']['content'])) {
    wp_send_json_error('No domain ideas generated. Full response: ' . print_r($chatgpt_body, true));
    return;
}

// Extract the domain ideas

if (isset($chatgpt_body['choices'][0]['message']['content'])) {
    // Extract domain names from the response
    $response_content = $chatgpt_body['choices'][0]['message']['content'];
    
    // Split the response into an array by line, remove any numbers at the beginning and extra spaces
    $domain_ideas = array_map(function($line) {
        // Remove numbers and extra spaces
        return trim(preg_replace('/^\d+\.\s*/', '', $line));
    }, explode("\n", $response_content));

    // Remove any empty values from the array
    $domain_ideas = array_filter($domain_ideas, function($domain) {
        return !empty($domain); // Keep only non-empty domains
    });

    // Reindex the array to fix any gaps in the indexes
    $domain_ideas = array_values($domain_ideas);
  
}
    
    // Step 2: Check availability with ICDSoft API
    $icdsoft_api_key = ICDSOFT_KEY;
    $icdsoft_api_url = 'https://api.suresupport.com/domain-check';
    $available_domains = []; //initialize the array that would contain our list of avail domains

    foreach ($domain_ideas as $domain) {
        $domain = trim($domain);
        if (empty($domain)) {
            continue;
        }
      
          error_log('clean domain passed to icd api: ' . print_r($domain, true));

// Prepare the data to be sent in the request
    $post_data = [
        "domain" => $domain,
        "auth_token" => $icdsoft_api_key    
    ];

    // Set up the arguments for wp_remote_post
    $args = [
        'body'        => json_encode($post_data),  // Send data as JSON
        'headers'     => [
            'Content-Type' => 'application/json',  // Set the header to specify JSON format
        ],
        'timeout'     => 15,  // Timeout in seconds
        'httpversion' => '1.1',  // Use HTTP 1.1
        'sslverify'   => false, // Disable SSL verification for development, enable in production
    ];

    // Send the request using wp_remote_post
   $icdsoft_response = wp_remote_post($icdsoft_api_url, $args);

                error_log('response from icd api: ' . print_r($icdsoft_response, true));

      
        if (!is_wp_error($icdsoft_response)) {
            $icdsoft_body = json_decode(wp_remote_retrieve_body($icdsoft_response), true);
          if (isset($icdsoft_body['data']['available']) && $icdsoft_body['data']['available'] == 1) {
                           // error_log('this domain is avail: ' . $domain);

                $available_domains[] = $domain;
            }
        }
    }

    // Step 3: Display results
    if (empty($available_domains)) {
        wp_send_json_success('<p>No available domains were found based on your keywords.</p>');
    } else {
        $output = '<h2>Available Domain Names:</h2><ul>';
        foreach ($available_domains as $domain) {
            $order_url = STORE_URL . '/hostingorder/?domain=' . urlencode($domain);
            $output .= '<li>' . esc_html($domain) . ' is available!' . ' <a href="' . $order_url . '"target="_blank">Order</a></li>';
        }
        $output .= '</ul>';
        wp_send_json_success($output);
    }
}

add_action('wp_ajax_generate_domains', 'handle_generate_domains');
add_action('wp_ajax_nopriv_generate_domains', 'handle_generate_domains');

All you need to do is enter your API keys for ChatGPT and ICDSoft, and the URL of your reseller store at the start of the script:

define('CHATGPT_KEY', 'REPLACE-WITH-YOUR-CHATGPT-KEY');
define('ICDSOFT_KEY', 'REPLACE-WITH-YOUR-ICDSOFT-KEY');
define('STORE_URL', 'REPLACE-WITH-URL-OF-YOUR-RESELLER-STORE');

The URL of your store is set when you first configure your online store via the ICDSoft Account Panel.

Here is a quick explanation of the main parts of the code:

<form id="domain-generator-form">
        <label for="keywords">Enter keywords to find available domains that best match your brand:</label><br>
        <input type="text" id="keywords" name="keywords" required>
        <input type="submit" value="AI Domain Search">
    </form>

This part creates the input form for our website visitors, who will be required to enter a description of their idea or business.

<script>
        jQuery(document).ready(function($) {
            $('#domain-generator-form').on('submit', function(e) {
                e.preventDefault();
                $('#domain-results').html('<p>Generating domain ideas...</p>');
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    method: 'POST',
                    data: {
                        action: 'generate_domains',
                        keywords: $('#keywords').val(),
                    },
                    success: function(response) {
                        $('#domain-results').html(response.data);
                    },
                    error: function() {
                        $('#domain-results').html('<p>There was an error. Please try again.</p>');
                    }
                });
            });
        });
    </script>

This is where we use WordPress' built-in AJAX functionality to send the domain name description (keywords) entered by the user over to the server for processing. As explained in our workflow, the server-side processing consists of sending the keywords to ChatGPT to get a list of domain names matching our description, and then check their availability via the ICDSoft API. The last segment displays the results or shows an error in case we cannot obtain any results.

The following line is very important:

add_shortcode('domain_name_generator', 'domain_name_generator_shortcode');

It creates a shortcode named 'domain_name_generator'. It allows us to place our domain name generator on any WordPress post or page simply by adding that shortcode in an HTML widget.

    // Step 1: Generate domain ideas using ChatGPT
    $chatgpt_api_key = CHATGPT_KEY;
$chatgpt_response = wp_remote_post('https://api.openai.com/v1/chat/completions', [
    'headers' => [
        'Authorization' => 'Bearer ' . $chatgpt_api_key,
        'Content-Type'  => 'application/json',
    ],
    'body' => json_encode([
        'model' => 'gpt-3.5-turbo',
        'messages' => [
            ['role' => 'system', 'content' => 'Generate a list of domain names related to the topic: ' . $keywords],
            ['role' => 'user', 'content' => 'Please provide 10 creative domain names based on the following keywords: ' . $keywords ],
              ],
          'max_tokens' => 150,
    ]),
]);

This part submits our keywords to the OpenAI API. It's important to take note of their endpoint - https://api.openai.com/v1/chat/completions. You can see that we are using the gpt-3.5-turbo language model, which is much more cost-effective compared to GPT-4, and yet it still produces great results.

['role' => 'system', 'content' => 'Generate a list of domain names related to the topic: ' . $keywords],

This line tells ChatGPT what we want it to do - "Generate a list of domain names related to our keyword. "

The remainder of the code sends the generated domains (one by one) over to the ICDSoft API to do a WHOIS check on their availability. Only the available domains are then displayed as results with a link to register.

As we pointed out previously, ChatGPT can be used to perform complex tasks, and that includes creating entire WordPress AI tools and scripts such as this one. Of course, the code it generates probably won't work right away, and you will have to tinker with it and modify it here and there, but overall, it does a pretty good job.

6. Integrating Our AI Tool with WordPress

Since our domain generator tool for WordPress works as a shortcode, allowing you to easily add it anywhere you want, the code provided in the previous step should be added to your theme's functions.php file. However, if you add this code directly to the functions.php file of your active theme, it will get overwritten every time you update the theme, essentially removing that code and causing our WordPress AI tool to no longer work.

To avoid this problem, we will use the so-called WordPress "child theme". A child theme inherits all the functionality, features, and styles of its parent theme, while giving you the option to apply customizations that won't be overwritten when the original (parent) theme is updated.

The way a child theme works is by having its own functions.php file where you apply your custom code and also load the functions.php and style.css files of the original (parent) theme. In that way, when the parent theme is updated, its functions.php file gets overwritten (with all the new stuff part of the update), but your child theme's functions.php remains intact.

6.1 Setting Up a WordPress Child Theme

Here are the steps to follow in order to create a child theme for your WordPress installation.

1. Check the name of your current active theme. This information is available at your WordPress Dashboard > Appearance > Themes. Look for the one labelled as "Active".

• 2. Using the File Manager at your web host or via FTP, navigate to the folder where your WordPress installation resides. Once there, go to the wp-content > themes folder, and create a new folder for your child theme (e.g., parent-theme-name-child). Since we are using the Astra theme, we will create a new folder named astra-child.

• 3. Create a style.css file in the child theme folder and add the following code in it:

/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com
 Description:  A child theme for the Astra theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com
 Template:     astra
 Version:      1.0.0
*/
/* Custom styles go below */

Of course, you should replace the Theme Name, URI and Template to match those of your theme. The important part is that you can place your own CSS code below. Again, it would not be overwritten in the event of a parent theme update.

• 4. Create a file named functions.php under your child theme's folder (e.g. /astra-child/functions.php), and add the entire source code of our domain generator script provided in the previous chapter.

6.2 Activating our WordPress Child Theme

Once you've created your WordPress child theme with the actual functions.php and style.css files inside its folder, the next step is to actually switch the active theme for your WordPress installation to the child theme. This is done via the Appearance > Themes menu, where you need to press the Activate button next to the child theme that will appear on the list of available themes.

6.3 Adding the Domain Name Generator to Our WordPress Page

Now that we have set our child theme and added our domain name generator code to its functions.php file, we can safely proceed to add the actual WordPress AI tool to our website. Since we configured our AI tool to work as a shortcode, all you need to do is add the [domain_name_generator] shortcode on your WordPress post or page, and it will magically appear. This will work regardless of the builder you are using - whether it's Divi, Elementor, Gutenberg, or any other WordPress website builder.

In our case, we have created a new page named Domains and added a header copied from one of the existing pages and just modified its text and image. We're using Elementor, so below the header we've placed a Heading element and set its Title to "Discover Domain Names That Tell Your Brand’s Story". In order to have the Heading element at the center, we've changed its Alignment to Center via the Style tab, and we added some padding on the Left and Right sides via the Advanced tab.

The last step is to add our actual WordPress AI tool, and that's done by placing an HTML element (press the "+" sign at the upper-left corner and then search for "html").

Inside that HTML Code element, we just need to enter our shortcode:

[domain_name_generator]

The form will not appear while you are editing the page. It will only show up on our live website after publishing the changes and while previewing the actual page.

Once you publish that page, the domain name generator should automatically show up. Provided that your ChatGPT and ICDSoft keys are correct, it should generate valid results for the domain ideas you and your visitors are looking for.

If everything works as expected, you can complete the process by pushing the changes from the staging WordPress installation over to your live site. For ICDSoft customers, this is as easy as pressing the "Set as live" button next to the staging instance at the WordPress Manager.

Conclusion

Artificial Intelligence is transforming how we interact with technology, and integrating its capabilities into your WordPress site can set you apart from the competition. By combining the power of AI with WordPress, as demonstrated with the domain name generator example, you can create dynamic, user-focused tools that enhance the visitor experience, improve engagement, and potentially boost revenue.

The possibilities for AI in WordPress are vast, ranging from intelligent search features to chatbots, fraud detection, and beyond. With the foundational knowledge provided here, you can expand your horizons to develop innovative solutions tailored to your audience’s needs—not only in WordPress, but in any digital environment.