How to Integrate OpenAI with WordPress

Set Up OpenAI API Key

• Go to the OpenAI website and log into your account.

 

• Navigate to the API section to find your secret API key. Ensure you keep this key safe as it will be used for authenticating your WordPress integration.

Install a WordPress Plugin for API Requests

• Log in to your WordPress Admin Dashboard.

 

• Go to the Plugins section and click on 'Add New'. Search for 'WPForms' or 'WP Simple API' plugins that can handle API requests.

 

• Install and activate the chosen plugin.

Configure the Plugin with OpenAI API

• Once the plugin is activated, navigate to the plugin settings page.

 

• Enter your OpenAI API key in the designated area. This will allow the plugin to authenticate requests to OpenAI.

Create a WordPress Page or Post for AI Interaction

• Go to Pages or Posts in your WordPress dashboard and click 'Add New'.

 

• In the content editor, add a form or text area where users can input their queries for OpenAI.

Add Custom Code to Handle OpenAI API Calls

• In your WordPress admin area, navigate to Appearance → Theme Editor. Choose the functions.php file of your active theme for editing.

 

• Add the following PHP code to enable backend processing of OpenAI requests:

function call_openai_api($input_text) {
    $api_key = 'YOUR_OPENAI_API_KEY';
    $url = 'https://api.openai.com/v1/engines/text-davinci-003/completions';
    
    $data = array(
        "prompt" => $input_text,
        "max_tokens" => 100,
        "temperature" => 0.7
    );

    $options = array(
        'http' => array(
            'header'  => "Content-Type: application/json\r\n" .
                         "Authorization: Bearer $api_key\r\n",
            'method'  => 'POST',
            'content' => json_encode($data),
        ),
    );

    $context  = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    
    if ($result === FALSE) { 
        return 'Error handling OpenAI API request.'; 
    }
    
    return json_decode($result, true);
}

Display OpenAI Responses on WordPress

• Within your functions.php file or a custom plugin, write another function to capture and process form submissions. For example:

add_action('wp_ajax_submit_openai_form', 'process_openai_form');
add_action('wp_ajax_nopriv_submit_openai_form', 'process_openai_form');

function process_openai_form() {
    $input_text = $_POST['openai_input'];
    $openai_response = call_openai_api($input_text);

    if (isset($openai_response['choices'][0]['text'])) {
        echo wp_kses_post($openai_response['choices'][0]['text']);
    } else {
        echo 'No valid response from OpenAI.';
    }

    wp_die(); // this is required to terminate immediately and return a proper response
}

• Ensure that the form submission uses Ajax to call this function, and display the API response on the same page without reloading.

Test the Integration

• Preview your WordPress page or post, fill in the form with a test query, and submit it to see the OpenAI interaction in action.

 

• Check if the response is displayed correctly. If any issues arise, revisit each step for configuration errors.

Secure and Optimize

• Ensure your API key is stored securely and not exposed in JavaScript or client-side code.

 

• Consider applying caching techniques for API responses if appropriate, to optimize performance and limit redundant API calls.