Build a Voice-Enabled Website with ElevenLabs and WordPress

Why Voice‑Enabled Sites Are the Next Big Thing

If you’ve ever clicked “play” on a video or read an article out loud with a browser extension, you already know how powerful text‑to‑speech (TTS) can be. Adding a voice layer to a WordPress site turns static content into an interactive experience—think “listen to this blog post while you’re cooking” or “let your product catalog read itself to the user”.

In this guide we’ll build a simple voice‑enabled WordPress site using ElevenLabs for realistic TTS and Bluehost for hassle‑free hosting. By the end you’ll have a WordPress page that can generate on‑the‑fly audio from any post, and a deployment workflow that works for beginners and pros alike.

What You’ll Need

Pro tip: If you don’t have a host yet, I’ve been using Bluehost because the setup is literally a few clicks and the price is friendly for side projects.

Getting Your ElevenLabs API Key

1. Sign up at the ElevenLabs affiliate link: https://try.elevenlabs.io/kr07zfuqn1bp.
2. Verify your email and navigate to API → Dashboard.
3. Copy the API Key – you’ll need it in the code snippets below.

ElevenLabs offers several voices, but for this tutorial we’ll use the default “Rachel” voice. Feel free to experiment with other voices later.

Step 1 – Create a Simple TTS Endpoint (Python)

We’ll start with a tiny Flask service that talks to ElevenLabs. This service can be hosted on the same Bluehost server or any cloud provider you prefer.

# tts_service.py
import os
import requests
from flask import Flask, request, jsonify

app = Flask(__name__)
ELEVEN_API_KEY = os.getenv("ELEVEN_API_KEY")
ELEVEN_TTS_URL = "https://api.elevenlabs.io/v1/text-to-speech/"

@app.route("/synthesize", methods=["POST"])
def synthesize():
    data = request.json
    text = data.get("text", "")
    voice_id = data.get("voice_id", "Rachel")  # default voice

    headers = {
        "xi-api-key": ELEVEN_API_KEY,
        "Content-Type": "application/json"
    }
    payload = {
        "text": text,
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.85}
    }

    resp = requests.post(
        f"{ELEVEN_TTS_URL}{voice_id}",
        json=payload,
        headers=headers,
        stream=True,
    )
    if resp.status_code != 200:
        return jsonify({"error": "ElevenLabs API error"}), 500

    # Return audio as base64 so WordPress can embed it directly
    audio_bytes = resp.content
    return jsonify({"audio": audio_bytes.hex()})

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

Deploying the service

• Install Flask: pip install flask requests
• Set the environment variable: export ELEVEN_API_KEY=YOUR_KEY
• Run: python tts_service.py

If you’re on Bluehost, you can create a sub‑directory like tts/ and enable Python via the Setup Python App feature in the control panel. The free tier is sufficient for low‑traffic demos.

Step 2 – Hook the Endpoint into WordPress

We’ll add a small PHP snippet to functions.php that calls the Flask endpoint via wp_remote_post. The snippet creates a shortcode [voice_post] which you can drop anywhere in a post.

<?php
// functions.php

function generate_voice_audio($atts, $content = null) {
    // Grab the post content if no explicit text is passed
    if (empty($content)) {
        global $post;
        $content = apply_filters('the_content', $post->post_content);
    }

    $api_url = 'https://yourdomain.com/tts/synthesize'; // adjust to your Flask URL

    $response = wp_remote_post( $api_url, [
        'headers' => [ 'Content-Type' => 'application/json' ],
        'body'    => wp_json_encode([
            'text' => wp_strip_all_tags( $content ),
            'voice_id' => 'Rachel' // or any other ElevenLabs voice ID
        ]),
        'timeout' => 30,
    ]);

    if ( is_wp_error( $response ) ) {
        return '<p>❌ Could not generate audio.</p>';
    }

    $body = json_decode( wp_remote_retrieve_body( $response ), true );
    if ( empty( $body['audio'] ) ) {
        return '<p>❌ No audio returned.</p>';
    }

    // Convert hex back to binary and store as a temporary file
    $audio_data = hex2bin( $body['audio'] );
    $upload_dir = wp_upload_dir();
    $file_path = $upload_dir['basedir'] . '/voice_' . get_the_ID() . '.mp3';
    file_put_contents( $file_path, $audio_data );

    $file_url = $upload_dir['baseurl'] . '/voice_' . get_the_ID() . '.mp3';
    return '<audio controls src="'. esc_url($file_url) .'"></audio>';
}
add_shortcode('voice_post', 'generate_voice_audio');
?>

How it works

1. The shortcode grabs the post’s raw HTML, strips tags, and sends it to our Flask endpoint.
2. ElevenLabs returns raw audio bytes (encoded as hex for JSON safety).
3. WordPress writes the MP3 to the uploads folder and outputs an <audio> tag.

Now edit any post and insert:

[voice_post]

When the page loads, the audio player appears with a spoken version of the article.

Step 3 – Deploying the Whole Stack on Bluehost

1. Create a new site – In your Bluehost dashboard click “Create New Site”, choose WordPress, and follow the wizard.
2. Upload the Flask app – Use the File Manager or an SFTP client. Place the tts/ folder in the public_html directory.
3. Enable Python – In the Bluehost control panel, go to “Setup Python App”, point it to public_html/tts/tts_service.py, and set the virtual environment.
4. Set environment variables – Add ELEVEN_API_KEY under the “Environment Variables” section.
5. Restart the app – Click “Run”. Your endpoint should now be reachable at https://yourdomain.com/tts/synthesize.

Because Bluehost handles SSL automatically, the request from WordPress to the Flask service stays secure without extra configuration.

Step 4 – Testing & Debugging

• Check the endpoint with curl:

curl -X POST https://yourdomain.com/tts/synthesize \
  -H "Content-Type: application/json" \
  -d '{"text":"Hello, world!","voice_id":"Rachel"}'

You should receive a JSON payload containing an audio field.

• Inspect WordPress logs – If the shortcode fails, open wp-content/debug.log (enable WP_DEBUG in wp-config.php) to see any wp_remote_post errors.

• Cache the audio – For high‑traffic sites you may want to store the generated MP3 for a day or two to avoid repeated API calls. A simple transient API wrapper around the shortcode can handle that.

Going Further

• Dynamic voice selection – Add a dropdown in the post editor that lets authors pick a voice ID, then pass it to the shortcode via an attribute: [voice_post voice="Alex"].
• Chunked synthesis – For very long posts, split the content into paragraphs and concatenate the MP3 files to stay within ElevenLabs request limits.
• SEO boost – Google now indexes audio transcripts. Pair the generated MP3 with a hidden <track kind="captions"> element for accessibility and SEO gains.

Wrap‑Up

You’ve just turned a regular WordPress blog into a voice‑first experience using ElevenLabs’ natural‑sounding TTS and the straightforward hosting environment that Bluehost provides. The whole pipeline runs on affordable shared hosting, yet it’s powerful enough to showcase cutting‑edge AI in a real product.

Ready to give your visitors something to talk about?

��� Try ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp

🚀 Deploy instantly on Bluehost: https://bluehost.sjv.io/5k0d52

Happy coding, and enjoy the sound of your own website!