Hiding Text Automatically

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.