How to Add AI Voice Narration to Your WordPress Blog
Why Add AI Voice Narration to Your WordPress Blog? Readers love variety. Some people prefer to listen rather than read—think commuters, multitaskers, or folks with visual impairments. Adding AI‑generated audio to your
Why Add AI Voice Narration to Your WordPress Blog?
Readers love variety. Some people prefer to listen rather than read—think commuters, multitaskers, or folks with visual impairments. Adding AI‑generated audio to your posts can:
- Boost SEO (Google likes dwell time)
- Increase accessibility and compliance with WCAG
- Turn your blog into a mini‑podcast without any recording equipment
The good news? You don’t need a studio or a voice actor. Modern text‑to‑speech (TTS) services can clone a natural‑sounding voice in seconds, and you can serve the audio directly from your WordPress site.
Picking the Right TTS Engine
There are a handful of solid options out there—Google Cloud TTS, Amazon Polly, and Azure Speech. For most developers, ElevenLabs offers the best blend of:
- Ultra‑realistic voice cloning
- Simple REST API
- Generous free tier for testing
You can sign up and start generating audio with this affiliate link: https://try.elevenlabs.io/kr07zfuqn1bp.
Getting Your ElevenLabs API Key
- Visit the sign‑up page above and create an account.
- Once logged in, navigate to API → Keys.
- Click Create new key and copy the token—keep it secret!
You’ll need this token for every request you make from WordPress.
A Quick cURL Test
Before we dive into WordPress, let’s confirm the API works from the command line:
curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/voice_id" \
-H "xi-api-key: YOUR_ELEVENLABS_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "Welcome to my WordPress blog! This is a test of ElevenLabs AI voice narration.",
"model_id": "eleven_monolingual_v1",
"voice_settings": {"stability": 0.75, "similarity_boost": 0.85}
}' --output welcome.mp3
Replace voice_id with the ID of the voice you want to use (you can find it in the ElevenLabs dashboard). The command will download welcome.mp3—play it to hear the result.
Integrating ElevenLabs with WordPress
1. Create a Simple Shortcode
Add the following snippet to your theme’s functions.php or a custom plugin. It registers a [ai_voice] shortcode that takes the post content, sends it to ElevenLabs, and returns an HTML5 audio player.
<?php
function ai_voice_shortcode( $atts, $content = null ) {
// Settings – you can move these to wp_options later
$api_key = 'YOUR_ELEVENLABS_API_KEY';
$voice_id = 'YOUR_VOICE_ID';
$model_id = 'eleven_monolingual_v1';
// Bail if no content
if ( empty( $content ) ) {
return '';
}
// Prepare the request payload
$payload = [
'text' => wp_strip_all_tags( $content ),
'model_id' => $model_id,
'voice_settings'=> [
'stability' => 0.75,
'similarity_boost'=> 0.85
]
];
// Make the request using WP_Http
$request = [
'method' => 'POST',
'headers' => [
'xi-api-key' => $api_key,
'Content-Type' => 'application/json',
],
'body' => wp_json_encode( $payload ),
'timeout' => 30,
];
$response = wp_remote_post( "https://api.elevenlabs.io/v1/text-to-speech/{$voice_id}", $request );
if ( is_wp_error( $response ) ) {
return '<p>⚠️ Voice generation failed.</p>';
}
// Store the MP3 in the uploads folder
$upload_dir = wp_upload_dir();
$filename = 'ai-voice-' . md5( $content ) . '.mp3';
$filepath = trailingslashit( $upload_dir['path'] ) . $filename;
// Write the binary data to disk
file_put_contents( $filepath, wp_remote_retrieve_body( $response ) );
// Build the URL for the audio tag
$file_url = trailingslashit( $upload_dir['url'] ) . $filename;
// Return the player markup
return '<audio controls preload="none" style="width:100%;">' .
'<source src="' . esc_url( $file_url ) . '" type="audio/mpeg">' .
'Your browser does not support the audio element.' .
'</audio>';
}
add_shortcode( 'ai_voice', 'ai_voice_shortcode' );
?>
How to use it
[ai_voice]Your blog post text goes here. The shortcode will turn this paragraph into an audio file.[/ai_voice]
When the page renders, visitors will see a sleek audio player that streams the AI‑generated narration.
2. Automate for Every Post (Optional)
If you’d rather have the audio generated automatically for every post, hook into save_post:
add_action( 'save_post', function( $post_id ) {
// Avoid infinite loops
remove_action( 'save_post', __FUNCTION__ );
$post = get_post( $post_id );
if ( $post->post_status !== 'publish' ) return;
// Re‑use the shortcode logic but store the file URL in post meta
$audio_url = ai_voice_generate( $post->post_content );
if ( $audio_url ) {
update_post_meta( $post_id, '_ai_voice_url', esc_url_raw( $audio_url ) );
}
// Re‑attach the action
add_action( 'save_post', __FUNCTION__ );
});
You’ll need to extract the core generation code into a reusable ai_voice_generate() function—left as an exercise for the reader.
Deploying the Project on Bluehost
Now that the code is ready, you need a reliable host that can handle the occasional API call to ElevenLabs without breaking the bank. Bluehost offers a one‑click WordPress install, generous bandwidth, and a beginner‑friendly control panel—all for a low monthly price. It’s the easy, affordable way to get your voice‑enabled blog live.
- Sign up via this link: https://bluehost.sjv.io/5k0d52.
- Choose the “Basic” plan (perfect for low‑traffic blogs).
- Use the one‑click installer to spin up a fresh WordPress site.
- Upload the shortcode snippet (via the theme editor or a custom plugin) and you’re good to go.
Because Bluehost’s servers run on a standard LAMP stack, the wp_remote_post call to ElevenLabs works out‑of‑the‑box—no extra configuration needed.
Testing the Integration
Create a test post with the [ai_voice] shortcode and publish it. Visit the front‑end, click the play button, and listen. If you hear the generated voice, congratulations—you’ve just added AI narration to your blog!
If the audio doesn’t load:
- Verify the API key and voice ID are correct.
- Check the server’s outbound firewall (Bluehost’s default settings allow external HTTPS).
- Look at the WordPress debug log (
wp-content/debug.log) for any PHP errors.
Next Steps & Ideas
- Dynamic voice selection – let users pick from multiple ElevenLabs voices via a dropdown.
- Cache control – store the MP3 URLs in a transient to avoid re‑generating the same audio on every page load.
- Podcast feed – bundle each post’s audio file into an RSS feed so listeners can subscribe with their favorite podcast app.
- Multilingual support – ElevenLabs now offers several language models; pair them with WPML for localized narration.
Wrap‑Up
Adding AI voice narration is a low‑effort, high‑impact upgrade for any WordPress blog. With ElevenLabs’ realistic voice cloning and a simple shortcode, you can turn every article into an audio experience. Host the whole setup on Bluehost for an affordable, hassle‑free deployment, and you’ll have a fully accessible site in under an hour.
Ready to give your readers something to talk about (or listen to)? Try ElevenLabs today at https://try.elevenlabs.io/kr07zfuqn1bp and spin up your WordPress site on Bluehost via https://bluehost.sjv.io/5k0d52. Happy coding!
Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.