DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

Build a Voice-Enabled Website with ElevenLabs and WordPress

#ai #tutorial #beginners #webdev

Why Add Voice to Your WordPress Site?

Voice AI is moving from novelty to necessity. Users love the convenience of hearing content read aloud, and creators love the ability to generate natural‑sounding audio from their own text. By pairing ElevenLabs’s state‑of‑the‑art text‑to‑speech (TTS) engine with a WordPress site, you can give visitors the option to listen to blog posts, product descriptions, or even custom greetings—all without hiring a voice actor.

In this guide we’ll walk through:

  1. Getting an ElevenLabs API key
  2. Building a tiny WordPress plugin that calls the API
  3. Deploying the site on an affordable, hassle‑free host (Bluehost)

By the end, you’ll have a fully functional voice‑enabled site you can showcase to clients or use for your own blog.

1. Grab an ElevenLabs API Key

ElevenLabs offers a generous free tier that lets you generate up to 10 minutes of audio per month. Sign up through their affiliate link to get a key instantly:

ElevenLabs API – try it now

Once you’re logged in:

  1. Navigate to Dashboard → API Keys.
  2. Click Create New Key, give it a name (e.g., “WP‑Voice”), and copy the string.
  3. Store the key safely – you’ll need it in the plugin code.

2. Create a Minimal WordPress Plugin

The plugin will expose a shortcode [voice]Your text here[/voice]. When WordPress renders the shortcode it will call ElevenLabs, retrieve an MP3 file, and embed an HTML5 audio player.

2.1 Plugin Boilerplate

Create a folder called voice‑tts inside wp-content/plugins/ and add a file voice-tts.php:

<?php
/**
 * Plugin Name: Voice TTS for WordPress
 * Description: Convert post content to speech using ElevenLabs.
 * Version: 1.0
 * Author: Your Name
 */

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

// Register shortcode.
add_shortcode( 'voice', 'vtts_shortcode_handler' );

function vtts_shortcode_handler( $atts, $content = '' ) {
    // Sanitize input.
    $text = sanitize_text_field( $content );

    // Bail if empty.
    if ( empty( $text ) ) {
        return '';
    }

    // Call ElevenLabs API.
    $audio_url = vtts_get_audio_url( $text );

    if ( ! $audio_url ) {
        return '<p><em>Audio generation failed.</em></p>';
    }

    // Return audio player markup.
    return sprintf(
        '<audio controls preload="none" style="width:100%%;">
            <source src="%s" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>',
        esc_url( $audio_url )
    );
}

/**
 * Send a request to ElevenLabs and return a temporary URL to the MP3.
 */
function vtts_get_audio_url( $text ) {
    $api_key = defined( 'VTTS_ELEVENLABS_KEY' ) ? VTTS_ELEVENLABS_KEY : '';
    if ( empty( $api_key ) ) {
        error_log( 'ElevenLabs API key not set.' );
        return false;
    }

    $endpoint = 'https://api.elevenlabs.io/v1/text-to-speech/EXAMPLE_VOICE_ID';

    $payload = [
        'text' => $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,
        'stream'      => true,
        'filename'    => null,
    ];

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

    if ( is_wp_error( $response ) ) {
        error_log( 'ElevenLabs request 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_handle = fopen( $file_path, 'wb' );
    if ( $file_handle ) {
        fwrite( $file_handle, wp_remote_retrieve_body( $response ) );
        fclose( $file_handle );
        return trailingslashit( $upload_dir['url'] ) . $filename;
    }

    return false;
}
Enter fullscreen mode Exit fullscreen mode

What you need to tweak

Item How to set
ELEVENLABS_KEY Add define('VTTS_ELEVENLABS_KEY', 'YOUR_API_KEY'); to your wp-config.php.
VOICE_ID Replace EXAMPLE_VOICE_ID with the voice ID you want (e.g., 21m00Tcm4TlvDq8ikWAM). Find it in the ElevenLabs dashboard under Voice Lab → Voices.

2.2 Using the Shortcode

Edit any post or page and wrap the text you want spoken:

[voice]Welcome to our new product line! Explore the features and let us guide you through the experience.[/voice]
Enter fullscreen mode Exit fullscreen mode

WordPress will replace the shortcode with an audio player that streams the generated MP3.

3. Test Locally with cURL (Optional)

If you prefer to verify the API before wiring it into WordPress, a quick curl call works:

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/21m00Tcm4TlvDq8ikWAM" \
     -H "Content-Type: application/json" \
     -H "xi-api-key: YOUR_API_KEY" \
     -d '{
           "text": "Hello, this is a test from ElevenLabs!",
           "voice_settings": {
               "stability": 0.75,
               "similarity_boost": 0.85
           }
         }' \
     --output hello.mp3
Enter fullscreen mode Exit fullscreen mode

Open hello.mp3 in any player – you should hear a crisp, human‑like voice.

4. Deploy on Bluehost – The Easy, Affordable Way

When it comes to getting your voice‑enabled WordPress site live, Bluehost offers a one‑click WordPress install, automatic SSL, and a generous bandwidth allowance that’s perfect for serving audio files.

  • Quick setup – spin up a server in minutes with the “WordPress” plan.
  • Built‑in caching – reduces latency for audio playback.
  • Affordable pricing – starts under $5/month for the first term.

Grab a Bluehost account through the affiliate link and have your site up and running without fiddling with server configs:

Bluehost – Get Started Here

4.1 Deploy Steps

  1. Sign up using the link above and choose the “Basic” WordPress plan.
  2. Select a domain (or use a free sub‑domain for testing).
  3. Log in to the Bluehost cPanel, click WordPress → Install.
  4. Upload the voice‑tts folder via the file manager or an FTP client.
  5. Activate the plugin from the WordPress dashboard → Plugins.
  6. Add your API key to wp-config.php as described earlier.

That’s it—your site now serves both written and spoken content to visitors around the globe.

5. Fine‑Tuning the Voice Experience

ElevenLabs isn’t just “read this text aloud.” You can customize:

Parameter Description
stability Controls how steady the voice sounds (0 = more expressive, 1 = more stable).
similarity_boost Adjusts how closely the output matches the chosen voice’s timbre.
voice_id Choose from a library of pre‑trained voices, or upload your own clone for brand consistency.

Experiment by passing different values in the $payload array inside vtts_get_audio_url(). For example, a more conversational tone might use:

'voice_settings' => [
    'stability' => 0.45,
    'similarity_boost' => 0.65
]
Enter fullscreen mode Exit fullscreen mode

6. Next Steps & Ideas

  • Dynamic post‑to‑audio: Hook into the_content filter to automatically add a player to every post.
  • User‑generated voice clones: Let logged‑in users upload a short voice sample and generate a custom voice ID via ElevenLabs’ cloning API (requires a paid plan).
  • Audio SEO: Add <meta> tags for the generated MP3 URLs so Google can index the spoken version.

All of these can be built on top of the simple plugin we created, and Bluehost’s managed environment will keep things stable as traffic grows.

7. Wrap‑Up

You now have a functional, voice‑enabled WordPress site powered by ElevenLabs and hosted on Bluehost. The combination gives you:

  • High‑quality, AI‑generated speech without the overhead of recording studios.
  • A low‑maintenance hosting platform that handles SSL, backups, and scaling for you.

Give it a spin, tweak the voice settings, and watch how much longer visitors stay on your pages when they can listen instead of read.

Ready to bring your content to life?

Start generating natural‑sounding audio with ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp

And launch your voice‑enabled site on the simplest, most affordable host out there: https://bluehost.sjv.io/5k0d52

Happy coding!

Top comments (0)