UPDATE: There is a much better and updated version of this post here: http://ryanspilhaus.com/2011/04/wordpress-sermon-archives-custom-posts-taxonomies/

Today I’ll be talking some more about the recent website I launched for Scarlet City Church (www.scarletcitychurch.org).

One of the great things about WordPress is that you can, with enough work, get it to do pretty much anything. It’s incredibly flexible for something that was originally designed to be strictly blog software.

For that reason, in my opinion, WordPress is a great option for churches. There’s plenty of resources and pre-made themes out there for creating a church website, but I haven’t really seen any good solutions for creating a professional looking sermon archives. There’s a few plugins, but those generally aren’t customizable enough, and can be clunky. (Plus, I like to do as much as possible without plugins).

So, today I’m going to show you how to create a sermon archives for your WordPress site similar to the one at www.scarletcitychurch.org/sermons. I’m going to assume you have a basic knowledge of working with WordPress themes (PHP, HTML, CSS) but not too much.

To start, let’s talk about the logic of how we’re going to do this. The best way to display lists of separate content items by date is through blog posts. If we didn’t have a blog, we could essentially create a “blog” and style/structure it to be a sermon archives, but I’m guessing you’ll want a blog included on your site. (If not, skip these next few instructions.) Therefore, we’ll have to get a little creative and create two “blogs” on our site.

In order to do this, we’ll be utilizing WordPress’ “categories”. Normally WordPress pulls all of the categories into the blog feed, but we’re going to want to remove one (the sermons) from the main blog, and create a “blog” that pulls only one category (again, the sermons) into it.

To start, let’s set up your main blog. Normally, WordPress uses “The Loop” to get the posts. The loop typically looks something like this:

	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

		<div class="post">
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

				<div class="entry">
					<?php the_content(); ?>

			<?php endwhile; ?>

			<div class="navigation"> <!--page navigation code here--> </div> <!--Navigation-->

			<?php else : ?>

			<div class="post">

				<h2><?php_e('Not Found'); ?></h2>

			</div><!--post-->

		<?php endif; ?>

I’m not going to go into too much detail about this, since we won’t be using it!

Ok, let’s start. Open up your favorite text editor (I use TextWrangler…It’s free and really simple) and create a php file called “sermons.php” This will be your sermon page. At the top, enter:

<?php
/*
Template Name: Sermon Archives
*/
?>

This makes it one of the templates you can select when creating a new page.

Next, grab the code that you normally would use for your pages. (or create your own if you want the page styled differently. Anyhow – basically we’re going to be putting the sermon archives inside a page.

Now, here comes the special stuff.

	<?php
			$temp = $wp_query;
			$wp_query= null;
			$wp_query = new WP_Query('posts_per_page=15&cat=57&paged=' . $paged);
			while ($wp_query->have_posts()) : $wp_query->the_post();
		?>

This is your replacement Loop. The reason we’re not just using the regular Loop is that WordPress doesn’t really like more than 1 Loop in your site. Honestly, you don’t really need to know too much about it. What you should know though is:

• Place this right above where your sermons will be listed.
• The “15″ in here is the number of posts per page
• The “57″ is the category that it’s pulling. In this case, that’s the Category ID for the Sermons Category I created. You can find this by hovering your mouse over the category in the list of categories under “posts” in the the wordpress dashboard.

Next, we’re going to create the actual Sermon Container where they’ll be coming out.

				<div class="sermonlist">

					<div class="sermonspeaker">
						<?php echo get_post_meta($post->ID, 'speaker', true); ?>
					</div><!--.sermonspeaker-->

					<div class="sermonlistdate">
						<?php the_time('M d Y') ?>
					</div><!--.sermonlistdate-->

					<div class="sermontitle">
						<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
					</div><!--.sermontitle-->

					<div class="sermonexcerpt">
						<?php the_excerpt(); ?>
					</div><!--.sermonexcerpt-->

				</div><!--.sermonlist-->

Ok. That’s a lot. Here’s the explanation:

<div class="sermonlist"> 

- This sets up the div where the sermons are going to be living.

<div class="sermonspeaker">
<?php echo get_post_meta($post->ID, 'speaker', true); ?>
</div><!--.sermonspeaker-->

This you don’t necessarily need, but I think it’s a nice touch. What I’m doing here is making it so that when someone enters “speaker” as a custom field, it will pull the value of that and display it with it’s own formatting. It’s an elegant way to do it, because your user doesn’t need to mess around with formatting, and you don’t have to rely on the “post author” field, since you might have guest speakers, etc.

<div class="sermonlistdate">
	<?php the_time('M d Y') ?>
</div><!--.sermonlistdate-->

Pulls the date of the sermon. Remember to use WordPress’ scheduling functions when publishing to publish in the past if the sermon was preached previously.

<div class="sermontitle">
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div><!--.sermontitle-->

This gets the title of the sermon, and links to the single page for it, which we’ll get to soon.

<div class="sermonexcerpt">
	<?php the_excerpt(); ?>
</div><!--.sermonexcerpt-->

Not necessary, but it allows you to add some descriptive text as to what the sermon is about, what scripture, etc. Whatever you place in the “Post excerpt” box will show up here.

UPDATE

Oops…looks like I forgot to put in a pretty crucial part of this. The following should go directly after the previous code.

<?php endwhile; ?>

	<div class="navigation">
		 <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	         <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
        </div><!--Navigation-->		

<?php $wp_query = null; $wp_query = $temp;?>

What this does is it basically closes off your loop. The page navigation appears when the max # of sermons on the page appears. I use a different one, but it’s pretty complicated so I won’t go into that here. Above is the basic WordPress one. You can also peek into your theme’s blog file and see what it’s using for navigation.

After this, you should have the closing divs for the rest of the page that you placed all this code in.

END UPDATE

The reason everything is in it’s own Div is because I wanted to style them all differently. You could play around with this if you want. You’ll want to style it to fit your theme, but for reference, here’s what I used and what it looks like:

.sermonlist {
	padding: 5px;
	margin: 0;
	border-bottom: 1px dotted #000;
}

.sermontitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	text-align: left;
	color: #1d1d1d;
	margin: 0 0 -5px 0;
	padding: 0;
}

.sermontitle a, .sermontitle a:visited {
	color: #1d1d1d;
	text-decoration: none;
	border-bottom: none;
	margin: 0;
	padding: 0;
}

.sermontitle a:hover {
	color: #8d001a;
	text-decoration: none;
	border-bottom: 1px dotted #8d001a;
	margin: 0;
	padding: 0;
}

.sermonexcerpt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: none;
	text-align: left;
	color: #1d1d1d;
	font-weight: normal;
	margin: 0;
	padding: 0 0 0 10px;
}

.sermonlistdate {
	font-weight: bold;
	font-size: 12px;
}

.sermonspeaker {
	float: right;
	font-weight: bold;
	font-size: 12px;
}

I’m sure there’s some sloppy code in there (still kind of new to this) but it works for me

Here’s what it looks like:

Ok, now that we’ve got our list here, lets create the single sermon view.

Now, this presents a problem because by default WordPress looks for single.php and applies that to all single posts. So we need WordPress to find a different single file.

What we’re going to do now is create single-sermon.php and single-blog.php. Go ahead and copy everything you had in single.php into single-blog.php. This will be our single blog post template. You don’t need to do anything else with that.

Next, open up single.php and replace everything in it with

<?php
$post = $wp_query->post;
if ( in_category('57') ) {
include(TEMPLATEPATH . '/single-sermon.php');
}
else {
include(TEMPLATEPATH . '/single-blog.php');
}
?>

What this does is check the post category. If it’s “57″ (be sure to change this for your category!!!) it will take us to the single-sermon.php page, and if it’s any other category it will take us to single-blog.php. (Theoretically I think you could add more different single post styles by adding more if statements, but I haven’t tried).

Now, we need to style single-blog.php. You can probably copy most of what you had in single-blog.php and adjust accordingly, or build it from scratch.

Basically what I did was take the basic page template I had before, added some different areas like speaker, date, etc and styled accordingly.

Here’s what it looks like:

Ok, now let’s actually figure out how to add the sermon audio.

For this the best I could find was a plugin called “PowerPress” by Blubrry. Go ahead and install this and play around with the settings. Some important ones include:

Media Presentation – this is where you determine where your player will appear
Download Link – Makes your audio downloadable

I’d also adjust your audio player. I like using the 1 pixel out audio player, with Play Animation set to “no” so that it’s always full length.

Now, to add the sermons follow these steps:

1. Remember to record the audio in “Joint Stereo” for maximum compatibility (as opposed to mono).
2. Upload the audio via FTP into the “Audio” folder in your directory. You could name it whatever you want, but I think Audio makes sense…
3. Copy the URL of the media. It will be http://yourwebsite.org/audio/filename.mp3 if you did step 2 correctly.
4. Create a new post and categorize it as a “Sermon”.
5. At the very bottom, add to the “Podcast Episode” box in the “Media URL” Field. (this was added when you installed PowerPress.
6. In the “Custom Fields” area, select or enter “speaker” as the name. In the box to the right, enter the name of the speaker. Click “Add Custom Field”. (this is for the speaker field we talked about earlier)
7. Add any text you wish to display below it to the content box. Also, add anything you want to display on the sermon archive page to the “excerpt” box. (text in the content area will display on the single page, text in the excerpt will display on the sermon list. This gives you more control over your excerpt)
8. Publish Post.

And there you have it! It’s a bit complicated, but once it’s up and running it works like a charm! You can also add social media sharing, commenting and other fun stuff to your single-sermon.php file really easily.

Hope that helps!