Launching sites left and right! The other week I launched the second of three sites I’ve been working on recently. We already talked about www.scarletcitychurch.org, and I haven’t launched the third yet, so today we’re going to talk about www.smallgroupresources.org.

Somehow we ended up with this amazing url…I’m sure some small group curriculum company wishes they had it. Anyhow, previously it was pointing at some pretty bland pages on our central church website. Well, last summer I decided to do something about that

The result is a pretty complex (at least in the code) WordPress site that still manages to be user-friendly and uncluttered on the front-end.

This one was actually a bit of fun to come up with. All the graphics, colors, etc are done by me (getting slightly better at this…still not a graphic designer though…) hah…I do like the black and yellow/goldish color scheme. I think they go well together.

On the back end, there’s a lot going on. The static pages are pretty simple, each with custom menus depending on the template (I absolutely LOVE the wp_nav_menu function that was introduced in WordPress 3.0…), and there’s a pretty clean/simple blog there too for the team to put their weekly email on. There’s also a “Category” list on the blog that restricts the results to posts tagged with the different series that the Small Groups team does in their emails (called “Lifelines”). This is important because of the next part:

Remember the splitting the loop into three for the Scarlet City Church website (Blog, Video, Sermons)? Well, for the Curriculum section of www.smallgroupresources.org I split it into 10! One for each type of curriculum they had.

Why not just have a list of the curriculum titles? Well, that would work, but posts are so much better because they allow for:

• Easy adding/ordering of curriculum items
• Commenting on curriculum items
• Rating (through a ratings plugin) of curriculum items
• Easy social sharing of individual curriculum items
• Better styling of the curriculum items and the meta-data

So, it was definitely worth the extra work to do that!

One other fun thing to note about the curriculum is that all of the different “meta” items (such as Author, Length, Purchase/Rent URLs, etc) are custom fields that disappear if there is no data. So if a certain study doesn’t have a specific length, it won’t show the “Length” tag.

This is accomplished using the following code:

<div class="authormeta">
		<?php $thereisauthor = get_post_meta($post->ID, author, true);
		if($thereisauthor){ ?><!--what is displayed when the author field is found-->
			By <?php echo get_post_meta($post->ID, author, true); ?><!--pulls the value of the author field-->
		<?php }else{ ?>
                     <!--what is displayed when no author field is found-->
		<?php } ?>
</div><!--authormeta-->

So here, it’s looking for the custom field value “author”. If it finds that, it will display the value entered. If it doesn’t find it, it displays nothing. If you want to use this, just replace “thereisauthor” and “author” with your own values. You can also have it display something instead of nothing…just place what you want to display after <?php }else{ ?>

So why do this instead of just enter it in the editor? Well, I wanted to style these differently and consistently, and you can’t always rely on or expect users to know the specifics of styling. Remember, we’re trying to make this as user friendly as possible

Anyhow, there are a bunch of those. Most are simple text entries. However, for the “Purchase this study” I wanted to provide a quick way to link to the Amazon.com product page.

So I used the following code:

<div class="purchasemeta">
		<?php $thereispurchase = get_post_meta($post->ID, purchase, true);
		if($thereispurchase){ ?>
			<a href="<?php echo get_post_meta($post->ID, purchase, true); ?>" target="_blank">Purchase this Study</a>&#8250;&#8250;
		<?php }else{ ?>
		<?php } ?>
</div><!--purchasemeta-->

So here it’s doing the same thing as the others, but it now puts the value of “purchase” as the value for a url that is linked to from “Purchase this Study”. Kind of cool.

Anyhow, check out the site and let me know what you think!

PS – we’re planning on doing a new video. That one was just to buy time

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!

So I’m very proud to announce my latest site to go live: www.scarletcitychurch.org.

I built a blog/landing page for these guys as they were getting started about a year ago (actually launched it almost exactly a year ago), and in the time since I’ve probably become about 500% better at this whole web-design thing.

Anyhow, so when it was time for them to create a more permanent and fully-featured church website as they near their church plant’s launch, I was very excited to be a part of that.

I’m pretty proud of how the site looks on the front end, but the real stuff I’m excited about is happening underneath the hood. I can honestly say I learned more through doing this project than I have on any other one.

Taking what is at it’s core a blogging engine and turning it into a fully-functional church website certainly has it’s challenges. A couple, just to name a few, include:

• Sermon & Video Archives
• Custom page templates
• Different post templates
• Editable text areas that aren’t a page or a post
• and a bunch more

I’m going to be talking about how I tackled some of those problems over the coming week or so (if I’m good about blogging/somehow find the time!)

I’m pretty excited about that. I think that I was able to come up with some pretty clever but elegant solutions to some of those problems.

Some of the cool features that the site includes are:

• What are essentially three different blogs on the site (blog, sermons, videos), all with their own unique styling and structure
• Customized “Single post” views for the different types of posts
• A theme options page allowing for editing of certain areas, like the footer, which would normally need to be edited through the theme’s code
• A custom log-in screen
• And a few more small things like custom dashboard widgets, pagination, and more…

Anyhow, I hope that you’ll check them out and let me know what you think of the site. I’m good friends with these guys, and I’m really excited about the impact that they’re going to have in Columbus, OH. If you’re ever in the area, check them out when they launch in April. I know that it’s going to be a special community on mission for God in that city.

Jay/Gabe/Mike … Thanks for letting me be a part of that!

Do you like good music? Yeah, me too.

You owe it to yourself to check out Mark Mathis. All his stuff is “name your own price”, which is an awesome thing for him to do.

It’s very chill and very good music.

Also – check out this sweet video he and his band (Public Radio) created for their Kickstarter Campaign:

Time Magazine recently named Mark Zuckerberg their 2010 “Person of the Year”. In terms of impact, I can’t say I disagree.

The article itself is fascinating, mostly a tribute to Zuckerberg and an insight into his mind and character, but I think the best part comes on page 9:

However much more authentic the selves we present on Facebook are than they were in the anonymous Internet wilderness that came before it, they still fall far short of our true selves, and confusing our Facebook profiles with who we really are would be a terrible mistake. We are running our social lives over the Internet, an infrastructure that was not designed for that purpose, and we must be aware of the distortions it creates or we will be distorted by them. The standard cliché for describing viral technology like Facebook has always been, “The genie is out of the bottle.” But Facebook inverts that. Now Facebook is the bottle, and we’re the genie. How small are we willing to make ourselves to fit inside?

-Lev Grossman, Mark Zuckerberg – Person of the Year

Couldn’t have said it better myself.

Check out the article for yourself.