I came across the problem of having appended some text to the beginning of every post/page on a site.
Unfortunately I was also using Cool Timelines which displayed the content of several pages at once.
This meant I had a “Launch Text To Speech” toggle at the start and then several instances of the same words scattered throughout the page.
First I attempted to hide the first few letters/words/lines using only CSS:
/**
* Attempt 1 at hiding
* "Launch Text To Speech"
* automatically.
*/
.cool_timelines, .content-details {
text-indent:-9999px;
}
.cool_timelines, .content-details {
text-indent: 9999px;
display: inline-block;
}
/**
* Attempt 2 at hiding
* "Launch Text To Speech"
* automatically.
*/
.cool_timelines, .content-details::first-line {
visibility: hidden;
}
/**
* Attempt 3 at hiding
* "Launch Text To Speech"
* automatically.
*/
.cool_timelines, .content-details::first-letter {
visibility: hidden;
}
This obviously didn’t work.
Next I thought about using PHP and filtering the content of specific types of pages.
Like this:
/**
* Filter content.
*/
add_filter( 'the_content', 'updated_page_content' );
function updated_page_content( $content )
{
$content = str_replace('Launch Text To Speech', '', $content)
return $content;
}
This may have worked… if the text was actually within the content.
In my case I was trying to edit the text of a timeline story created using the “Cool Timelines” plugin.
Which apparently is not within the content.
Also I was already using a similar filter to add the text.
But then I found their plugins hooks!
add_filter('cool_timeline_story_content','ctl_story_content_filter');
function ctl_story_content_filter($content) {
$content = str_replace('Launch Text To Speech', '', $content);
return $content;
}
Which gave me the result I wanted.