How to Use ElevenLabs with WordPress

A developer published a walkthrough for integrating ElevenLabs' cloud text-to-speech API into WordPress, packaging the workflow as a small plugin that sends post content to the ElevenLabs endpoint and caches the returned MP3 in the uploads folder. The guide covers API key handling, a shortcode that renders an HTML audio player, and a REST route for browser-side synthesis, with the key kept server-side.

If you’ve been following the surge in AI‑generated content, you’ve probably heard about text‑to‑speech TTS and voice cloning. Imagine turning your WordPress blog posts, help‑center articles, or even product videos into high‑quality spoken audio—right on the same page, with a voice that matches your brand. That’s exactly what ElevenLabs offers: a cloud‑based TTS engine that delivers natural‑sounding speech and lets you clone voices from just a few seconds of audio. Below, I’ll walk you through setting up ElevenLabs in a WordPress environment, from API registration to generating, storing, and serving audio on your site. Whether you’re a seasoned developer or a WordPress hobbyist, this guide gives you the code snippets and best‑practice tips you need to get your audio workflow up and running. ElevenLabs stands out because of its: If you’re ready to add a new dimension to your WordPress content, start here: https://try.elevenlabs.io/kr07zfuqn1bp https://try.elevenlabs.io/kr07zfuqn1bp Tip : Store the key in WordPress as a site option or environment variable so it’s not hard‑coded in your theme files. Instead of sprinkling code across functions.php , let’s encapsulate everything in a tiny plugin called elevenlabs-tts . Create a folder in wp-content/plugins/elevenlabs-tts and add an elevenlabs-tts.php file. <?php / Plugin Name: ElevenLabs TTS Description: Generate spoken audio from post content using ElevenLabs. Version: 1.0 Author: Your Name / defined 'ABSPATH' or die ; define 'ELEVENLABS API KEY', 'YOUR API KEY HERE' ; // Replace with your key / Generate TTS audio for a given text. @param string $text The text to synthesize. @return string|false URL of the generated audio file, or false on failure. / function el generate tts audio $text { $api url = 'https://api.elevenlabs.io/v1/text-to-speech/eleven monolingual v1'; $body = json encode 'text' = $text, 'voice settings' = 'stability' = 0.75, 'similarity boost' = 0.85 ; $response = wp remote post $api url, 'headers' = 'Accept' = 'application/json', 'Content-Type' = 'application/json', 'xi-api-key' = ELEVENLABS API KEY, , 'body' = $body, 'timeout' = 60, ; if is wp error $response { return false; } $data = wp remote retrieve body $response ; $audio url = wp upload bits 'tts-' . md5 $text . '.mp3', null, $data ; if $audio url 'error' { return false; } return $audio url 'url' ; } / Shortcode to embed TTS audio for the current post. Usage: elevenlabs tts / function el shortcode tts { $content = get the content ; $audio url = el generate tts audio $content ; if $audio url { return '<p Audio generation failed.</p '; } return '<audio controls src="' . esc url $audio url . '" Your browser does not support the audio element.</audio '; } add shortcode 'elevenlabs tts', 'el shortcode tts' ; Important : Replace YOUR API KEY HERE with the key you copied earlier. Security : Never expose your API key in client‑side code. All synthesis happens server‑side here. Open any post or page editor and insert: elevenlabs tts When the page renders, the shortcode calls el generate tts audio , sends the post content to ElevenLabs, stores the resulting MP3 in the uploads folder, and returns an <audio tag. The first visit will generate the file; subsequent visits will reuse the cached MP3. If you prefer to generate audio on the fly in the browser e.g., for user‑generated text , you can use the Fetch API. The same API key must be kept secret, so we’ll expose a small REST endpoint that your JavaScript can hit. / Register REST route for TTS. / add action 'rest api init', function { register rest route 'el/v1', '/synthesize', 'methods' = 'POST', 'callback' = 'el rest synthesize', ; } ; / REST callback that forwards to ElevenLabs. / function el rest synthesize WP REST Request $request { $text = $request- get param 'text' ; $audio url = el generate tts audio $text ; if $audio url { return new WP REST Response 'error' = 'Failed to generate audio' , 500 ; } return new WP REST Response 'url' = $audio url , 200 ; } Then, in your theme or a custom JS file: js async function synthesize text { const res = await fetch '/wp-json/el/v1/synthesize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify { text } } ; const data = await res.json ; if data.url { const audio = new Audio data.url ; audio.play ; } else { console.error 'Synthesis error:', data.error ; } } Security Note : This endpoint is public. If you’re exposing it, consider adding nonce validation or limiting usage to logged‑in users. ElevenLabs’ voice cloning is a game‑changer for branded audio. Here’s a quick rundown: /v1/voices to upload a short audio clip 10–30 seconds . voice id that you can reuse. php function el generate tts with clone $text, $voice id { $api url = 'https://api.elevenlabs.io/v1/text-to-speech/' . $voice id; // Rest of the request is identical to el generate tts audio } Tip : Store the voice id in your site options or a dedicated table so you can reference it across all posts. | Consideration | Recommendation | |---|---| | Caching | Store generated MP3s in the uploads folder; use the MD5 hash of the text to avoid duplicate synthesis. | | Batch Requests | If you’re generating many audios at once e.g., a podcast series , use the /batch endpoint to reduce round‑trips. | | Monitoring | Keep an eye on your character count; ElevenLabs charges per 1,000 characters. | | Fallback | If the API fails, provide a plain‑text link or a “Retry” button. | elevenlabs-tts plugin. elevenlabs tts to any post or page. Once set up, your audience can listen to any article right on the page, improving accessibility and engagement. Adding AI‑powered voice to your WordPress site doesn’t have to be a complex engineering project. ElevenLabs gives you a clean API, realistic voices, and a voice‑cloning feature that can make your content feel truly branded. By integrating it into a small plugin, you keep everything modular, testable, and maintainable. Give it a try, experiment with different voices, and watch your content come alive. Ready to turn words into sound? Dive in with ElevenLabs today: https://try.elevenlabs.io/kr07zfuqn1bp https://try.elevenlabs.io/kr07zfuqn1bp