Build a Voice-Enabled Website with ElevenLabs and WordPress

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.

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.

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

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 ) Enter fullscreen mode Exit fullscreen mode Deploying the service

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.

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' );?> Enter fullscreen mode Exit fullscreen mode How it works

[voice_post] Enter fullscreen mode Exit fullscreen mode When the page loads, the audio player appears with a spoken version of the article.

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

curl -X POST https://yourdomain.com/tts/synthesize \ -H "Content-Type: application/json" \ -d '{"text":"Hello, world!","voice_id":"Rachel"}' Enter fullscreen mode Exit fullscreen mode 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.

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!