Customizing the Seriously Simple Podcasting Castos Player

For the recent 2.5.0 release of Seriously Simple Podcasting, we updated the Castos Player that was originally added to the plugin back in December of 2017.

The original iteration of the player was included to give podcasters a customizable, great-looking HTML media player for their podcast sites. It was the same player we used on our initial launch of the Castos podcast hosting app. It served us well for 2 years, but in 2019 we decided it was time for a revamp. We spent about 6 months creating our perfect version 2 of the player to use in Castos and then worked on porting it to Seriously Simple Podcasting.

There have been a host of improvements to the player in version 2. It is lightweight and doesn’t rely on any third-party JavaScript libraries. It also includes some useful features like the Subscribe and Share buttons. Far and away my personal favorite “hidden” feature, is the ability to customize the player to suit your requirements.

This is possible due to the fact that the player rendering functionality is now separated out from the main plugin into a separate template file. While we’re not yet at a point where it’s possible to create your own template file and use that to override the core plugin one, we do plan on making that possible in a future release.

For now, however, it’s possible to use a filter to change the content of the player, before it’s rendered, by using a WordPress filter hook.

Step 1: Create somewhere to put this

As I pointed out the last time I wrote a customization article for Seriously Simple Podcasting, the best place to do this is in a child theme or a custom plugin. For ease of use, I’ve added the code for this tutorial to a repository in GitHub.

Step 2: Create a filter hook

This time the filter hook we’re using is the ssp_render_template hook, which fires before the template is rendered. The callback function accepts one argument, the HTML content of the template.

add_filter( 'ssp_render_template', 'yourprefix_render_template' );
function yourprefix_render_template( $template_content ) {
	// your code goes here.
	return $template_content;
}

Step 3: Check which template is being rendered

At this time, we don’t know which content is being rendered. However, we can check for a specific HTML in the rendered content. In this case, checking if the content contains the string class="castos-player is enough. We do this using the PHP strstr function, and return the $template_content variable if its result is false.

add_filter( 'ssp_render_template', 'yourprefix_render_template' );
function yourprefix_render_template( $template_content ) {

	/**
	 * Make sure we're rendering the castos player content
	 */
	$is_player = strstr( $template_content, 'class="castos-player' );
	if ( ! $is_player ) {
		return $template_content;
	}
}

Step 4: Customize your HTML Content

Now that we know we’re dealing with the right template content, we can start editing it. There are a few ways that this can be done, but the most straightforward way is to use PHP’s regular expression functions. I won’t dive into the detail of how that works here, but as an example, here are two examples of how to remove the Subscribe and Share buttons from the player HTML.

/**
 * Remove the subscribe button
 */
$template_content = preg_replace('/<button class="subscribe-btn"(\s.*?)<\/button>/', '', $template_content);

/**
 * Remove the share button
 */
$template_content = preg_replace('/<button class="share-btn"(\s.*?)<\/button>/', '', $template_content);

Once you’ve made the changes you want to make, you only need return the $template_data variable to the general execution.

/**
 * Return the content
 */
return $template_content;

Here is the full example of the above snippet, or download it from the repository I mentioned earlier.

add_filter( 'ssp_render_template', 'yourprefix_render_template' );
function yourprefix_render_template( $template_content ) {

	/**
	 * Make sure we're rendering the castos player content
	 */
	$is_player = strstr( $template_content, 'class="castos-player' );
	if ( ! $is_player ) {
		return $template_content;
	}

	/**
	 * Remove the subscribe button
	 */
	$template_content = preg_replace('/<button class="subscribe-btn"(\s.*?)<\/button>/', '', $template_content);

	/**
	 * Remove the share button
	 */
	$template_content = preg_replace('/<button class="share-btn"(\s.*?)<\/button>/', '', $template_content);

	/**
	 * Return the content
	 */
	return $template_content;
}

Because the variable passed to the ssp_render_template filter is a simple string variable with HTML content, you can use any of the available ways to manipulate HTML in PHP. Using regular expressions is about the fastest, but you can also use PHP’s DOMDocument class.