In this article, I’ll demonstrate how to build an AI tool using WordPress, similar to the one shown here!
Unlocking the Tool’s Structure
Building AI tools on WordPress is a straightforward process involving three key steps. Here’s a comprehensive breakdown of how to create this tool:
- WordPress Page Creation: Begin by crafting a new page within your WordPress site dedicated to hosting the AI tool. This page serves as the user interface for engaging with the tool.
- HTML Code Addition: Incorporate essential HTML code to establish the foundation of the tool page. This code kickstarts communication with the OpenAI API.
- Integration of a WordPress Function: Integrate a custom WordPress function responsible for receiving user input from the HTML form and transmitting it to the OpenAI API. This function acts as the vital link facilitating seamless communication between your website and OpenAI.
- Connection to OpenAI API: The WordPress function establishes a connection with OpenAI’s API to generate text based on the user’s prompt.”
Getting your OpenAI API Key:
To utilize any of OpenAI’s models, you’ll need to acquire an API access key. Follow these steps:
- Visit OpenAI’s API page and click the ‘Signup’ button.
- Create an account and verify your email to complete the registration.
- After logging in, locate your API keys in the account dashboard.”
Step 1: Implement the API Communication Function
In this initial phase, we will integrate the PHP function responsible for facilitating communication with the OpenAI API. To achieve this, we will leverage the WPCode plugin within the WordPress environment.
Integrating the OpenAI API Call
After activating the plugin, follow these instructions to include your API call:
- In your WordPress dashboard, go to ‘Code Snippets > Add New’.
- Provide a name, such as ‘OpenAI API Call’, in the ‘Title’ field.
- Select ‘PHP’ as the code type.
- In the ‘Code’ text box, insert your PHP code. Here’s a sample structure for your reference
function openai_generate_text() {
// 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_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');Step 2: Building the Tool Page
With our API function prepared, it’s time to craft a new page within our WordPress site to host our AI tool.
To insert your own HTML code within Elementor, follow these simple steps:
- While in the Elementor editor, navigate to the left sidebar, where you’ll find a range of icons. Click on the icon resembling a grid or matrix.
- A list of available widgets will appear. Locate the ‘HTML’ widget in this list.
<div id="text-generation-tool" style="text-align: center; max-width: 600px; margin: auto; padding: 20px;">
<input type="text" id="topic" placeholder="Your Topic..." style="margin-bottom: 10px; width: 100%;">
<input type="text" id="target" placeholder="Your Target Audience or Interest..." style="margin-bottom: 20px; width: 100%;">
<button id="generate-button">Generate YouTube Title!</button>
<div id="result-container" style="display: none;">
<div class="result-wrapper">
<div class="result-content">
<textarea id="result" readonly></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>
<style>
/* Basic styles for the text generation tool */
#text-generation-tool {
width: 100%;
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px; /* Adjust this value for more or less space */
padding: 20px; /* Adjust this value for padding around the entire tool */
}
#topic {
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
#generate-button {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border: none;
border-radius: 5px;
color: #fff;
margin-top: 10px;
background-color: #3498db;
cursor: pointer;
transition: background-color 0.3s ease;
}
#generate-button:hover {
background-color: #2980b9;
}
#result-container {
display: none;
margin-bottom: 30px;
}
.result-wrapper {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.result-content {
display: flex;
}
#result {
flex: 1;
height: 400px;
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>
Step 3: Linking the Page to the API Function
With our API function and tool page in place, the next step is to establish a connection. This is where JavaScript (JS) code comes into play.
Integrating the JavaScript Code
Below is the essential JavaScript code for integration
<script>
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 topic = document.getElementById('topic').value;
var target = document.getElementById('target').value;
var prompt = "Create 3 engaging and clear YouTube titles in Swahili, each focusing on" + topic + " Ensure the titles are easy to understand, directly related to the content, and crafted to captivate" + target + "Avoid ambiguity and aim for titles that are informative, intriguing, and resonate with viewers interested";
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_text');
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';
generateButton.disabled = false;
} 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!');
});
</script>Emphasize the Prompt: Your Attention Should Be Here
var prompt = "Create 3 engaging and clear YouTube titles in Swahili, each focusing on" + topic + " Ensure the titles are easy to understand, directly related to the content, and crafted to captivate" + target + "Avoid ambiguity and aim for titles that are informative, intriguing, and resonate with viewers interested";