[Resolved] Podcast Website design help

[Elvin]

You should make a separate Hook Element for the single post.

Create a new Hook element, set its display rule location to “posts – all posts”, set the hook to generate_after_entry_content and place the same code on its code area.

This should make the podcast embed iframe on the single posts pages as well but won’t interfere with the blog post list page as it’s an entirely independent and separate element. 🙂

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.

It’s possible if you make it a shortcode.

Here’s a PHP snippet making a shortcode:

add_shortcode( 'podbead_podcast_embed', function() {
    ob_start();
    echo '<div class="embed-container">
	<iframe title="Intro" height="122" width="100%" style="border: none;" scrolling="no" data-name="pb-iframe-player" src=".the_field('podcast_embed_url')."></iframe>
</div>';
    return ob_get_clean();
} );

You can then use [podbead_podcast_embed] to place on a shortcode block. 🙂

You can actually use this same shortcode to replace the codes within your Hook Elements. Just make sure “Execute Shortcode” is enabled.

[Rob]

There seems to be an error in the php

https://share.getcloudapp.com/8Luk2o4g

[David]

Hi there,

try changing:

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

to:

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

[Rob]

I’m back. I’d like to focus on the static home page. I’m using the WP Show Posts plugin to display the most recent posts. Is there a way to ‘hook in’ the embedded player to display with each post?

[Elvin]

We can try hooking it to wpsp_after_content hook within the plugin.

Try this PHP snippet.

add_action( 'wpsp_after_content', function(){
echo '<div class="embed-container">
	<iframe title="Intro" height="122" width="100%" style="border: none;" scrolling="no" data-name="pb-iframe-player" src="' .the_field('podcast_embed_url'). '"></iframe>
</div>';
}, 10 );

[Rob]

I was tinkering with the snippet and killed my site. I’m unable to even log into the admin panel. Any thoughts on how to resolve?

https://share.getcloudapp.com/v1uNRe8n

I navigated to error. Line 44 is the return statement
/**
* Retrieves the currently queried object.
*
* Wrapper for WP_Query::get_queried_object().
*
* @since 3.1.0
*
* @global WP_Query $wp_query WordPress Query object.
*
* @return WP_Term|WP_Post_Type|WP_Post|WP_User|null The queried object.
*/
function get_queried_object() {
global $wp_query;
return $wp_query->get_queried_object();
}

UPDATE….I just renamed the ‘snippet’ plugin and was able to log back in

[Rob]

Well, maybe not. I removed the “Code Snippets” plugin and then reinstalled. As soon as I activate, the error comes back. Any ideas?

[Rob]

Ok…was able to figure it out. Needed to log into the database and delete the info. All good now. I’m back to trying to get this working. I added the PHP provided but the player still won’t show up. The src=”” is not getting populated with the value from the field “podcast_embed_url”. I’ve included some screenshots. Now, if I paste the entire link (included below) into the php…it shows up (included a screenshot). If we can solve how to ensure the value from the custom field gets populated in src=””, I think we’ll be good.

Here is the embed code I’ve been playing with: <iframe style=”border: none” height=”90″ width=”100%” scrolling=”no” allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen src=”//html5-player.libsyn.com/embed/episode/id/17579087/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/2127de/” ></iframe>

https://share.getcloudapp.com/5zuAmGj4
https://share.getcloudapp.com/v1uNR2W6
https://share.getcloudapp.com/BluY05zo
https://share.getcloudapp.com/2NuERype

Hardcoded Link
https://share.getcloudapp.com/9Zu82XLo
https://share.getcloudapp.com/Jru1N6mr

[Elvin]

Nice one. Yeah you have to go to the database to delete the snippet with the error to make it work again.

Have you sorted this out?

Let’s change the shortcode, try this one:

add_shortcode( 'podbead_podcast_embed', function() {
    ob_start();
    echo '<div class="embed-container">
	<iframe title="Intro" height="122" width="100%" style="border: none;" scrolling="no" data-name="pb-iframe-player" src=".get_field('podcast_embed_url')."></iframe>
</div>';
    return ob_get_clean();
} );

Also, you may have to make sure the field type of podcast_embed_url is set to URL or text to make sure it the_field('podcast_embed_url') only prints out the URL for the shortcode to work properly (if you’re using it.)

Let us know how it goes.

[Rob]

I was more interested in trying to get this to work (vs using a shortcode)

add_action( ‘wpsp_after_content’, function(){
echo ‘

<iframe title=”Intro” height=”122″ width=”100%” style=”border: none;” scrolling=”no” data-name=”pb-iframe-player” src=”‘ .the_field(‘podcast_embed_url’). ‘”></iframe>

‘;
}, 10 );

[Elvin]

try changing the line the_field('podcast_embed_url') to get_field('podcast_embed_url').

I believe echo doesn’t work well with the_field() as it already has echo get_field() within its function.

[Rob]

Jackpot!

Thanks Elvin. Will be in touch if I have additional questions.

[Elvin]

Nice one. Let us know. 🙂

[Author]

Posts