Sermon Block Reference

These dynamic blocks read synchronized data from the current Episode. Use them in a single Episode template or while editing an Episode, not on a general page that has no episode context.

Kleis Sermon Video

Purpose: Displays the current episode’s on-demand video from Planning Center Publishing.

Source: Uses the episode’s library video URL, iframe embed code, and optional thumbnail. Live video settings remain separate.

Placement: Add it to an Episode template or a Query Loop for episodes.

Empty state: Displays nothing when no usable video exists.

Players: Supports YouTube, Vimeo, direct video files, and provider iframe codes. Other video URLs display a link.

Kleis Livestream

Purpose: Displays the selected channel’s current active livestream on any page.

Settings: Select a channel in the block inspector. Run a manual sync first if the channel is missing.

Source: Uses the channel’s current episode and active live schedule, including applicable default video settings.

Refresh: Requests current information on page load and every minute while visible. Works on cached pages and requires JavaScript.

Empty state: Displays an unavailable message when no active livestream exists. No selected channel produces no output.

See Add Sermon Video and Livestreams for configuration and supported players.

Kleis Sermon Audio

Purpose: Displays a responsive sermon audio control bar. It includes play/pause, centered circular 15-second rewind and forward controls, seeking, elapsed and total time, playback speed, and a download link.

Source: Uses the external library audio URL when supplied. For Planning Center-hosted audio, Kleis requests a fresh short-lived file access link when playback begins, including on cached pages. If a hosted playback request fails, the player retries once with a new request before showing an unavailable message.

For hosted audio, playback refreshes only the selected episode’s download link. It does not scan the sermon library. Kleis shares fresh links between listeners and limits repeated refresh requests during an outage. Password-protected and unpublished episodes cannot use the public hosted-audio endpoint.

Compatibility: The browser’s native audio player remains available until the enhanced controls load. Visitors can still listen when JavaScript is disabled or unavailable. Supported devices can show the current sermon in lock-screen, headset, and media-key controls.

Editor: Shows a placeholder because the final player is rendered on the front end.

Empty state: Displays “Audio not available.”

Styling: Target .kleis-sermon-audio, .kleis-sermon-audio__controls, and .kleis-sermon-audio__button in theme CSS when block controls are not sufficient. The block intentionally does not display sermon metadata, so place it beside your theme’s post title, image, and terms.

Kleis Episode Resources

Purpose: Displays valid Planning Center episode resource links with file-type icons.

Source: Each resource needs both a title and a valid public web URL.

Editor: Shows a placeholder; resource links appear on the front end.

Empty state: Produces no output, preventing an empty list from taking up space.

Styling: The list uses .kleis-episode-resources, with item and link classes beneath it.

Kleis Sermon Links

Purpose: Displays a compact row of icons for Apple Podcasts, Spotify, SermonAudio, and Church Center. Each available destination has a centered, muted, uppercase name below its icon.

Artwork: The Apple Podcasts, SermonAudio, and Church Center icons ship with the plugin. Spotify uses an inline icon.

Source: Uses the Apple Podcasts and Spotify URLs configured in that channel’s Planning Center Publishing podcast settings, the optional SermonAudio URL on the channel in WordPress, and the episode’s Church Center URL from Planning Center Publishing. Run a manual sync after you add or change Apple Podcasts or Spotify. Add or change SermonAudio at Episodes > Channels, then edit the channel.

Artwork: Uses the official Apple Podcasts and Spotify artwork. Service colors show by default, and each icon softens on hover or keyboard focus. See the Apple Podcasts Identity Guidelines and Spotify design guidelines when adding custom styles or services.

Editor: Shows a placeholder because the final services depend on the Episode’s channel.

Empty state: Produces no output when the current Episode has no valid destination. Church Center can still appear when an episode has no channel.

Styling: Use .kleis-podcast-links, .kleis-podcast-links__services, .kleis-podcast-links__service, .kleis-podcast-links__link, and .kleis-podcast-links__service-name to match the row to your theme.

Example theme CSS

Add this CSS in Appearance > Editor > Styles > Additional CSS, your child theme, or your site’s custom-CSS area. It creates a soft panel similar to Church Center’s presentation while keeping the service icons accessible and easy to tap.

.kleis-podcast-links {
  align-items: center;
  background: #f7f7f7;
  border-radius: 0.75rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 1rem 1.5rem;
}

.kleis-podcast-links__label {
  color: #6b6b6b;
  font-size: 1.25rem;
  font-weight: 700;
}

.kleis-podcast-links__services {
  display: inline-flex;
  gap: 0.75rem;
}

.kleis-podcast-links__service {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: center;
}

.kleis-podcast-links__link {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  transition: transform 150ms ease, opacity 150ms ease;
  width: 2.75rem;
}

.kleis-podcast-links__link:hover,
.kleis-podcast-links__link:focus-visible {
  opacity: 0.7;
}

.kleis-podcast-links__link:focus-visible {
  outline: 3px solid currentcolor;
  outline-offset: 3px;
}

.kleis-podcast-links__link svg {
  height: 2.25rem;
  width: 2.25rem;
}

.kleis-podcast-links__link img {
  display: block;
  height: 2.25rem;
  width: 2.25rem;
}

.kleis-podcast-links__service-name {
  color: #808080;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .kleis-podcast-links {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }

  .kleis-podcast-links__label {
    font-size: 1.125rem;
  }
}

Optional data changes layout

Preview episodes with and without audio, resources, channel destinations, and a Church Center URL. Place surrounding spacing on a parent Group when possible so hidden optional blocks do not leave awkward gaps.

You should now be able to: choose the correct sermon block, place it in Episode context, predict its empty state, and identify the stable CSS class available to your theme.