Skip to content
Kleis Docs

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 Audio

Section titled “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.

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

Section titled “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.

Section titled “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.

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

Section titled “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;
  }
}
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.