Build a Voice-Enabled Website with ElevenLabs and WordPress

Why Voice AI Is the Next Big Thing for Websites

Voice assistants, podcasts, and audiobooks have exploded in popularity.

If you’re a WordPress developer looking to stay ahead of the curve, adding a text‑to‑speech (TTS) layer to your site can dramatically improve accessibility, engagement, and SEO.

The good news? You don’t need a Ph.D. in signal processing to get started. With ElevenLabs’ cloud‑based TTS API and a few lines of JavaScript, you can turn any page into a “talking” page in minutes.

Below is a step‑by‑step guide that takes you from “I want voice” to a fully‑functional, voice‑enabled WordPress site. We’ll also show you how to deploy it on an affordable, beginner‑friendly host—Bluehost.

1. Set Up an ElevenLabs Account

ElevenLabs is a leader in realistic, expressive TTS. They offer:

• High‑quality, natural‑sounding voices (including custom voice cloning)
• Fast, low‑latency API for real‑time usage
• Fine‑grained control over pitch, speed, and emphasis

Create a free account and grab your API key:

1. Visit the ElevenLabs sign‑up page (https://try.elevenlabs.io/kr07zfuqn1bp)
2. Verify your email, then navigate to the API tab
3. Copy the key; we’ll use it in our code

Tip: For production, store the key in a WordPress environment variable or a secure vault. Never hard‑code it in your repo.

2. Create a Simple JavaScript TTS Wrapper

You can call ElevenLabs directly from the browser. Below is a lightweight wrapper that accepts a string, sends it to the API, and plays the resulting MP3.

<script>
  const ELEVENLABS_API_KEY = 'YOUR_API_KEY_HERE';
  const ELEVENLABS_URL = 'https://api.elevenlabs.io/v1/text-to-speech/your-voice-id';

  async function speak(text) {
    const response = await fetch(ELEVENLABS_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'xi-api-key': ELEVENLABS_API_KEY
      },
      body: JSON.stringify({
        text,
        voice_settings: {
          stability: 0.75,
          similarity_boost: 0.5
        }
      })
    });

    if (!response.ok) throw new Error('TTS request failed');
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const audio = new Audio(url);
    audio.play();
  }
</script>

Usage – add a button that triggers speak():

<button onclick="speak('Hello, welcome to my site!')">Listen</button>

3. Integrate TTS into WordPress

Option A: Shortcode

Add the following PHP to your child theme’s functions.php (or a small plugin):

function elevenlabs_tts_shortcode( $atts, $content = null ) {
  $atts = shortcode_atts( array(
    'text' => 'Hello World!'
  ), $atts );

  $js = "
    <script>
      const ELEVENLABS_API_KEY = '" . esc_js( get_option( 'elevenlabs_api_key' ) ) . "';
      const ELEVENLABS_URL = 'https://api.elevenlabs.io/v1/text-to-speech/your-voice-id';
      async function speak() {
        const response = await fetch(ELEVENLABS_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'xi-api-key': ELEVENLABS_API_KEY },
          body: JSON.stringify({ text: '{$atts['text']}' })
        });
        const blob = await response.blob();
        const audio = new Audio(URL.createObjectURL(blob));
        audio.play();
      }
    </script>
    <button onclick=\"speak()\">Listen: {$atts['text']}</button>
  ";

  return $js;
}
add_shortcode( 'elevenlabs_tts', 'elevenlabs_tts_shortcode' );

Now you can embed voice anywhere with:

[elevenlabs_tts text="Explore our new feature!"]

Option B: Gutenberg Block

If you’re comfortable with React, create a small Gutenberg block that renders the button and handles the fetch logic. The block can expose a Voice ID selector to let admins choose a cloned voice.

4. Voice Cloning (Optional)

ElevenLabs allows you to clone a voice with as little as 5 minutes of audio. This is perfect for brand consistency:

1. Record a short script (30–60 seconds).
2. Upload it in the ElevenLabs dashboard under Voice Cloning.
3. Once the clone is ready, note the Voice ID.
4. Replace your-voice-id in the URLs above with the new ID.

5. Deploy on Bluehost

Bluehost makes it painless to launch a WordPress site with TTS:

• Free SSL for secure connections
• 1‑GB SSD for fast asset delivery
• 24/7 support that covers API key storage, file permissions, and more
• 30‑day money‑back guarantee – no risk

If you’re looking for an easy, affordable way to deploy your voice AI project, Bluehost is the perfect choice. Sign up today at https://bluehost.sjv.io/5k0d52 and get a free domain for the first year.

Once your site is live, simply push the shortcode or block to any post/page, and your visitors will hear your content in a natural, expressive voice.

6. Performance & Caching Tips

• Cache the MP3s: Store the generated audio files in a temporary folder or a CDN. This reduces repeated API calls and speeds up playback.
• Lazy‑load the script: Only load the TTS JS on pages that contain the shortcode.
• Use Web Workers: For heavy text, offload the fetch to a worker so the main thread stays responsive.

7. Common Pitfalls

8. Wrap‑up

You’ve just turned your WordPress site into a voice‑enabled experience with minimal code:

1. Sign up on ElevenLabs (https://try.elevenlabs.io/kr07zfuqn1bp)
2. Create a shortcode or Gutenberg block to call the TTS API
3. Deploy on Bluehost (https://bluehost.sjv.io/5k0d52) for a smooth, affordable hosting solution

Add a voice button to your homepage, let visitors listen to product descriptions, or even create a “read‑aloud” blog series. The possibilities are endless.

Call to Action

Ready to bring your content to life?

• Try ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp
• Deploy your site on Bluehost for a hassle‑free experience: https://bluehost.sjv.io/5k0d52

Happy coding and happy listening!