Sermon Shelf 1.0 · Install guide

Your sermons, properly shelved.

Sermon Shelf turns the sermons blog you already have on Squarespace into a library people can browse by series, by book of the Bible and by speaker, with search and a player that remembers where they stopped. Setting it up takes about ten minutes and you won’t need to touch any code beyond one paste.

Before you start

• A Squarespace plan that runs JavaScript, which means Core, Plus or Advanced on the current plans, or Business, Commerce Basic or Commerce Advanced on older ones. The Basic and Personal plans don’t run custom scripts, so the shelf can’t work there.
• Your sermons in a blog, which most churches already have (often doubling as the podcast feed). The blog has to be public, though it doesn’t need to be in your navigation.
• Squarespace 7.0 or 7.1. Both work.

Install

1. Find your blog’s address. Open the sermons blog on your live site and look at the address bar. If it reads yourchurch.org/sermons, the part you need is /sermons.
2. Make a page for the library. I’d suggest a new page called “Sermons” and pointing your navigation at it, while the blog itself stays where it is (it still holds each sermon’s own page and powers your podcast). You can also add the shelf to an existing page.
3. Add a Code block. Edit the page, add a block and choose Code. Leave the mode on HTML and switch “Display source” off.
4. Paste. Open paste-into-code-block.html from this download in any text editor (TextEdit or Notepad are fine), copy everything and paste it into the Code block.
5. Point it at your blog. Near the top of what you pasted you’ll see data-source="/sermons". Change /sermons to your blog’s address from step 1.
6. Give it room. On Squarespace 7.1, drag the Code block’s handles so it spans the full width of the section. On 7.0 it fills the column it sits in.
7. Save and look at the live page. Squarespace doesn’t run scripts inside the editor, so you’ll see an empty block while editing. Open the page in a private window, or log out, to see the shelf.

Run the setup check

Add ?shelf=check to the end of your library page’s address, for example yourchurch.org/sermons-library?shelf=check. A panel appears above the shelf showing how many sermons it found, how many have audio, artwork, a series, a passage and a speaker, and which tabs are showing. Underneath is a short list of what to tag to fill in the gaps. Visitors never see this panel unless they type that address themselves.

Getting the most out of it

Sermon Shelf reads what you already put in each blog post. Nothing has to change for it to work, but a few habits make every tab richer.

Series

Give each sermon a category named after its series, such as “Romans: The Gospel in Full”. The series artwork comes from the newest sermon in the series that has a thumbnail image, so if you add your series graphic as each sermon’s thumbnail (most churches already do), the grid looks after itself. If you use categories for something else, tag sermons with Series: Romans instead and add data-series="tags" to the shelf (see the options below).

Scripture

The Scripture shelf lights up the books you’ve preached from. It finds passages in the title (“No Condemnation (Romans 8:1–17)”), in the excerpt, in a tag such as Scripture: Romans 8:1–17, in the audio block’s title, or on any line in the post that starts with “Scripture:”, “Reading:” or “Passage:”. Common abbreviations work (Rom 8, 1 Cor 13, Ps 23, Jn 3:16). A plain tag with a book’s full name, like Jonah, also counts.

To keep false matches out, a book name on its own in a title is ignored, so a speaker called Mark doesn’t become the Gospel of Mark. Dates like “Mar 15” are ignored as well.

Speakers

The speaker comes from a Speaker: Jane Smith tag if there is one, then from the Author field of the post’s audio block, and lastly from the blog post’s author. If the post author is just whoever uploads the sermons, fill in the audio block’s Author field and the shelf will use that instead.

Audio and video

Sermons with a Squarespace audio block get a play button. Sermons with a YouTube, Vimeo or Squarespace video get a Watch link instead. The player keeps each listener’s place in their own browser, so they can come back later and carry on.

Options

Everything is set with attributes on the <div> line. You only need the ones you want to change.

A shelf that opens on Scripture and ignores a “Sunday” category looks like this:

<div data-sermon-shelf data-source="/sermons" data-start="scripture" data-ignore="Sunday"></div>

Changing the wording

Every label can be changed, which is handy for other languages. Put this in the Code block above the rest of the paste and change only the lines you want:

<script>
window.SermonShelfStrings = {
  series: 'Series',
  scripture: 'Bible',
  speakers: 'Preachers',
  all: 'All messages',
  latest: 'This week',
  listen: 'Listen'
};
</script>

Troubleshooting

The block is empty while I’m editing

That’s normal. Squarespace doesn’t run scripts in the editor. Check the live page in a private window.

“The sermons couldn’t be loaded”

Open the page with ?shelf=check on the end and the panel will tell you why. It’s nearly always one of three things: data-source doesn’t match the blog’s address exactly, the blog is password protected or members-only, or the address points at a normal page instead of a blog.

The speaker shows our administrator’s name

Fill in the Author field on each audio block, or add Speaker: tags. If most sermons already name a speaker that way, the shelf leaves the rest blank rather than guessing.

A tab I expected is missing

Tabs hide themselves when there isn’t enough to fill them, for instance Series when fewer than one sermon in ten belongs to a series. The setup check shows the numbers.

The search bar hides under my header when I scroll

The shelf looks for anything pinned to the top of the window and sits underneath it, which works on every template I’ve tested. If yours is different, email me the page address and I’ll take a look.

New sermons don’t appear straight away

The shelf checks for changes on every visit with one quick request, and refreshes its copy when your blog changes. If a visitor’s browser blocks storage, it simply loads the archive fresh each time.

Squarespace 7.0 with Ajax loading

Some 7.0 templates load pages without a full refresh. The shelf listens for that, but if it only appears after a reload, turn off Ajax loading under Design → Site Styles.

Updates and help

Updates for the 1.x versions are free. When one comes out you’ll get an email with the new files, and you replace the old paste with the new one. Your settings live on the <div> line, so keep that line.

If you get stuck, email kris@singhstudio.co.nz with your page address and what you’re seeing. It helps to include a screenshot of the ?shelf=check panel.