Create a Custom Sermon Grid with Beaver Builder and Sermon Manager

Sermon Manager is the sermon tool I use in most of my custom site builds. Admittedly, it doesn’t look great out the box (they are coming out with a PRO version to fix some of that). But, it got a LOT easier to customize the look I wanted when Beaver Themer came out.

Using Beaver Builder’s post module to create custom post layouts and then using Beaver Themer to create the actual sermon layout as well as the archives has been a thrill to play around with and build with!  Shout out to Bodie Quirk for pioneering some of this at the beginning of 2018 when we discovered you can use ‘post terms list’ to identify Sermon Manager taxonomies in Themer.

Before we jump in, will you take a sec and hit that Subscribe Button at the top of the page? Thanks!

In this tutorial I wanted to look at the actual post layout that lists all of your sermons. This is usually one of the top three pages that someone will view on your site so it’s pretty crucial that it is up to date, easy to navigate, and easy on the eyes. Take a look below to see what we cover and make it easier for you to navigate the video.

The Rundown:

Use the custom post layout in Beaver Builder to add Sermon Manager terms to your post layout and easily create a custom sermon grid for your WordPress site.

What’s in this Session:

• Overview of the video (:30)
• Why don’t I use any addons for custom posts? (2:30)
• Explain host custom post layouts work (4:10)
• Start building our own custom layout (6:35)
• Module settings (7:05)
• Out the box look (8:02)
• Tweak CSS for Sermon Title (8:55)
• Adding Preacher name with BB (9:22)
• Adding Series name with BB shortcode (10:15)
• Add Font Awesome icons (10:48)
• Adding CSS to the speaker, series and icons (12:00)
• Adding class name and CSS to the preacher (12:35)
• What’d I do wrong + awkward silence . 🙂 (14:00)
• Adding class name and CSS to series (14:55)
• Padding stuff (15:58)
• Remove post excerpt bc I don’t need it (16:22)
• Changing the ‘read more’ link (16:45)

Tools Used:

Beaver Builder: https://wpfor.church/getbeaverbuilder
Sermon Manager: https://wpforchurch.com
Font Awesome: https://fontawesome.com

Code Needed:

Sermon Manager and Beaver Builder take a little finagling to work together, but the Beaver Builder shortcodes couples with Sermon Manager’s taxonomies make it easy to insert them into your custom post layouts.

This is the HTML and the CSS from the post that I walk you through at the beginning of the video. I’d love to see how you take it and make it your own! Share a link to your tweaks in the comments. 🙂 The video is pretty thorough on where to add them but if you need someone to take a peek or a little help finessing the CSS or HTML to your needs, let us know!

Hopefully this was helpful! Leave me a comment below on what you’d like see, other tutorials you want to request and (even more fun) drop in a link to your sermon page so we can see what you are working with!