Customizing your podcast subscribe links

At the time of writing this article the most popular feature requested by our users is the ability to add more subscribe links.

We love feedback like this, and we’re in the process of updating the Castos app and the Seriously Simple Podcasting plugin to support this. However, it is currently possible to make changes to the Subscribe links yourself, with a little filter magic and some HTML.

We’ll be changing these links

The Seriously Simple Podcasting plugin has a WordPress filter which allows you to override the HTML generated by the plugin. To know what to change we first need to look at the HTML that is generated.

Below you will find the default HTML content. (note for the purposes of this article I’ve just linked to the top level domain of each service, not the actual URL for my show)

<p>Subscribe:
    <a href="https://itunes.com/" target="_blank" title="iTunes" class="podcast-meta-itunes">iTunes</a> |
    <a href="https://stitcher.com/" target="_blank" title="Stitcher" class="podcast-meta-itunes">Stitcher</a> |
    <a href="https://googleplay.com/" target="_blank" title="Google Play" class="podcast-meta-itunes">Google Play</a> |
    <a href="https://spotify.com/" target="_blank" title="Spotify" class="podcast-meta-itunes">Spotify</a>
</p>

The filter you can hook into is called ssp_include_podcast_subscribe_links and it passes one argument, a variable which contains this HTML. So if you add a hook to that filter, via a plugin or child theme, you can override the HTML.

Step 1: Create somewhere to put this

You’re going to be writing some PHP code, which means you’ll either need a plugin or child theme. If you want to create a child theme there are a few ways to create a child theme, so pick your favourite. Make sure that you use the correct ‘parent-style’ value when enqueuing the parent theme stylesheet.

To make life easier, I’ve created a sample plugin, which contains all the code from this article. You can download this plugin, open the zip, remove “master” from the file name, rezip and upload like any other plugin. Or you can choose to place it in your own customizations plugin — just be sure to remove the opening .php tag.

Step 2: Create a filter hook

Create a hook for the ssp_include_podcast_subscribe_links filter, and a call back function to fire when that filter is run.

add_filter( 'ssp_include_podcast_subscribe_links', 'myprefix_ssp_include_podcast_subscribe_links' );
function myprefix_ssp_include_podcast_subscribe_links( $subscribe_display ) {
// your code goes here.
return $subscribe_display;
}

Because it is a good idea to prefix any functions you create, make sure you replace myprefix with something unique to your site.

If you have the child theme or plugin enabled and you visit a podcast, you won’t see any change, because we’re not making any changes to the $subscribe_display variable.

Step 3: Get the subscribe URLs already saved in your Podcast Settings

These urls are saved using the WordPress Settings API, and are different based on whether you use series or not.

First we need to get the episode id, and if there is a series that the episode belongs to

$episode_id = get_the_ID();
$terms = get_the_terms( $episode_id, 'series' );

Then we need to get the default subscribe urls

$itunes_url      = get_option( 'ss_podcasting_itunes_url', '' );
$stitcher_url    = get_option( 'ss_podcasting_stitcher_url', '' );
$google_play_url = get_option( 'ss_podcasting_google_play_url', '' );
$spotify_url     = get_option( 'ss_podcasting_spotify_url', '' );

Finally, if there is a series involved, we need to get the URLS based on the series.

if ( is_array( $terms ) ) {
	if ( isset( $terms[0] ) ) {
		if ( false !== get_option( 'ss_podcasting_itunes_url_' . $terms[0]->term_id ) ) {
				$itunes_url = get_option( 'ss_podcasting_itunes_url_' . $terms[0]->term_id, '' );
			}
		if ( false !== get_option( 'ss_podcasting_stitcher_url_' . $terms[0]->term_id ) ) {
				$stitcher_url = get_option( 'ss_podcasting_stitcher_url_' . $terms[0]->term_id, '' );
			}
		if ( false !== get_option( 'ss_podcasting_google_play_url_' . $terms[0]->term_id ) ) {
				$google_play_url = get_option( 'ss_podcasting_google_play_url_' . $terms[0]->term_id, '' );
			}
		if ( false !== get_option( 'ss_podcasting_spotify_url_' . $terms[0]->term_id ) ) {
				$spotify_url = get_option( 'ss_podcasting_spotify_url_' . $terms[0]->term_id, '' );
		}
	}
}

Step 4: Output the new subscribe links html and capture it into the $subscribe_display variable

Now that we have the URLS, we can output the new Subscribe links. Here I am simply updating the title and text of each link.

ob_start();
?>
<p>Subscribe:
	<a href="<?php echo $itunes_url ?>" target="_blank" title="Subscribe to iTunes" class="podcast-meta-itunes">Subscribe to iTunes</a> |
	<a href="<?php echo $stitcher_url ?>" target="_blank" title="Subscribe to Stitcher" class="podcast-meta-itunes">Subscribe to Stitcher</a> |
	<a href="<?php echo $google_play_url ?>" target="_blank" title="Subscribe to Google Play" class="podcast-meta-itunes">Subscribe to Google Play</a> |
	<a href="<?php echo $spotify_url ?>" target="_blank" title="Subscribe to Spotify" class="podcast-meta-itunes">Subscribe to Spotify</a>
</p>
<?php
$subscribe_display = ob_get_clean();

This will capture the HTML code into something called an output buffer, and then return the buffer to the $subscribe_display variable. Then we can simply return the updated $subscribe_display variable.

return $subscribe_display;

Here is the full PHP snippet

add_filter( 'ssp_include_podcast_subscribe_links', 'myprefix_ssp_include_podcast_subscribe_links' );
function myprefix_ssp_include_podcast_subscribe_links( $subscribe_display ) {

	$episode_id = get_the_ID();
	$terms = get_the_terms( $episode_id, 'series' );

	/**
	 * Get the default feed subscribe urls
	 */
	$itunes_url      = get_option( 'ss_podcasting_itunes_url', '' );
	$stitcher_url    = get_option( 'ss_podcasting_stitcher_url', '' );
	$google_play_url = get_option( 'ss_podcasting_google_play_url', '' );
	$spotify_url     = get_option( 'ss_podcasting_spotify_url', '' );

	if ( is_array( $terms ) ) {
		if ( isset( $terms[0] ) ) {
			if ( false !== get_option( 'ss_podcasting_itunes_url_' . $terms[0]->term_id ) ) {
				$itunes_url = get_option( 'ss_podcasting_itunes_url_' . $terms[0]->term_id, '' );
			}
			if ( false !== get_option( 'ss_podcasting_stitcher_url_' . $terms[0]->term_id ) ) {
				$stitcher_url = get_option( 'ss_podcasting_stitcher_url_' . $terms[0]->term_id, '' );
			}
			if ( false !== get_option( 'ss_podcasting_google_play_url_' . $terms[0]->term_id ) ) {
				$google_play_url = get_option( 'ss_podcasting_google_play_url_' . $terms[0]->term_id, '' );
			}
			if ( false !== get_option( 'ss_podcasting_spotify_url_' . $terms[0]->term_id ) ) {
				$spotify_url = get_option( 'ss_podcasting_spotify_url_' . $terms[0]->term_id, '' );
			}
		}
	}

	ob_start();
	?>
	<p>Subscribe:
		<a href="<?php echo $itunes_url ?>" target="_blank" title="Subscribe to iTunes" class="podcast-meta-itunes">Subscribe to iTunes</a> |
		<a href="<?php echo $stitcher_url ?>" target="_blank" title="Subscribe to Stitcher" class="podcast-meta-itunes">Subscribe to Stitcher</a> |
		<a href="<?php echo $google_play_url ?>" target="_blank" title="Subscribe to Google Play" class="podcast-meta-itunes">Subscribe to Google Play</a> |
		<a href="<?php echo $spotify_url ?>" target="_blank" title="Subscribe to Spotify" class="podcast-meta-itunes">Subscribe to Spotify</a>
	</p>
	<?php
	$subscribe_display = ob_get_clean();

	return $subscribe_display;
}

And this is what it looks like on the episode page.

Link text updated

Step 5: Further customizations – images

If you want to customise the links further, say by adding images to each link, instead of text, you can replace the text with an html img tag. The image tag needs one attribute, src, which is the full URL to the image you want to use.

<a href="<?php echo $itunes_url ?>" target="_blank" title="Subscribe to iTunes" class="podcast-meta-itunes"><img src="https://mk0mekulela2vq47ka9y.kinstacdn.com/wp-content/uploads/2019/05/iTunes.png"></a>

The image I am using is not a great example, but it shows what’s possible.

iTunes image updated

Share with a friend!