[Resolved] Podcast Website design help

[Rob]

I’m building a website for my wife’s podcast. I plan to create a post for each podcast, which will contain the show notes and an embedded player. On the home page, I’d like to display a list of the most recent posts/podcasts. Functionality wise, I’d like there to be a player so the user can immediately play the episode, but I would also like the user to be able to click into the corresponding post. This is no different than a traditional blog set up. I’m just not sure how to incorporate the embedded podcast player and the ability to link to the post. I’ve attached a screenshot of what I’m looking for (from another theme)…I’m hoping you can provide some instructions as to how to do this.

https://github.com/fish71/Stuff/blob/main/Podcast%20screen%20shot%20with%20notes.png

Thanks!

[Elvin]

Hi,

You’ll need a third party plugin or the embed code for the embedded podcast player.

We can then set it up this way:

For this example, we’re going to use Spotify podcast links.

Install ACF, we’ll need it to associate your plugin episodes to your posts.

On ACF, add a new field group for the podcast fields.

On the newly created field group, create a new field with a label of “Podcast Embed Code”, with a Field name of “podcast_embed_code” and a Field Type of “OEmbed”. Make sure to save it.

The purpose of this field is for associating your embedded episode to your post on the blog list page.

After doing this, edit your episode posts. You should see a custom field with the label “Podcast Embed Code”. This is the field you’ve created.

On this field, you can place the oembed URL for your podcast episode.

Once you’ve saved your podcast episode oembed urls on your posts episodes, we can now fetch the custom field data from “Podcast Embed Code” or podcast_embed_code for the purpose of displaying it on the blog post list.

To do this, you can create a Hook Element.
https://docs.generatepress.com/article/block-element-overview/

In this Hook Element, you can place this code:

<div class="embed-container">test
    <?php the_field('podcast_embed_code'); ?>
</div>

And check “Execute PHP”, set the hook to “generate_after_content” and set the display rule location to “Blog”.

Here’s how it would look like.
https://share.getcloudapp.com/E0u4xmxL

Note: I just used Spotify as an example but we can do this for any podcast hosts that allows you to export your embed code. 🙂

[Rob]

By ACF, do you mean this plugin? https://wordpress.org/plugins/acf-extended/

[Tom]

Hi there,

This is the one: https://wordpress.org/plugins/advanced-custom-fields/

[Rob]

I thought I followed your directions exactly, but the player is not showing on my home screen. I’ll provide a few more details/questions and hopefully you can point me in the right direction.

1. Question…should I see the embedded player on the individual post, the home page (with recent posts), or both?

2. I’m using the “Latest Posts” block for my home page. Is this correct or should I display the most recent posts/episodes using a different mechanism?

3. The embedded play works fine if I paste into a Custom HTML block element directly into the post. I included a screenshot of the post page with the manually embedded player (via HTML) and a screenshot of the bottom of the home page.

https://github.com/fish71/Stuff/blob/main/Home%20Page.PNG
https://github.com/fish71/Stuff/blob/main/Post%20Page.PNG (scroll to right to see Field Group info)
https://github.com/fish71/Stuff/blob/main/Hook.PNG

Appreciate the help

[Elvin]

1. Question…should I see the embedded player on the individual post, the home page (with recent posts), or both?

You should see the embedded player working when you add it to the oembed field within Gutenberg editor when you’re editing the post:

Example: https://share.getcloudapp.com/xQuYBR47

Note: If you don’t see the oembed field within the post, you’ll have to go back to the ACF settings and make sure the it is set properly. https://share.getcloudapp.com/o0uqWY4G

3. The embedded play works fine if I paste into a Custom HTML block element directly into the post. I included a screenshot of the post page with the manually embedded player (via HTML) and a screenshot of the bottom of the home page.

You only need the link on the embed code’s src="" attribute placed on the oembed field.

2. I’m using the “Latest Posts” block for my home page. Is this correct or should I display the most recent posts/episodes using a different mechanism?

Ah right. This only works on the default archive post list pages of the theme. It won’t work on Latest posts block. I think this is the main issue.

If you’re placing post lists you intend to embed the podcasts with on static page, consider using a plugin that lets you hook things in instead of the Latest Posts Block.

We recommend WP Show Posts:
https://wpshowposts.com/

[Rob]

I pasted the src=”” portion of the link and the player does not show up in the bottom window…just an ‘underlined’ version of it. It’s clickable and when I click it, the player opens up in the same browser window. I’m building the website locally (using Local Sites by Flywheel). Any chance this could be why the player is not showing on the post? If so, any workarounds?

https://share.getcloudapp.com/eDuwNEJm

[Elvin]

It’s hard to tell without being able to inspect the site.

You can share the embed code on the private information text field so we could test it on our end as well.

By the way, if you want the embed player to appear on the single post page, you can also hook it in through the hook element you’ve created. Just add in “Posts – all posts” to the display rule.

[Rob]

Embed link provided.

Also in the code you provided for the hook…what is the purpose of ‘test’…I’m seeing the word in my blog post 🙂

test
<?php the_field(‘podcast_embed_code’); ?>

[Elvin]

Ah that test string can be removed. It serves no purpose.

Can you provide the full embed code including the <iframe> and its attributes?

Let’s try to rewrite the code to be added on the Hook element.

[Rob]

Embed code is attached.

[Elvin]

I’m afraid I don’t see the full embedded code. Can recheck if it’s added?

If you’ve added it in the reply text field, you have to delimit it using the code formatter.
https://share.getcloudapp.com/yAuZwzZ8

[Rob]

Not sure what happened. Here it is.

<iframe title=”Intro” height=”122″ width=”100%” style=”border: none;” scrolling=”no” data-name=”pb-iframe-player” src=”https://www.podbean.com/media/player/kfsib-f82755?from=pb6admin&download=1&version=1&auto=0&share=1&download=1&rtl=0&fonts=Helvetica&skin=1&pfauth=&btn-skin=107″></iframe&gt;

[Elvin]

Go to your ACF settings and create a new field with a Label “Podcast Embed Url”, a field name of podcast_embed_url and set its field type to Url. (you can delete the other one named podcast_embed_code if you want.)

Once saved, you’ll see a new field for it when you edit posts. This is where you should add the podcast URLs now.

You then change the code within your Hook element from this:

<div class="embed-container">
    <?php the_field('podcast_embed_code'); ?>
</div>

to this:

<div class="embed-container">
	<iframe title="Intro" height="122" width="100%" style="border: none;" scrolling="no" data-name="pb-iframe-player" src="<?php the_field('podcast_embed_url'); ?>"></iframe>
</div>

This will be how it would appear: https://share.getcloudapp.com/qGul9ZqR

[Rob]

Ok…getting closer. I followed your latest directions. Focusing on an individual post, the player doesn’t show if the hook is set to generate_after_content. If I use generate_after_main_content or generate_after_entry_content…it shows up. On my sample post, I have a few container blocks with some paragraphs within. Do the blocks impact anything?

Also, is it possible to place the hook inside a block? I’d like the player to re-size based on it’s container…hardcoding the height and width in the PHP doesn’t allow this I’m guessing.

[Author]

Posts