DEV Community

VoiceDeveloper
VoiceDeveloper

Posted on

How to Deploy a Voice AI Web App: ElevenLabs + WordPress on Bluehost

#ai #tutorial #beginners #webdev

Why Combine ElevenLabs with WordPress?

If you’ve ever wanted to give your website a voice, you’re not alone. Text‑to‑speech (TTS) has moved from novelty to a practical tool for accessibility, content repurposing, and user engagement. ElevenLabs offers one of the most natural‑sounding voice synthesis engines on the market, complete with voice cloning so you can create a signature voice for your brand.

Pair that with a solid, beginner‑friendly hosting platform like Bluehost, and you have everything you need to spin up a voice‑enabled web app in a few hours—not days. Bluehost’s one‑click WordPress installs, affordable plans, and generous bandwidth make it the perfect home for a TTS‑powered site.

In this guide we’ll walk through:

  1. Setting up a WordPress site on Bluehost.
  2. Getting an ElevenLabs API key and testing the endpoint.
  3. Building a simple WordPress page that turns any text block into speech.
  4. Deploying and testing the live voice AI web app.

Let’s dive in!

1. Get Your WordPress Site Up on Bluehost

  1. Create a Bluehost account – click here and choose the “Basic” plan if you’re just experimenting. You’ll get a free domain for the first year and 24/7 support.
  2. Launch WordPress – from the Bluehost dashboard, hit the One‑Click Install button for WordPress. The process finishes in under a minute.
  3. Secure your site – enable the free SSL certificate (Bluehost does this automatically) and set up a strong admin password.

You now have a fully functional WordPress site at https://yourdomain.com. All subsequent code will live inside this installation.

2. Grab an ElevenLabs API Key

  1. Sign up at the ElevenLabs developer portal using this affiliate link: https://try.elevenlabs.io/kr07zfuqn1bp.
  2. After confirming your email, navigate to API → Keys and create a new key. Keep it handy; we’ll need it in our code.

Tip: Store the key as a secret in your WordPress wp-config.php file to avoid exposing it in the theme files.

// wp-config.php
define('ELEVENLABS_API_KEY', 'sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxx');
Enter fullscreen mode Exit fullscreen mode

3. Test the ElevenLabs TTS Endpoint with cURL

Before wiring anything into WordPress, let’s make sure the API works. Open your terminal and run:

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/EXAMPLE_VOICE_ID" \
  -H "Accept: audio/mpeg" \
  -H "Content-Type: application/json" \
  -H "xi-api-key: $ELEVENLABS_API_KEY" \
  -d '{
        "text": "Hello, this is a test of ElevenLabs voice synthesis.",
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.85}
      }' --output test.mp3
Enter fullscreen mode Exit fullscreen mode

If everything is set up correctly, you’ll have a test.mp3 file you can play locally. Replace EXAMPLE_VOICE_ID with the ID of the voice you want to use (you can find it in the ElevenLabs dashboard).

4. Build a Simple Voice‑AI Page in WordPress

4.1 Create a Child Theme (optional but recommended) 

cd wp-content/themes
wp theme create my-voice-theme --child-of twentytwentyone
Enter fullscreen mode Exit fullscreen mode

Activate the child theme from the WordPress admin → Appearance → Themes.

4.2 Add a Custom Page Template

Create a file called page-voice-ai.php inside your child theme folder:

<?php
/**
 * Template Name: Voice AI Demo
 */

get_header(); ?>

<main id="site-content" role="main">
  <h1>Voice AI Demo</h1>

  <textarea id="tts-input" rows="5" placeholder="Enter text to hear it spoken..." style="width:100%;"></textarea>
  <br>
  <button id="tts-submit" style="margin-top:10px;">Generate Speech</button>

  <audio id="tts-player" controls style="display:none; margin-top:20px;"></audio>
</main>

<script>
document.getElementById('tts-submit').addEventListener('click', async () => {
  const text = document.getElementById('tts-input').value.trim();
  if (!text) return alert('Please type something!');

  const response = await fetch('<?php echo esc_url( home_url( '/wp-json/voice-ai/v1/synthesize' ) ); ?>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-WP-Nonce': '<?php echo wp_create_nonce("wp_rest"); ?>'
    },
    body: JSON.stringify({ text })
  });

  if (!response.ok) {
    return alert('Error generating speech');
  }

  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  const player = document.getElementById('tts-player');
  player.src = url;
  player.style.display = 'block';
});
</script>

<?php get_footer(); ?>
Enter fullscreen mode Exit fullscreen mode

This template provides a textarea for input, a button to trigger synthesis, and an <audio> element to play the result.

4.3 Expose a REST Endpoint that Calls ElevenLabs

Add the following to functions.php of your child theme (or create a small plugin if you prefer):

<?php
add_action( 'rest_api_init', function () {
    register_rest_route( 'voice-ai/v1', '/synthesize', array(
        'methods'  => 'POST',
        'callback' => 'voice_ai_synthesize',
        'permission_callback' => function () {
            return current_user_can( 'edit_posts' ); // simple auth; adjust as needed
        },
    ) );
} );

function voice_ai_synthesize( WP_REST_Request $request ) {
    $params = $request->get_json_params();
    $text   = sanitize_text_field( $params['text'] ?? '' );

    if ( empty( $text ) ) {
        return new WP_Error( 'no_text', 'No text provided', array( 'status' => 400 ) );
    }

    $api_key   = ELEVENLABS_API_KEY;
    $voice_id  = 'EXAMPLE_VOICE_ID'; // replace with your voice ID
    $endpoint  = "https://api.elevenlabs.io/v1/text-to-speech/{$voice_id}";

    $body = json_encode( array(
        'text' => $text,
        'voice_settings' => array(
            'stability' => 0.75,
            'similarity_boost' => 0.85,
        ),
    ) );

    $args = array(
        'body'    => $body,
        'headers' => array(
            'Content-Type'  => 'application/json',
            'xi-api-key'    => $api_key,
            'Accept'        => 'audio/mpeg',
        ),
        'timeout' => 30,
    );

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

    if ( is_wp_error( $response ) ) {
        return new WP_Error( 'api_error', $response->get_error_message(), array( 'status' => 500 ) );
    }

    $audio = wp_remote_retrieve_body( $response );
    return new WP_REST_Response( $audio, 200, array( 'Content-Type' => 'audio/mpeg' ) );
}
?>
Enter fullscreen mode Exit fullscreen mode

What’s happening?

  • The REST route /wp-json/voice-ai/v1/synthesize receives a JSON payload with text.
  • It forwards the request to ElevenLabs, using the API key stored in wp-config.php.
  • The raw MP3 bytes are returned directly to the front‑end, where the JavaScript creates a blob URL for playback.

4.4 Deploy the Page

  1. In the WordPress admin, create a new page called Voice AI Demo.
  2. On the right‑hand sidebar under Page Attributes, select Voice AI Demo as the template.
  3. Publish the page and visit its URL. You should now be able to type any sentence, hit Generate Speech, and hear it instantly.

5. Going Live on Bluehost

Because Bluehost handles the server stack (Apache/Nginx, PHP, MySQL) for you, there’s no extra configuration needed. Just:

  • Push your theme via FTP or the Bluehost File Manager.
  • Clear any caching plugins (e.g., WP Super Cache) so the new REST endpoint is reachable.
  • Test on a real device – mobile browsers will automatically use the <audio> tag, giving your visitors a seamless experience.

If you ever need more horsepower (e.g., higher concurrent TTS requests), consider upgrading to a higher‑tier Bluehost plan. The upgrade is a single click from your dashboard, and you keep the same domain and WordPress installation.

6. Next Steps & Ideas

  • Voice cloning: Upload a short sample of your own voice to ElevenLabs and replace EXAMPLE_VOICE_ID with the new ID for a truly branded experience.
  • Batch generation: Hook into WordPress’ publish_post action to automatically generate an audio version of every blog post.
  • User‑generated content: Let logged‑in users submit their own text and download the resulting MP3.
  • Analytics: Track which articles get the most listens using Google Analytics events triggered on the <audio> play event.

The possibilities are endless, and the core plumbing we built today will serve as a solid foundation for any voice‑first feature you envision.

TL;DR

  1. Spin up WordPress on Bluehost with a single click.
  2. Grab an API key from ElevenLabs (use the affiliate link above).
  3. Add a tiny custom page template and a REST endpoint that forwards text to ElevenLabs.
  4. Deploy, test, and start serving natural‑sounding speech from your site.

Ready to give your website a voice? Try ElevenLabs today at https://try.elevenlabs.io/kr07zfuqn1bp and host the whole thing effortlessly on Bluehost with this link: https://bluehost.sjv.io/5k0d52. Happy coding!

Top comments (0)