Amazon Polly Toggle

So my boss at the place I volunteer asked me to make Amazon Polly toggleable.

Apparently it doesnt look good to have a big audio player at the top of every page and post.

This was a challenge as it’s two different problems.

First figure out how to make something toggleable.

This I found a plugin for but I still havent found a way to make a site-wide toggle.

Second figure out how to hide plugin generated content like Amazon Polly or a dark mode button inside that toggle.

Luckily I figured out a way to botch something together:

Just edit the plugin directly.

Sure it’le probably break every time we update it but its easy to fix.

Toggle Plugin

So I found this plugin called WP-ShowHide which can hide content behind a toggle.

This allows you to hide text with some quick shortcode.

However I quickly noticed that it hides that text by creating a class which includes the post ID.

And that if multiple classes with the same name exist in a post they are all toggled at once.

Thus if I could force Amazon Polly to display the audio player within a specific class and then add a toggle to all content on my site…

All that was left was to find where the audio player was created.

Plugin Editing

Thus you simply have to edit the “AWS For WordPress” plugin directly.

Edit: this can now be found here:

AWS for WordPress

Find this code within “amazon-polly/public/class-amazonpolly-public.php“:

					$polly_content = '
					<table id="amazon-polly-audio-table">
						<tr>
						<td id="amazon-polly-audio-tab">
							<div id="amazon-ai-player-label">' . $player_label . '</div>
							' . $audio_part . '
							<div id="amazon-polly-subscribe-tab">' . $subscribe_part . '</div>
							<div id="amazon-polly-by-tab">' . $voice_by_part . '</div>
						</td>
						</tr>
					</table>';

And replace it with this:

					$polly_content = '
					<div id="”polly”-content-' . get_the_ID() . 
						'" class="sh-content ”post”-content sh-hide" style="display: none;">
					<table id="amazon-polly-audio-table">
						<tr>
						<td id="amazon-polly-audio-tab">
							<div id="amazon-ai-player-label">' . $player_label . '</div>
							' . $audio_part . '
							<div id="amazon-polly-subscribe-tab">' . $subscribe_part . '</div>
							<div id="amazon-polly-by-tab">' . $voice_by_part . '</div>
						</td>
						</tr>
					</table>
					</div>';

That forces the audio player into a div class with an ID somewhere along the lines of “polly”-content-2313.

Theme Editing

Now you simply add a filter to “functions.php” to force the polly toggle above your page/post content.

/**
 * Filter inserts Polly Toggle Shortcode before content.
 */
add_filter( 'the_content', 'updated_page_content' );
function updated_page_content( $content )
{
     return '
	<div class="polly"><p>[showhide type=”polly” more_text=Text-To-Speach less_text=Hide][/showhide]</p></div>' . $content;
}

And of course you can mess around with styling the toggle itself.

/**
 * Styles Polly Toggle.
 */
.polly
{
	text-align:center;
}

Audio Player Styling

Finally I wanted to style the audio player itself which I did using this Additional CSS:

/**
 * Styles Audio Player.
 */
audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(82%)!important;
    width: 50%!important;
    height: 25px;
	margin-left:25%;
	margin-right:25%;
}

And voila!