Introduction
Voice‑driven experiences are becoming the new norm for web applications. From smart assistants to hands‑free navigation, adding a voice layer to your WordPress site can boost engagement, accessibility, and even SEO. In this guide we’ll walk through building a lightweight WordPress plugin that turns any post into a spoken summary, uses voice cloning for a personalized narration, and then deploy it on a budget‑friendly host. We’ll rely on ElevenLabs for the heavy lifting of text‑to‑speech (TTS) and voice cloning, and we’ll show how Bluehost can serve as the hassle‑free, affordable launchpad for the plugin.
1. Why Voice on WordPress?
- Accessibility: Readers with visual impairments or dyslexia can consume content more comfortably.
- Mobile UX: Users can listen while commuting or exercising.
- SEO Advantage: Search engines are beginning to index spoken content, giving your site an edge.
- Brand Personality: A custom voice can reinforce brand identity and trust.
With WordPress’s plugin ecosystem, you can add these features without touching the core code base. The only “heavy” part is generating the audio, and that’s where ElevenLabs shines.
2. Get Started with ElevenLabs
ElevenLabs offers a robust API for generating realistic speech and even cloning voices from a handful of samples. Sign up at:
https://try.elevenlabs.io/kr07zfuqn1bp
After registration, grab your API key from the dashboard. Keep it secret – treat it like a password.
Tip: ElevenLabs provides a free tier that’s perfect for development. When you’re ready to go live, upgrade to a paid plan that offers higher request limits and faster processing.
3. Create the Plugin Skeleton
Let’s bootstrap a simple plugin. In your WordPress wp-content/plugins/ directory, create a folder called voice-tts-plugin. Inside, add an index.php file with the following header:
<?php
/**
* Plugin Name: Voice TTS Plugin
* Description: Converts post content to speech using ElevenLabs.
* Version: 1.0
* Author: Your Name
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
That’s all you need for WordPress to recognize the plugin.
4. Add the ElevenLabs API Wrapper
Create a file class-elevenlabs-api.php in the same folder:
<?php
class ElevenLabsAPI {
private $api_key;
private $base_url = 'https://api.elevenlabs.io/v1';
public function __construct( $api_key ) {
$this->api_key = $api_key;
}
public function generate_speech( $text, $voice_id = 'male' ) {
$url = $this->base_url . '/text-to-speech/' . $voice_id . '/stream';
$headers = [
'accept' => 'audio/mpeg',
'xi-api-key' => $this->api_key,
'Content-Type' => 'application/json',
];
$body = json_encode( [ 'text' => $text ] );
$response = wp_remote_post( $url, [
'headers' => $headers,
'body' => $body,
] );
if ( is_wp_error( $response ) ) {
return false;
}
return wp_remote_retrieve_body( $response );
}
}
This wrapper uses WordPress’s wp_remote_post to keep the code clean and compatible with all hosting environments.
5. Build the Front‑End Shortcode
In index.php, register a shortcode that will generate the audio link:
require_once __DIR__ . '/class-elevenlabs-api.php';
function vtp_generate_audio_shortcode( $atts, $content = null ) {
$atts = shortcode_atts( [
'voice' => 'male',
], $atts, 'vtp_audio' );
if ( ! $content ) {
return '';
}
// Store the text in a transient to avoid repeated API calls
$transient_key = 'vtp_audio_' . md5( $content . $atts['voice'] );
$audio_url = get_transient( $transient_key );
if ( ! $audio_url ) {
$api = new ElevenLabsAPI( get_option( 'vtp_api_key' ) );
$audio_data = $api->generate_speech( $content, $atts['voice'] );
if ( ! $audio_data ) {
return '<p>Error generating audio.</p>';
}
// Save the audio to wp-content/uploads/voice/
$upload_dir = wp_upload_dir();
$audio_dir = trailingslashit( $upload_dir['basedir'] ) . 'voice/';
wp_mkdir_p( $audio_dir );
$audio_path = $audio_dir . uniqid() . '.mp3';
file_put_contents( $audio_path, $audio_data );
$audio_url = trailingslashit( $upload_dir['baseurl'] ) . 'voice/' . basename( $audio_path );
set_transient( $transient_key, $audio_url, HOUR_IN_SECONDS );
}
return '<audio controls src="' . esc_url( $audio_url ) . '">Your browser does not support the audio element.</audio>';
}
add_shortcode( 'vtp_audio', 'vtp_generate_audio_shortcode' );
Now you can add [vtp_audio]Your content here[/vtp_audio] to any post, and the plugin will stream the TTS audio.
6. Add an Admin Settings Page
To store the ElevenLabs API key securely, add a settings page:
function vtp_admin_menu() {
add_options_page(
'Voice TTS Settings',
'Voice TTS',
'manage_options',
'vtp-settings',
'vtp_settings_page'
);
}
add_action( 'admin_menu', 'vtp_admin_menu' );
function vtp_settings_page() {
?>
<div class="wrap">
<h1>Voice TTS Settings</h1>
<form method="post" action="options.php">
<?php
settings_fields( 'vtp_settings_group' );
do_settings_sections( 'vtp-settings' );
submit_button();
?>
</form>
</div>
<?php
}
function vtp_register_settings() {
register_setting( 'vtp_settings_group', 'vtp_api_key' );
add_settings_section( 'vtp_main_section', 'API Configuration', null, 'vtp-settings' );
add_settings_field(
'vtp_api_key',
'ElevenLabs API Key',
'vtp_api_key_callback',
'vtp-settings',
'vtp_main_section'
);
}
add_action( 'admin_init', 'vtp_register_settings' );
function vtp_api_key_callback() {
$api_key = get_option( 'vtp_api_key' );
echo '<input type="text" name="vtp_api_key" value="' . esc_attr( $api_key ) . '" class="regular-text" />';
}
Now you can paste your ElevenLabs key once and it will be used everywhere.
7. Voice Cloning (Optional)
If you want a personalized voice, ElevenLabs lets you clone a voice from a few minutes of audio. Use the following curl snippet to create a new voice ID:
curl -X POST https://api.elevenlabs.io/v1/voices \
-H "xi-api-key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"name":"Custom Voice",
"sample_url":"https://yourdomain.com/path/to/sample.mp3"
}'
Replace YOUR_API_KEY with your key and sample.mp3 with a short recording of the person. Once the voice ID is returned, pass it to the generate_speech method in place of 'male'.
8. Deploy to Bluehost
You’ve built the plugin; now it’s time to host it. Bluehost is a great option for beginners and seasoned developers alike. It offers:
- Free domain with purchase
- 24/7 support
- One‑click WordPress installs
- Affordable plans that scale
Sign up at https://bluehost.sjv.io/5k0d52 and install WordPress. From there, upload the voice-tts-plugin folder to wp-content/plugins/ via FTP or the file manager, activate it, and configure your API key.
If you prefer a managed WordPress host, Bluehost still works well: it supports custom plugins and provides automatic backups, so you won’t lose your voice‑powered content.
9. Testing and Optimization
- Cache the audio: The transient in the shortcode ensures the API isn’t called on every page view. Adjust the expiration as needed.
-
Lazy‑load the audio: Wrap the
<audio>tag in a<div>that loads only when scrolled into view to save bandwidth. - Use Webhooks: ElevenLabs offers webhook callbacks for job completion if you switch to asynchronous processing.
- Accessibility: Add ARIA labels and captions for screen readers.
10. Wrap‑Up and Next Steps
You now have a fully functional, voice‑powered WordPress plugin that leverages ElevenLabs for realistic TTS and optional voice cloning. Deploy it on a reliable host like Bluehost to get your site online quickly and affordably.
Call to Action
- Try ElevenLabs now: https://try.elevenlabs.io/kr07zfuqn1bp – get your API key and start generating audio today.
- **Launch
Top comments (0)