[Tutorial] Podlove Web Player 5 Wordpress Plugin Core Concepts

Podlove Web Player 5 is all about customization. The companion Wordpress plugin gives you access to all the bells and whistles.

Conceptual Foundation

Lets sort some basic terms out in order to get a common understanding around the customization concepts of Podlove Web Player. The Podlove Web Player seperates strictly podcast related data (like the episode title, summary, audio, chapters, …) and data that is used to change the appearance of the player (colors, default tab, …). Most of the podcast related data is provided from plugins like Podlove Publisher, this plugin is all about managing the data to change the player appearance.

Configuration

A configuration is a collection of settings that change the default behaviour of the player. For instance what tab is active by default, what sharing channels should be available in the player and also what podcast clients should be shown in the Subscribe Button.

Screenshot

config

Themes

A theme is a collection of color tokens and fonts. You might think about it like a branding for your podcast. Podlove Web Player 5 uses 8 theme colors and 3 different font stacks to change the color and font appearal.

Screenshot

theme

Templates

In contrast to previous player versions Podlove Web Player 5 allows you to completely customize its design. This comes in handy if you want to have different designs for different use cases like overview, episodes or sidebar players. It can also be used to strip down features of the player. Since this involves a basic understanding in HTML and the css framework tailwind it is a feature for advanced users. This opens up the ability to share designs independently from it’s theme. To give you some impressions the Wordpress plugin already ships with 3 different templates.

Screenshot

template

Flexibility is Key

The feature set of Podlove Web Player 5 can be a bit overwhelming. For a quick start we provide a default for configurations, themes and templates that can be tweaked. Default is, as the name may indicate, the default appearance of the player. Accordingly changing the default will change Podlove Web Player 5 instances that doesn’t get a specific configuration, theme or template.

If you want to go fancy and adapt the player to different use cases, you can add new configurations, themes and templates. Configurations, themes and templates are not connected and can be mixed and matched as you please. For instance: if you have a single podcast but different use cases (overview, episode or sidebar specific players) you propably will have 3 different templates but only one theme and one configuration.

Once defined you can use configurations, themes and templates in shortcodes, blocks and also publisher templates:

Shortcode

Shortcode
[podlove-web-player
  theme="mycustomtheme"
  config="mycustomconfig"
  template="mycustomtemplate"
  title="My episode title"
  subtitle="Episode Subtitle"
  poster="/files/path/to/poster.png"
  chapters="/files/path/to/chapters.json"
  transcripts="/files/path/to/transcripts.json"
  src="http://mysite.com/mymedia.mp3″
  size="1337"
  duration="03:33"
]

Gutenberg Block

Screenshot

gutenberg-block

Podlove Publisher

Screenshot

player-publisher

2 Likes

How can someone add font sources and customize the places in which different fonts appear?

1 Like

How do you get rid of the standard elements on the bottom of the player? For instance, how do you remove the “download” button from the player? Or the “info” bunnon? I can’t find the specifics on this in the documentation.

That’s not part of the web player, these are separate elements. You can remove them under Podlove > Templates.

Thank you, Eric. Forgive my ignorance, but is there a code example for the template that has the download and share buttons removed? I a bit of a newb here. Sorry.

Sure, this is a simple one:

{% if not is_feed() %}

    {{ episode.player }}

{% endif %}

Thanks, Eric. I finally figured out how to do what I needed using a combination of the Podlove Publisher templates and the Podlove Player templates using Player 5. Seriously awkward. Here’s the Publisher template:

{% if not is_feed() %}

{# display web player for episode #}
{{ episode.player({ config: "default", theme: "dark", template: "default" }) }}

{% endif %}

To remove the download button and other elements I didn’t want, I had to modify the Player template HTML separately.

Also, I had to guess that there was a “dark” theme for the player. Fortunately there was one. It would be nice to have a list of the available templates for the player. I haven’t been able to find such a list.

If anyone else has issues with this, hit me up. I might be able to guide you through it.

1 Like

Thank you for the feedback. We’re aware that player integration is not as simple as it should be but we’re working on it and appreciate comments like yours :slight_smile:

Awesome. Thanks Eric. The apps are great, though. Maybe I’ll write a simple users guide.

Any chance of getting a list of available themes for the player?

Keep in mind that Podlove Publisher and Web Player are related but aren’t required to use the one or the other. So every integration needs to be reflected in the plugin feature set. To address issues users reported I’ve started to enhance the Web Player plugin with a default appearance and a blueprint ability in v5.1.0.

Since the Web Player is all about customisation we only provide blueprints that you can further customise. Starting with version 5.1.0 you get beside default theme 2 additional themes that match with Wordpress TwentyTwenty and Wordpress TwentyNineteen. I’ve also added a new ‘classic’ template beside default, compact and sidebar that will provide a Web Player 4 alike player header section.

I would highly appreciate contributions to onboard users, please see if you can identify missing information in this articles:

I recently upgraded to the version 5 of the web player.
First thing I missed: the (i) info tab/icon is missing. It was the first icon in version 4.
How can I get it back? :flushed:
Thanks a lot! :pray:

In the default template the info icon is not present. If you want to have it back you could simply add a new template in the player configurator and use the “classic” option as your boilerplate :slight_smile: Also make sure to select the newly created template as the default.

1 Like

Thx! Worked like a charm! :+1:

1 Like

If someone could explain what the font section and its different fields do, I’d appreciate it.