How to Add AI Voice Narration to Your WordPress Blog

Why Add AI Voice Narration to Your Blog?

If you’ve ever scrolled through a post and thought, “I’d love to listen to this on my commute,” you’re not alone. Audio‑first content is exploding, and with modern text‑to‑speech (TTS) engines you can turn any article into a natural‑sounding podcast episode with a few lines of code.

Adding AI‑generated narration to a WordPress blog gives you:

• Accessibility – Screen‑reader users and people with visual impairments get a richer experience.
• Engagement – Visitors can listen while cooking, driving, or working out.
• SEO boost – Search engines love diverse content formats.

In this guide we’ll walk through a practical, developer‑friendly way to generate voice narration with ElevenLabs (a top‑tier TTS service) and serve the audio files directly from your WordPress site. We’ll also show how to spin up the whole thing on an affordable host—Bluehost—so you can focus on code, not server maintenance.

What You’ll Need

Pro tip: If you’re starting from scratch, Bluehost’s managed WordPress hosting makes the whole setup a breeze—just a few clicks and you have a secure, fast site ready for plugins.

Step 1 – Grab Your ElevenLabs API Key

1. Sign up at ElevenLabs.
2. Once logged in, navigate to API → Tokens and generate a new secret key.
3. Keep that key handy; you’ll need it in the PHP code that talks to the ElevenLabs API.

Security note: Store the key in wp-config.php (or use a secret manager) so it never lands in your theme files.

// Add to wp-config.php
define('ELEVENLABS_API_KEY', 'YOUR_SECRET_KEY_HERE');

Step 2 – Create a Simple “Voice Narration” Plugin

Instead of hacking the theme, let’s package the logic in a tiny plugin. Create a folder called voice-narration inside wp-content/plugins and add a file voice-narration.php:

<?php
/*
Plugin Name: Voice Narration with ElevenLabs
Description: Generates AI voice audio for each post using ElevenLabs TTS.
Version: 1.0
Author: Your Name
*/

if ( ! defined( 'ABSPATH' ) ) exit; // Prevent direct access

// Hook into post save to generate audio
add_action( 'save_post', 'vn_generate_audio', 10, 3 );

function vn_generate_audio( $post_ID, $post, $update ) {
    // Only run on published posts
    if ( $post->post_status !== 'publish' ) return;

    // Avoid infinite loops
    remove_action( 'save_post', 'vn_generate_audio' );

    $content = wp_strip_all_tags( $post->post_content );
    $audio_file = vn_fetch_tts( $content, $post_ID );

    if ( $audio_file ) {
        // Save the audio URL as post meta
        update_post_meta( $post_ID, '_vn_audio_url', $audio_file );
    }

    // Re‑hook
    add_action( 'save_post', 'vn_generate_audio', 10, 3 );
}

// Call ElevenLabs API and store MP3 in wp-content/uploads
function vn_fetch_tts( $text, $post_ID ) {
    $api_key = ELEVENLABS_API_KEY;
    $voice   = 'eleven_monolingual_v1'; // Change to any voice you like

    $endpoint = "https://api.elevenlabs.io/v1/text-to-speech/{$voice}";
    $payload  = json_encode([
        'text' => $text,
        'model_id' => 'eleven_multilingual_v2',
        'voice_settings' => [
            'stability' => 0.75,
            'similarity_boost' => 0.85
        ]
    ]);

    $args = [
        'body'    => $payload,
        'headers' => [
            'Content-Type'  => 'application/json',
            'xi-api-key'    => $api_key,
        ],
        'timeout' => 120,
    ];

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

    if ( is_wp_error( $response ) ) {
        error_log( 'ElevenLabs API error: ' . $response->get_error_message() );
        return false;
    }

    $audio_data = wp_remote_retrieve_body( $response );
    $upload_dir = wp_upload_dir();

    $filename   = "post-{$post_ID}-voice.mp3";
    $file_path  = trailingslashit( $upload_dir['path'] ) . $filename;

    // Write the MP3 file
    file_put_contents( $file_path, $audio_data );

    // Return the public URL
    return trailingslashit( $upload_dir['url'] ) . $filename;
}

// Enqueue a simple audio player on the front‑end
add_action( 'the_content', 'vn_append_player' );
function vn_append_player( $content ) {
    if ( is_singular( 'post' ) ) {
        global $post;
        $audio_url = get_post_meta( $post->ID, '_vn_audio_url', true );

        if ( $audio_url ) {
            $player = sprintf(
                '<p><audio controls src="%s"></audio></p>',
                esc_url( $audio_url )
            );
            $content .= $player;
        }
    }
    return $content;
}
?>

What This Plugin Does

1. When a post is saved and its status is publish, it strips HTML tags from the content and sends the raw text to ElevenLabs.
2. ElevenLabs returns an MP3 that we write to the wp‑content/uploads folder.
3. The MP3 URL is stored as post meta (_vn_audio_url).
4. On the front‑end, the plugin appends an HTML <audio> element so readers can click play.

Tip: If you prefer a different voice, head over to the ElevenLabs dashboard, copy the voice ID, and replace the $voice variable.

Step 3 – Test Locally, Then Deploy

Local testing

If you have a local WordPress environment (e.g., using Local by Flywheel or XAMPP), activate the plugin from Plugins → Installed Plugins. Publish a test post, wait a few seconds for the API call, and you should see the audio player appear at the bottom of the article.

Deploy with Bluehost

When you’re ready to go live, Bluehost offers:

• One‑click WordPress installation
• Free SSL and daily backups
• Scalable plans that start under $5/month

Just spin up a new site, upload the voice-narration plugin via the WordPress admin, and you’re good to go. Because Bluehost’s servers are optimized for WordPress, the TTS calls and media storage perform smoothly without extra configuration.

Step 4 – Fine‑Tuning the Voice Output

ElevenLabs provides a handful of parameters you can tweak in the payload:

Experiment with these values until you find a tone that matches your brand. For example:

"voice_settings": {
    "stability": 0.9,
    "similarity_boost": 0.95
}

You can also cache the audio URLs in a transient to avoid re‑generating audio on every post edit, saving you API credits.

$cached = get_transient( "vn_audio_{$post_ID}" );
if ( $cached ) {
    return $cached;
}
// ... generate audio ...
set_transient( "vn_audio_{$post_ID}", $audio_url, DAY_IN_SECONDS );

Step 5 – Optional: Add a “Listen” Button in the Post Header

If you’d rather have a prominent button instead of the default HTML player, add this snippet to your theme’s functions.php:

function vn_add_listen_button( $content ) {
    if ( is_singular( 'post' ) ) {
        global $post;
        $audio_url = get_post_meta( $post->ID, '_vn_audio_url', true );
        if ( $audio_url ) {
            $button = '<button id="vn-play" style="margin-bottom:1rem;">🔊 Listen to this article</button>
                       <script>
                       document.getElementById("vn-play").addEventListener("click", function(){
                           new Audio("' . esc_url( $audio_url ) . '").play();
                       });
                       </script>';
            $content = $button . $content;
        }
    }
    return $content;
}
add_filter( 'the_content', 'vn_add_listen_button' );

Now readers get a single‑click “Listen” experience that feels native to your design.

Wrapping Up

You’ve just turned a regular WordPress blog into a multimodal content hub with AI‑generated narration. The core pieces are:

1. ElevenLabs – the high‑quality TTS engine that gives you lifelike voices.
2. A lightweight WordPress plugin – handles API calls, stores MP3s, and injects an audio player.
3. Bluehost – the easy, affordable way to host the site and keep everything running smoothly.

Give it a spin, tweak the voice settings, and watch your engagement metrics climb.

Ready to bring your posts to life? Sign up for ElevenLabs today, and launch your AI‑powered WordPress blog on Bluehost for a hassle‑free experience. Happy coding!