Filed Under:

Create a Custom Sermon Grid with Beaver Builder and Sermon Manager

youtube-video-thumbnail
Subscribe to WP for Church on YouTube

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!

Hey guys! I am a church leadership and creative guy living in the Atlanta area with my awesome wife and two kiddos. I've worked on staff with a number of churches as well as traveled full time as a conference speaker. Now, I work full time at The Reach Company helping ministries and businesses tell their story and make an impact online.

Get Beaver Builder Now!

Latest Posts

Create a Resource Library with Beaver Builder

Do you really need an SSL?

PastorBlogs.com beta is live!

PastorBlogs.com is coming!

Let's Make it Better

Our goal is to help church leaders and volunteers get the most out of their WordPress site. Join our mailing list to get all the new WordPress Tools & Tuts (and the occasional WordPress deal) right in your inbox!

Newsletter Form (#1)

2 Comments

  1. Greg Dietrich on September 11, 2018 at 8:13 AM

    Hey Andrew, it would be cool if you spun up a demo site where you can keep some of these tutorial examples so that we can see and feel what they look like.

    • Andrew Peters on September 14, 2018 at 8:53 AM

      Hey Greg. I had a caching issue with the code I supplied not showing up correctly. Should be fixed now if you had trouble seeing it your first time on this post. 🙂

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.