DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Build a Voice-Enabled Website with ElevenLabs and WordPress

#ai #tutorial #beginners #webdev

Introduction

Imagine a website that can read articles, answer questions, or narrate product demos in the exact voice of your brand. With today’s text‑to‑speech (TTS) and voice‑cloning tech, that’s no longer a futuristic concept—it’s something you can spin up in a few hours. In this guide we’ll walk through building a voice‑enabled WordPress site using the powerful ElevenLabs API and then deploy the whole thing on Bluehost, the affordable hosting solution that makes WordPress launches painless.

By the end of the tutorial you’ll have:

  • A WordPress plugin that sends any piece of content to ElevenLabs for synthesis.
  • A front‑end widget that plays the generated audio right on the page.
  • A live site hosted on Bluehost, ready for visitors to experience your custom voice AI.

Let’s dive in!

Prerequisites

What you need Why it matters
A WordPress site (fresh install is fine) The plugin we’ll write hooks into WordPress’s content pipeline.
An ElevenLabs API key (sign up here) This gives you access to high‑quality TTS and voice cloning.
A Bluehost account (sign up here) Bluehost’s one‑click WordPress setup and cheap plans let you get the site live in minutes.
Basic knowledge of PHP, JavaScript, and cURL We’ll write a small plugin and a tiny front‑end script.

All the tools are free to try, and the code we’ll write is completely open‑source—feel free to tweak it to fit your brand’s tone.

Setting Up the ElevenLabs API

First, grab an API key from the ElevenLabs dashboard. Once you have it, you can test the endpoint with a simple curl command:

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/voice-id" \
     -H "xi-api-key: YOUR_ELEVENLABS_API_KEY" \
     -H "Content-Type: application/json" \
     -d '{
           "text": "Hello, welcome to our voice‑enabled site!",
           "voice_settings": {
               "stability": 0.75,
               "similarity_boost": 0.85
           }
         }' --output hello.mp3
Enter fullscreen mode Exit fullscreen mode

Replace voice-id with the ID of the voice you want to use (you can create custom clones in the ElevenLabs UI). The command returns an MP3 file (hello.mp3) that you can play locally. If the audio sounds good, you’re ready to integrate it into WordPress.

Creating a WordPress Plugin

We’ll package the functionality as a tiny plugin so you can enable or disable it with a click.

  1. Create the plugin folder

In your WordPress wp-content/plugins directory, create a folder called voice‑tts. Inside it, add a file named voice-tts.php.

  1. Add the plugin header and basic logic 
<?php
/**
 * Plugin Name: Voice TTS for WordPress
 * Description: Sends post content to ElevenLabs and embeds an audio player.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Prevent direct access.
}

// Register a shortcode [voice_tts] that outputs the player.
function vt_tts_shortcode( $atts, $content = null ) {
    $post_id = get_the_ID();
    $text    = get_post_field( 'post_content', $post_id );

    // Call the helper that talks to ElevenLabs.
    $audio_url = vt_generate_audio( $text );

    if ( ! $audio_url ) {
        return '<p>Unable to generate audio at this time.</p>';
    }

    // Simple HTML5 player.
    return sprintf(
        '<audio controls src="%s" style="width:100%%; margin-top:1rem;"></audio>',
        esc_url( $audio_url )
    );
}
add_shortcode( 'voice_tts', 'vt_tts_shortcode' );
Enter fullscreen mode Exit fullscreen mode
  1. Add the API helper 
function vt_generate_audio( $text ) {
    $api_key   = 'YOUR_ELEVENLABS_API_KEY'; // <-- replace!
    $voice_id  = 'YOUR_VOICE_ID';           // <-- replace!
    $endpoint  = "https://api.elevenlabs.io/v1/text-to-speech/{$voice_id}";

    $payload = [
        'text' => wp_strip_all_tags( $text ),
        'voice_settings' => [
            'stability'        => 0.75,
            'similarity_boost'=> 0.85,
        ],
    ];

    $args = [
        'body'    => wp_json_encode( $payload ),
        'headers' => [
            'Content-Type' => 'application/json',
            'xi-api-key'   => $api_key,
        ],
        'timeout' => 30,
    ];

    $response = wp_remote_post( $endpoint, $args );

    if ( is_wp_error( $response ) ) {
        error_log( 'ElevenLabs API error: ' . $response->get_error_message() );
        return false;
    }

    // Store the MP3 in the uploads folder.
    $upload_dir = wp_upload_dir();
    $filename   = 'voice-' . md5( $text ) . '.mp3';
    $file_path  = trailingslashit( $upload_dir['path'] ) . $filename;

    file_put_contents( $file_path, wp_remote_retrieve_body( $response ) );

    // Return the public URL.
    return trailingslashit( $upload_dir['url'] ) . $filename;
}
Enter fullscreen mode Exit fullscreen mode
  1. Activate the plugin

Log in to your WordPress admin, go to Plugins → Installed Plugins, and click Activate next to “Voice TTS for WordPress”.

  1. Use the shortcode

Edit any post or page and insert [voice_tts] wherever you want the player to appear. When the page loads, the plugin will send the post’s content to ElevenLabs, save the MP3, and embed an audio player.

Adding a Front‑End Widget (Optional)

If you prefer a button that reads the current article on demand, add this tiny JavaScript snippet to your theme’s footer.php (or enqueue it properly).

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.createElement('button');
    btn.textContent = '🔊 Listen to this article';
    btn.style = 'margin-top:1rem; padding:0.5rem 1rem;';
    document.querySelector('.entry-content').prepend(btn);

    btn.addEventListener('click', async () => {
        const text = document.querySelector('.entry-content').innerText;
        const response = await fetch('/wp-json/voice-tts/v1/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text })
        });
        const { audioUrl } = await response.json();
        const audio = new Audio(audioUrl);
        audio.play();
    });
});
</script>
Enter fullscreen mode Exit fullscreen mode

You’ll need to expose a tiny REST endpoint in the plugin for this to work (add register_rest_route inside the plugin file). The endpoint would simply call vt_generate_audio() and return the URL as JSON. This approach gives visitors a “click‑to‑listen” experience without cluttering the post with a static player.

Deploying to Bluehost

Now that the code is ready, it’s time to put the site on the web. Bluehost makes this step almost frictionless:

  1. Sign up using the affiliate link: Bluehost – Easy WordPress Hosting.
  2. Choose the Basic plan (perfect for small‑to‑medium traffic).
  3. During the checkout, select “One‑Click WordPress Install”. Bluehost will spin up a fresh WordPress instance in seconds.
  4. Upload your voice‑tts plugin via the WordPress admin (Plugins → Add New → Upload Plugin).
  5. Activate the plugin, insert the shortcode into a post, and you’re live.

Because Bluehost handles server updates, SSL certificates, and automatic backups, you can focus on polishing the voice experience rather than wrestling with server configs. Plus, the pricing is friendly for developers who want a sandbox environment before scaling.

Testing & Tweaking

  • Check the audio – Visit a post with the [voice_tts] shortcode. The player should load almost instantly (ElevenLabs caches the MP3 after the first request).
  • Voice selection – In the plugin file, change $voice_id to any other voice you’ve created in ElevenLabs. Experiment with stability and similarity_boost to get the perfect tone for your brand.
  • Cache control – For high‑traffic sites, you might want to store generated MP3s in a CDN (e.g., Cloudflare) to reduce latency. The plugin already saves files to the wp-content/uploads folder, which can be served directly by Bluehost’s built‑in caching layer.

If you run into “403 Forbidden” errors, double‑check that the API key is correct and that your server’s outbound connections aren’t blocked (Bluehost allows outgoing HTTPS by default).

Wrap‑Up

You now have a fully functional voice‑enabled WordPress site powered by ElevenLabs’s state‑of‑the‑art TTS engine and hosted on the reliable, affordable infrastructure of Bluehost. The combination of a powerful API, a lightweight plugin, and a one‑click hosting provider means you can iterate quickly, test new voices, and even expand the concept to podcasts, e‑learning modules, or interactive chatbots.

Ready to give your visitors a voice they’ll remember?

Happy coding, and enjoy the sound of success!

Top comments (0)