VoiceDeveloper

Posted on Oct 30

How to Create a Voice-Powered WordPress Plugin and Host It

#ai #webdev #beginners #tutorial

Why Voice‑Powered WordPress Plugins Are the Next Big Thing

WordPress powers a huge portion of the web, and the future of content is increasingly audio‑centric. Whether you’re building a podcast platform, a site‑wide accessibility feature, or a conversational bot that answers FAQs on‑the‑fly, adding voice to your WordPress site can dramatically improve engagement and SEO. The good news is that the tech stack is surprisingly lightweight: a few REST calls, a small PHP wrapper, and a reliable hosting plan.

Below, I’ll walk you through creating a simple voice‑powered plugin that turns any post or page into an audio experience. We’ll use ElevenLabs for the cutting‑edge text‑to‑speech engine, and I’ll show you how to deploy the finished plugin on Bluehost—an affordable, beginner‑friendly host that works great with WordPress.

1. Set Up Your Development Environment

Step	What you’ll need	Why
1	Local WordPress install (XAMPP, MAMP, or Docker)	Test the plugin before you push it live.
2	PHP 7.4+ (WordPress 6.4+ recommends PHP 8)	ElevenLabs’ SDK works with PHP 7+.
3	cURL extension enabled	We’ll use raw cURL for the API calls.
4	Text editor or IDE	VS Code, PHPStorm, or even Vim.

If you’re new to WordPress plugin development, the official Plugin Handbook is a great place to start. For this tutorial, we’ll keep the file structure minimal:

wp-content/
└─ plugins/
   └─ voice-ai/
      ├─ voice-ai.php
      ├─ readme.txt
      └─ vendor/      # Composer dependencies (optional)

2. Get an ElevenLabs API Key

ElevenLabs provides state‑of‑the‑art neural TTS models that sound almost human. Sign up at the official site and grab your API key. The free tier is generous for development; you can upgrade later if you need more requests.

# Store the key in a .env file (never commit this to Git!)
echo "ELEVENLABS_API_KEY=your_api_key_here" > .env

We’ll load this key in our plugin:

<?php
/**
 * Plugin Name: Voice AI
 * Description: Adds a “Listen” button that turns post text into speech using ElevenLabs.
 * Version: 1.0
 * Author: Your Name
 */

defined( 'ABSPATH' ) or die();

require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php'; // If you use Composer

$eleven_api_key = getenv('ELEVENLABS_API_KEY');

Tip: If you don’t want to use Composer, you can simply file_get_contents() the key from a .env file, but the above is the cleanest approach.

3. Create the Shortcode That Generates the Audio

We’ll expose a shortcode [voice_ai] that you can place anywhere. The shortcode will render a “Listen” button, fetch the post content, send it to ElevenLabs, and stream the resulting MP3.

/**
 * Register the shortcode.
 */
function voice_ai_shortcode( $atts ) {
    $post_id = get_the_ID();
    $content = apply_filters( 'the_content', get_post_field( 'post_content', $post_id ) );

    // Encode content for the API
    $encoded_content = urlencode( $content );

    // Prepare the API request
    $response = wp_remote_post( 'https://api.elevenlabs.io/v1/text-to-speech/male', [
        'headers' => [
            'xi-api-key' => $eleven_api_key,
            'Content-Type' => 'application/json',
        ],
        'body' => json_encode( [
            'text' => $content,
            'voice_settings' => [
                'stability' => 0.5,
                'similarity_boost' => 0.75,
            ],
        ] ),
    ] );

    if ( is_wp_error( $response ) ) {
        return '<p>Couldn’t generate audio.</p>';
    }

    $audio_url = wp_upload_dir()['baseurl'] . '/voice-ai/' . $post_id . '.mp3';

    // Save the MP3 locally
    $audio_data = wp_remote_retrieve_body( $response );
    wp_mkdir_p( dirname( $audio_url ) );
    file_put_contents( wp_upload_dir()['basedir'] . '/voice-ai/' . $post_id . '.mp3', $audio_data );

    // Render the button
    return sprintf(
        '<button class="voice-ai-btn" data-audio="%s">Listen</button>',
        esc_url( $audio_url )
    );
}
add_shortcode( 'voice_ai', 'voice_ai_shortcode' );

JavaScript to Play the Audio

Add this inline script (or enqueue a separate file) so that clicking the button streams the MP3:

document.addEventListener('click', function (e) {
    if (!e.target.matches('.voice-ai-btn')) return;
    const audioUrl = e.target.dataset.audio;
    const audio = new Audio(audioUrl);
    audio.play();
});

4. Test Locally

Activate the plugin from the WordPress admin panel.
Edit a post, insert [voice_ai] where you want the button.
Publish and view the post. The button should appear, and clicking it should play the audio.

If the audio doesn’t play, check:

Your PHP error logs for cURL issues.
Whether the MP3 is actually saved in the uploads folder (/wp-content/uploads/voice-ai/).

5. Prepare for Deployment

5.1. Clean Up

Remove any debug logs or test code.
Ensure the .env file is excluded from the repository (.gitignore).

5.2. Create a Production‑Ready Zip

zip -r voice-ai.zip voice-ai/

Upload this zip to the WordPress “Plugins” > “Add New” → “Upload Plugin” area.

6. Deploy to Bluehost

Bluehost is an excellent choice for WordPress projects because:

Ease of use: One‑click WordPress installs.
Affordability: Plans start at a few dollars per month.
Performance: SSD storage and free CDN integration.

With Bluehost, you can spin up a new site, install WordPress, and upload your plugin in minutes. No need to manage servers or worry about SSL—Bluehost takes care of that for you.

Pro tip: Use the “Site Tools” dashboard to manage your database, PHP version, and cron jobs—all from a single interface.

7. Advanced Enhancements

Feature	How to Implement
Voice Selection	Add a dropdown that lets users choose between “male” and “female” voices. Pass the chosen voice ID to ElevenLabs.
Caching	Store the MP3 URLs in post meta so you don’t hit the API on every page load.
Accessibility	Add ARIA labels to the button and provide a fallback text link for browsers that can’t play audio.

If you’re comfortable with JavaScript, consider using the ElevenLabs SDK directly in the browser, which reduces server load. However, keep in mind that API keys should stay on the server side for security.

8. Final Thoughts

Building a voice‑powered WordPress plugin is surprisingly straightforward. By leveraging ElevenLabs’ advanced TTS and deploying on a reliable host like Bluehost, you can deliver a polished audio experience without breaking the bank or wrestling with server configs.

Give it a try today: sign up for ElevenLabs at https://try.elevenlabs.io/kr07zfuqn1bp to get your API key, then launch your site on Bluehost via https://bluehost.sjv.io/5k0d52. Happy coding, and may your posts always be heard!

DEV Community