Here’s a link to something awesome.

My Fiance and I have been to quite a few of the better pizza places around and I’ve come up with a little chart to rank them all.

Note – I like the classic Neapolitan pizza – like you get in Italy. I am not as big of a fan of the deep dish ones that come out of Chicago – though they aren’t bad. But keep this in mind when reading the rankings.

The Champion

1. Il Canale – This pizza is absolutely sublime. And they’re pretty big too! This little place in Georgetown is absolutely fantastic. They recently earned the official certification of the Associazione Verace Pizza Napoletana, an organization dedicated to preserving authentic Neapolitan pizza-making traditions, as being genuine Neapolitan Pizza.

UPDATE 1A. Pupatella – Every bit as good as il Canale and 2Amys, but with a much more casual atmosphere. Plus, they’ve got killer Gelato!

Fantastic

2. 2Amys – The previous champ, and one of the only other places in DC with the official certification of the Associazione Verace Pizza Napoletana, they only reason they lose out to Il Canale is because the atmosphere can be a bit of a zoo sometimes. But make no mistake, this is fantastic pizza.

3. Red Rocks – This is the closest thing to the three above it. The thing that really separates the best pizza places from the rest is the way they do Margherita pizza. Go for the buffalo mozzarella. It’s worth it.

Solid Dinner

4. Pizzeria Paradiso* – Great pizzas – big enough to share. Very close to making it to the top level.
5. Rustico* – Also extremely good. A bit pricier than some of the others here, but delicious.
6. Matchbox – Cool atmosphere and good pizzas.
7. Fireworks* – Good pizzas. Not the Italian style I prefer, but still solid.
8. Pete’s New Haven Style Apizza – Huge pizzas with very nice ingredients. The New Haven Style is a bit different than the others on the list, but still good.
9. Lost Dog Cafe* – About 100 different pizzas (seriously) and sandwiches. Pretty darn good.

Don’t bother
10. Joe’s Place Pizza & Pasta
11. Dominoes
12. Papa Johns
13. Pizza Hut

*I don’t drink, but I have been told that these ones have superb beer menus.

Anyhow, enjoy your pizza! There’s a few that I still want to try, so don’t hate if I don’t have your favorite on here.

Bon Iver – Bon Iver

The Civil Wars – Barton Hollow

James Vincent McMorrow – Early in the Morning

John Mark McMillan – Economy

Josh Garrels – Love & War & The Sea In Between

Honorable Mentions
Andy Zipf – Jealous Hands
Florence & The Machine – Ceremonials
Foster the People – Torches
Katie Herzig – The Waking Sleep
Matt Kearney – Young Love

1. It’s responsive – adjust your browser window’s size to see what I mean. This also means that if you view it on an iPhone/iPad or other mobile device it will automatically adjust itself to be optimized for that device.
2. It’s focused less on the blog (which I updated too rarely) and greatly improves the Portfolio (Work) section
3. It’s pretty cool looking – I did all the graphics myself.

If you check out the portfolio page, you’ll notice it bears a similarity to Pinterest. I thought that was a pretty cool effect that I was able to do via an awesome jQuery plugin by David Desandro called Masonry.

Let me know what you think!

I went ahead and added some of my better stuff – so check it out!

Along with the wonderful centerpiece at the top by the tremendously talented Michael Sanders, I created a fun vertically-scrolling website (as you click the navigation it will “jump” to the next page) for them that integrated Michael’s save the date graphics. I also came up with some of my own, so that was fun

Anyhow, I used a couple of semi-advanced features in building it. I took advantage of the new CSS3 text-shadow property. You can see that in the headings and when you hover over the names of the wedding party I also integrated some Google Web Fonts into it, so that was fun.

Check it out! www.chrissyanddavid.com

Generally for these you have two options if you’re building your site in WordPress:

1. Use a plugin like Featured Content Gallery or Dynamic Content Gallery.
2. Use a hard-coded jQuery slider that you have to go into the theme templates to change.

We always used Featured Content Gallery on our sites since it was the most elegant and easiest way for people who don’t know how to code to create a featured content gallery. However, using a plugin has several shortcomings:

1. Slows down your site – the more plugins you use the slower it gets
2. Can be confusing – Featured Content Gallery requires multiple steps and involves things that novices & people unfamiliar with obscure WordPress functions would have difficulty learning
3. Inflexible – You don’t have much room to customize the plugin beyond what’s already built in, and it can be harder to make it do specific things. For example, we couldn’t link to an external website.

Anyhow, there’s plenty of reasons you’d want to do this without a plugin. So let’s find out how!

I’m going to assume a few things:

• That you have a fairly decent grasp of CSS
• That you’re comfortable editing WordPress’ template files

Note: Essentially this tutorial is a manual for combining two other excellent tutorials – Soh Tanaka’s excellent Automatic Image Slider and Ralph’s Theme Options Tutorial over at ForTheLose.org

Steps:

1. Add jQuery Slider
2. Add Theme Options to control it from the admin console
3. Integrate Theme Options to slider so that it works!

Step 1 – Add jQuery Slider

Instead of re-inventing the wheel here, I’m going to have you go over to Soh Tanaka’s Automatic Image Slider tutorial and add it to your site.

You’ll have to do a few things differently since you’re in WordPress (and a few things he doesn’t cover that you might not know):

Call jQuery from header.php

WordPress actually bundles jQuery by default, so it’s really easy to grab it. Paste the following above wp_head in your header.php

		<?php wp_enqueue_script( 'jquery' ); ?>

And there you go! If you view the source code you should see jQuery loaded up. There’s a few other/better ways to do this, and if you’re curious you can Google it, but this is the quickest way for our purposes.

Next you’ll want to put the jQuery code he gives you and put it in its own file and call it.

Create a folder in your theme files called js and create a file called script.js and place it in there.

In that file, paste the following code:

jQuery(document).ready(function(){

// Code Goes Below this Line

	//Show the paging and activate its first link
			jQuery(".paging").show();
			jQuery(".paging a:first").addClass("active");

	//Get size of the image, how many images there are, then determin the size of the image reel.
			var imageWidth = jQuery(".window").width();
			var imageSum = jQuery(".image_reel img").size();
			var imageReelWidth = imageWidth * imageSum;

	//Adjust the image reel to its new size
			jQuery(".image_reel").css({'width' : imageReelWidth});
			
//Paging  and Slider Function
	rotate = function(){
    var triggerID = jQueryactive.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    jQuery(".paging a").removeClass('active'); //Remove all active class
    jQueryactive.addClass('active'); //Add active class (the jQueryactive is declared in the rotateSwitch function)

    //Slider Animation
    jQuery(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
	rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        jQueryactive = jQuery('.paging a.active').next(); //Move to the next paging
        if ( jQueryactive.length === 0) { //If paging reaches the end...
            jQueryactive = jQuery('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

	rotateSwitch(); //Run function on launch		
	
//On Hover
jQuery(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
jQuery(".paging a").click(function() {
    jQueryactive = jQuery(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});	

// Code Goes Above this Line	
	
});

The reason we’re doing it slightly differently is because WordPress doesn’t play very nicely with the $ that jQuery uses, so we’ll replace it with the original “jQuery” in our code. Other than that it’s the same.

Ok – now you want to call that from your header, so we’ll go ahead and add it right below wp_head this time:

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/script.js"></script>

This calls your script.js. Hooray!

Ok, so you should be all set with the image slider. We’re not going to be touching the CSS, but if you need to adjust the size of the slider (or the little page ribbon) you can change it there. I prefer to have the page numbers lower to the bottom of the slider myself, but it’s up to you.

Your HTML should look like this:

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

Pretty soon we’re going to hack that all up, so bear with me

Step 2 – Create a Theme Options Page

Ok – so we have our slider. Great. Now how do we get it so that the church administrator, who doesn’t know a div from a selector, can change the images and links easily?

That’s where Theme Options Pages come in handy. You’ve probably seen them – where you can change things about a theme such as the logo or colors or any number of things. I’m about to give you a lot of code that you will place in functions.php (note! Make a backup first…messing up your functions.php can REALLY mess up your site).

If your theme already has a functions.php, just copy everything from “start of theme options” to “end of theme options” and paste it in-between the <?php at the beginning and the ? > at the end

<?php
//code goes below this line
// Start of Theme Options
 
$themename = "Theme Long Name";
$shortname = "shortname";
$options = array (
 
array( "name" => "Feature #1",
	"type" => "title"),
 
array( "type" => "open"),
 
array( "name" => "Feature #1 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #1.",
	"id" => $shortname."_feature_1_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #1 Link",
	"desc" => "Place the url of the page you want Feature #1 to link to.",
	"id" => $shortname."_feature_1_link",
	"type" => "text",
	"std" => ""),	
	
array( "name" => "Feature #2",
	"type" => "title"),
array( "type" => "open"),

array ( "name" => "Feature #2 Checkbox",
	"desc" => "Check this box to show Feature #2",
	"id" => $shortname."_feature_2_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #2 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #2.",
	"id" => $shortname."_feature_2_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #2 Link",
	"desc" => "Place the url of the page you want Feature #2 to link to.",
	"id" => $shortname."_feature_2_link",
	"type" => "text",
	"std" => ""),		
	
array( "name" => "Feature #3",
	"type" => "title"),
array( "type" => "open"),

array ( "name" => "Feature #3 Checkbox",
	"desc" => "Check this box to show Feature #3",
	"id" => $shortname."_feature_3_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #3 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #3.",
	"id" => $shortname."_feature_3_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #3 Link",
	"desc" => "Place the url of the page you want Feature #3 to link to.",
	"id" => $shortname."_feature_3_link",
	"type" => "text",
	"std" => ""),		

array( "name" => "Feature #4",
	"type" => "title"),
array( "type" => "open"),	
 
array ( "name" => "Feature #4 Checkbox",
	"desc" => "Check this box to show Feature #4",
	"id" => $shortname."_feature_4_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #4 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #4.",
	"id" => $shortname."_feature_4_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #4 Link",
	"desc" => "Place the url of the page you want Feature #4 to link to.",
	"id" => $shortname."_feature_4_link",
	"type" => "text",
	"std" => ""),	 

array( "name" => "Feature #5",
	"type" => "title"),
array( "type" => "open"), 
 
array ( "name" => "Feature #5 Checkbox",
	"desc" => "Check this box to show Feature #5",
	"id" => $shortname."_feature_5_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #5 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #5.",
	"id" => $shortname."_feature_5_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #5 Link",
	"desc" => "Place the url of the page you want Feature #5 to link to.",
	"id" => $shortname."_feature_5_link",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #6",
	"type" => "title"),
array( "type" => "open"),	
	
array ( "name" => "Feature #6 Checkbox",
	"desc" => "Check this box to show Feature #6",
	"id" => $shortname."_feature_6_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #6 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #6.",
	"id" => $shortname."_feature_6_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #6 Link",
	"desc" => "Place the url of the page you want Feature #6 to link to.",
	"id" => $shortname."_feature_6_link",
	"type" => "text",
	"std" => ""),	
	
array( "name" => "Feature #7",
	"type" => "title"),
array( "type" => "open"),	
	
array ( "name" => "Feature #7 Checkbox",
	"desc" => "Check this box to show Feature #7",
	"id" => $shortname."_feature_7_enable",
	"type" => "checkbox",
	"std" => "false"),
	
array( "name" => "Feature #7 Image",
	"desc" => "Place the file url of the image you wish to use for Feature #7.",
	"id" => $shortname."_feature_7_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Feature #7 Link",
	"desc" => "Place the url of the page you want Feature #7 to link to.",
	"id" => $shortname."_feature_7_link",
	"type" => "text",
	"std" => ""),		
 
array( "type" => "close")
 
);

function mytheme_add_admin() {
 
global $themename, $shortname, $options;
 
if ( $_GET['page'] == basename(__FILE__) ) {
 
if ( 'save' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
 
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
 
header("Location: themes.php?page=functions.php&saved=true");
die;
 
} else if( 'reset' == $_REQUEST['action'] ) {
 
foreach ($options as $value) {
delete_option( $value['id'] ); }
 
header("Location: themes.php?page=functions.php&reset=true");
die;
 
}
}
 
add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
 
}
 
function mytheme_admin() {
 
global $themename, $shortname, $options;
 
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
 
?>
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
 
<form method="post">
 
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
 
case "open":
?>
<table width="800" border="0" style="padding:10px; margin-bottom: 20px;">
 
<?php break;
 
case "close":
?>
 
</table><br />
 
<?php break;
 
case "title":
?>
<table width="810px" border="0" style="background:#fff; padding:0px 10px;margin: 0 0 0 -10px;height:60px;"><tr>
<td colspan="2"><h3 style="font-family:Arial,Helvetica,georgia,sans-serif;color:#333;"><?php echo $value['name']; ?></h3></td>
</tr>
 
<?php break;
 
case 'text':
?>
 
<tr>
<td width="100px" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="500px"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;">&nbsp;</td></tr>
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case "checkbox":
?>
<tr>
<td width="100px" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="500px"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php break;
 
}
}
?>
 
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>


 
<?php
}

add_action('admin_menu', 'mytheme_add_admin');
// End of Theme Options

?>

That’s a lot! I won’t go into too much detail, but basically we’re creating 7 featured image slots, with 2-7 having a checkbox to activate (1 should always be active…can’t have a blank featured image slider…).

You will want to change Theme Long Name to your theme’s name/church’s name (this is what shows up in the admin console, so maybe even do “Church Name’s Featured Image” since it adds “options” automatically after it). Then change shortname to a shortname for your theme that you’ll use later. So if you theme’s name is Grace Point Church you could do gpchurch as the shortname.

Note: This was adapted from Ralph’s Theme Options Tutorial over at ForTheLose.org. There’s a few other tutorials out there, but this is the easiest I’ve found.

You should have something that looks like the below now:

and you should have a navigation item like this under “Appearance”:

Now, we’re going to need to call the theme options on our page. Create a file called get-theme-options.php and place the following in it:

<?php
// this is crucial for the theme options to work, so don't mess with it.   
    global $options;
    foreach ($options as $value) {
        if (get_settings( $value['id'] ) === FALSE) { 
            $$value['id'] = $value['std']; 
        } else { 
            $$value['id'] = get_settings( $value['id'] ); 
        }
    }
?>

Next – on the page that you’re going to be using the featured image slider on, paste the following below get_header()

<?php include (TEMPLATEPATH.'/get-theme-options.php'); ?>

That calls our theme options for us!

Step 3 – Integrate

Ok, so we’ve got our Slider in place and our Options in the admin console. Now, let’s add the code to connect the two!

Replace the following:

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

with this:

<div class="main_view">
   				 <div class="window">
     				   <div class="image_reel">
     				   		<!--Start Feature 1-->
     				      	 	<a href="<?php echo $shortname_feature_1_link; ?>"><img src="<?php echo $shortname_feature_1_img; ?>" alt="" /></a>
							<!--End Feature 1-->	     				      	 	
							 	<!--Feature #1 must always be enabled-->
							 
       					 	<!--Start Feature 2-->
       					 		<?if ($shortname_feature_2_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_2_link; ?>"><img src="<?php echo $shortname_feature_2_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 2-->	
       					 	
       					 	<!--Start Feature 3-->
       					 		<?if ($shortname_feature_3_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_3_link; ?>"><img src="<?php echo $shortname_feature_3_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 3-->	
       					 	
       					 	<!--Start Feature 4-->
       					 		<?if ($shortname_feature_4_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_4_link; ?>"><img src="<?php echo $shortname_feature_4_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 4-->
       					 	
       					 	<!--Start Feature 5-->
       					 		<?if ($shortname_feature_5_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_5_link; ?>"><img src="<?php echo $shortname_feature_5_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 5-->
       					 	
       					 	<!--Start Feature 6-->
       					 		<?if ($shortname_feature_6_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_6_link; ?>"><img src="<?php echo $shortname_feature_6_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 6-->
       					 	
       					 	<!--Start Feature 7-->
       					 		<?if ($shortname_feature_7_enable == "false") { ?>
									<!--DO NOTHING-->
									<? } else { ?>
									<a href="<?php echo $shortname_feature_7_link; ?>"><img src="<?php echo $shortname_feature_7_img; ?>" alt="" /></a>
									<? } ?>
       					 	<!--End Feature 7-->
       					 	
        			  </div>
   				 </div>
   				 <div class="paging">
            				<a href="#" rel="1">1</a> <!--Feature #1 must always be enabled-->
   				        	<!--Start Feature 2-->
       					 		<?if ($shortname_feature_2_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="2">2</a>
									<? } ?>
       					 	<!--End Feature 2-->
       					 	
   				        	<!--Start Feature 3-->
       					 		<?if ($shortname_feature_3_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="3">3</a>
									<? } ?>
       					 	<!--End Feature 3-->

   				        	<!--Start Feature 4-->
       					 		<?if ($shortname_feature_4_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="4">4</a>
									<? } ?>
       					 	<!--End Feature 4-->

   				        	<!--Start Feature 5-->
       					 		<?if ($shortname_feature_5_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="5">5</a>
									<? } ?>
       					 	<!--End Feature 5-->
   				        	<!--Start Feature 6-->
       					 		<?if ($shortname_feature_6_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="6">6</a>
									<? } ?>
       					 	<!--End Feature 6-->   
   				        	<!--Start Feature 7-->
       					 		<?if ($shortname_feature_7_enable == "false") { ?>
										<!--DO NOTHING-->
									<? } else { ?>
										<a href="#" rel="7">7</a>
									<? } ?>
       					 	<!--End Feature 7-->         					 	
    			</div>
			</div>

Again, that’s a lot, but basically all we’re doing is instead of simply displaying the images, we’re checking to see if the checkbox is checked for each one. If it isn’t, nothing shows up, but if it is, it checks for the image url and the link url and places them in there.

Then, below in the paging navigation, it does something similar. Where if the checkbox is checked it will add a number, and if not, nothing.

Again, the first feature is always active (so make sure you have an image and url in there!).

IMPORTANT!: Remember to change “shortname” to whatever you made your shortname. It’s in every one of those, so make sure you get them all!

You can duplicate this process if you want to add more features, but I find that 7 is probably too many anyhow!

You can see a live version of this at www.daybreakkids.org.

You should be all set! Below is the code for all the files we mentioned.

• The code for the slider
• Script.js
• get-theme-options.php
• functions.php

Again – credit goes to Soh Tanaka’s and Ralph’s over at ForTheLose.org for their excellent tutorials which served as a basis for this.

Let me know if you end up using it!

Anyhow – I’m super proud of the design – the illustrious Michael Sanders did the logo/feature images/footer image but all the other design elements were mine.

Bonus points if you can spot the CSS3 elements I used throughout the site

Check it out! Below are some screenshots of some of the cooler pages!

Staff

Blog

Donate

A big thanks to Lauren Allgood for letting me work on this! Love what her and her staff are doing down in Lincoln Heights.

“Now, dear Christians, some of you pray night and day to the branches of the true Vine; you pray to be made all over in the image of Christ. If so, you must be like him in giving … “Though he was rich, yet for our sakes became poor” … Objection 1. “My money is my own.” Answer: Christ might have said “My blood is my own, my life is my own” … then where should we have been? Objection 2. ”The poor are undeserving.” Answer: Christ might have said, “They are wicked rebels … shall I lay down my life for these? I will give to the good angels.” But no, he left the ninety-nine, and came after the lost. He gave his blood for the undeserving. Objection 3. “The poor may abuse it.” Answer: Christ might have said the same; yea, with far greater truth. Christ knew that thousands would trample his blood under their feet; that most would despise it; that many would make it an excuse for sinning more; yet he gave his own blood. Oh, my dear Christians! If you would be like Christ, give much, give often, give freely, to the vile and poor, the thankless and the undeserving. Christ is glorious and happy and so will you be. It is not your money I want, but your happiness. Remember his own word, “It is more blessed to give than to receive.”

This is an update of an earlier post I wrote. That one used categories and custom fields, and while it still works, this one’s both more user friendly and it takes advantage of a few more fun things. You can see a live example of this at http://gatheringonline.org/sermons.

We’ll be using Custom Post Types along with Custom Taxonomies and metaboxes. Also – we’re going to be messing around with functions.php a lot, so please please please make a backup copy of your theme files (especially functions.php) because it’s pretty easy to overwrite something important – if you do that, just replace it with your backup copy.

First, let’s create the Sermon Post Type.

Go ahead and open up your functions.php file and add the following code somewhere between the opening (if your functions.php doesn’t have those or you don’t have one, add them at the beginning and end.

// Create Sermon Custom Post Type
add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
	register_post_type( 'sermon_post',
		array(
			'labels' => array(
				'name' => __( 'Sermons' ),
				'singular_name' => __( 'Sermon' ),
				'new_item' => __( 'New Sermon' ),
				'add_new_item' => __( 'Add New Sermon' )
			),
			'public' => true,
			'hierarchical' => true,
			'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'page-attributes' ),
			'register_meta_box_cb' => 'add_sermon_metaboxes' // This registers the metabox that we'll add later.
		)
	);
}

What this does is it creates a Custom Post Type called “Sermons”. In your dashboard it looks like the picture below:

Now that that’s set up, let’s create a custom taxonomy (category) for the Speaker. This will allow us to sort by speaker and easily select the speaker from a list, much like Categories in WordPress.

enter the following into your functions.php:

//Custom Taxonomies

add_action( 'init', 'create_speakers' );
function create_speakers() {
 $labels = array(
    'name' => _x( 'Speakers', 'taxonomy general name' ),
    'singular_name' => _x( 'Speaker', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Speakers' ),
    'all_items' => __( 'All Speakers' ),
    'parent_item' => __( 'Parent Speaker' ),
    'parent_item_colon' => __( 'Parent Speaker:' ),
    'edit_item' => __( 'Edit Speaker' ),
    'update_item' => __( 'Update Speaker' ),
    'add_new_item' => __( 'Add New Speaker' ),
    'new_item_name' => __( 'New Speaker' ),
  );

  register_taxonomy('speaker','sermon_post',array(
    'hierarchical' => true,
    'labels' => $labels,
    "public" => "true"
  ));
}

This attaches the custom taxonomy of “Speaker” to the Sermon Custom post type. You should see a “speaker” link in the “sermons” custom post menu on the left. You can manage this the exact same way you do normal categories.

One last thing to do in functions.php. We’re going to create a metabox with some information that we might want to display with our sermons. What a custom metabox will do is essentially simplify the “custom fields” area, making it much more user friendly.

Enter the following in functions.php:

// Create Meta boxes

function add_sermon_metaboxes() {
    add_meta_box('sermon_info', 'Sermon Information', 'sermon_info', 'sermon_post', 'normal', 'high');
}

// Sermon Meta Box

function sermon_info() {
    global $post;

    // Noncename needed to verify where the data originated
    echo '<input id="sermonmeta_noncename" name="sermonmeta_noncename" type="hidden" value="' .     wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

    // Get the data if its already been entered
    $date = get_post_meta($post->ID, '_date', true);
    $seriesimg = get_post_meta($post->ID, '_seriesimg', true);
    $thumbnail = get_post_meta($post->ID, '_thumbnail', true);
    $description = get_post_meta($post->ID, '_description', true);

    // Echo out the field
  	echo '<strong>Date</strong><br /><em>Enter the Date the sermon was preached.</em>';
       echo '<input class="widefat" name="_date" type="text" value="' . $date  . '" />';
      echo '<strong>Series Image</strong><br /><em>Add a series image. Images can be uploaded using the "Add an Image" box above the editing window. <strong>Images should be 200x112 pixels</strong></em>';
    echo '<input class="widefat" name="_seriesimg" type="text" value="' . $seriesimg  . '" />';
    echo '<strong>Thumbnail</strong><br /><em>Enter the thumbnail image you\'d like to display on the media archives list. Images can be uploaded using the "Add an Image" box above the editing window.<strong>Images should be 100x56 pixels</strong></em>';
    echo '<input class="widefat" name="_thumbnail" type="text" value="' . $thumbnail  . '" />';
    echo '<strong>Description</strong><br /><em>Enter the text you\'d like to display as a description on the media archives list.</em>';
    echo '<input class="widefat" name="_description" type="text" value="' . $description  . '" />';

}

// Save the Meta box Data

function save_sermon_meta($post_id, $post) {

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times
    if ( !wp_verify_nonce( $_POST['sermonmeta_noncename'], plugin_basename(__FILE__) )) {
    return $post->ID;
    }

    // Is the user allowed to edit the post or page?
    if ( !current_user_can( 'edit_post', $post->ID ))
        return $post->ID;

    // OK, we're authenticated: we need to find and save the data
    // We'll put it into an array to make it easier to loop though.

	$sermon_meta['_date'] = $_POST['_date'];
	$sermon_meta['_thumbnail'] = $_POST['_thumbnail'];
 	$sermon_meta['_seriesimg'] = $_POST['_seriesimg'];
	$sermon_meta['_description'] = $_POST['_description'];

    // Add values of $sermon_meta as custom fields

    foreach ($sermon_meta as $key => $value) { // Cycle through the $sermon_meta array!
        if( $post->post_type == 'revision' ) return; // Don't store custom data twice
        $value = implode(',', (array)$value); // If $value is an array, make it a CSV (unlikely)
        if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
            update_post_meta($post->ID, $key, $value);
        } else { // If the custom field doesn't have a value
            add_post_meta($post->ID, $key, $value);
        }
        if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
    }

}
add_action('save_post', 'save_sermon_meta', 1, 2); // save the custom fields

Ok – that’s a lot. basically what it’s doing is creating the following box in our Sermon Post:

If you don’t want to use thumbnails or series images, you can get rid of:

  $seriesimg = get_post_meta($post->ID, '_seriesimg', true);
    $thumbnail = get_post_meta($post->ID, '_thumbnail', true);

   echo '<strong>Series Image</strong><br /><em>Add a series image. Images can be uploaded using the "Add an Image" box above the editing window. <strong>Images should be 200x112 pixels</strong></em>';
    echo '<input class="widefat" name="_seriesimg" type="text" value="' . $seriesimg  . '" />';
    echo '<strong>Thumbnail</strong><br /><em>Enter the thumbnail image you\'d like to display on the media archives list. Images can be uploaded using the "Add an Image" box above the editing window.<strong>Images should be 100x56 pixels</strong></em>';
    echo '<input class="widefat" name="_thumbnail" type="text" value="' . $thumbnail  . '" />';

	$sermon_meta['_thumbnail'] = $_POST['_thumbnail'];
 	$sermon_meta['_seriesimg'] = $_POST['_seriesimg'];

Ok – we’re done with functions.php. You should be able to open up your dashboard and click “add new” under “sermons” and see the following:

Ok, let’s get to work creating the actual post. Create a new file called single-sermon_post.php. If you’re comfortable with PHP/CSS you can change this to match your theme perfectly, but for right now I’m just going to create a super basic one.

Place this code into the single-sermon_post.php:

<?php get_header(); ?>
<div id="container">
		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="blogpostsermon">
<div class="sermondate">Date: <?php echo get_post_meta($post->ID, '_date', true); ?></div>
<h2><?php the_title(); ?></h2>
<div class="blogentrysermon">
					<?php $thereisseriesimg = get_post_meta($post->ID, "_seriesimg", true);
					if($thereisseriesimg){ ?>
<div class="seriesimg"><img src="<?php echo get_post_meta($post->ID, '_seriesimg', true); ?>" alt="" /></div>
					<?php }else{ ?>
					<?php } ?>
<div class="sermon">
<div class="speakerbox"><?php echo get_the_term_list($post->ID, 'speaker', 'Speaker: '); ?></div>
					<?php the_content(); ?></div>
<!--sermoncontent--></div>
<!--blogentrysermon--></div>
<!--blogpostsermon-->

		<?php endwhile; ?>

			<?php else : ?>
<div class="post">
<h2><?php_e('Not Found'); ?></h2>
</div>
<!--post-->

		<?php endif; ?></div>
<!--container-->

	<?php get_footer(); ?>

Ok – let’s dissect this just a bit:

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

<?php endwhile; ?>

			<?php else : ?>
<div class="post">
<h2><?php_e('Not Found'); ?></h2>
</div>
<!--post-->

		<?php endif; ?>

This (spread throughout the file) is the loop. It’s basically pulling the content into the page, or if there’s nothing, it displays Not Found. This is pretty critical to a lot of WordPress stuff, so if you’re editing things, don’t get rid of it

<div class="sermondate">Date: <?php echo get_post_meta($post->ID, '_date', true); ?></div>

Remember that metabox we created? This is where the Date gets pulled from. This is useful because the date posted doesn’t always match the date spoken.

<?php $thereisseriesimg = get_post_meta($post->ID, "_seriesimg", true);
					if($thereisseriesimg){ ?>
<div class="seriesimg"><img src="<?php echo get_post_meta($post->ID,'_seriesimg', true); ?>" alt="" /></div>
					<?php }else{ ?>
					<?php } ?>

Here’s where we’re pulling your series image. If you aren’t using them, take this out and add 215px to the width of .sermon in the style you’ll be adding in a sec.

<div class="speakerbox"><?php echo get_the_term_list($post->ID, 'speaker', 'Speaker: '); ?></div>

This is where it’s pulling and displaying the Speaker taxonomy we created.

Ok. There’s the structure of the Sermon post type. Right now it doesn’t really look like much, so add this to your style.css:

#container {
	float: left;
	width: 960px;
	margin: 40px 0 0 0;
}
.blogpostsermon {
	margin: 10px 0 5px 0;
	padding: 0 0 10px 0;
	background: #000;
	float: left;
	width: 960px;
}

.blogpostsermon h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	text-align: left;
	color: #FFF;
	padding: 10px 0 5px 15px;
	letter-spacing: -1px;
	}

.blogentrysermon {
	line-height: 18px;
	background: #767676;
	margin: 0 5px 0 5px;
	padding: 5px 15px 15px 15px;
	float: left;
	width: 920px;
}

.sermon {
float: left;
width: 705px;
}

.speakerbox {
	font-weight: bold;
	margin: 0 0 10px 0;
}

.sermondate {
	float: right;
	padding: 10px 10px 5px 5px;
	font-size: 14px;
	color: #FFF;
}

.seriesimg {
width: 200px;
float: left;
height: 112px;
margin: 0 15px 0 0;
}

Honestly this is the part where it’s going to be a little hard for me to help you out. You’re probably going to have to adjust this a lot to fit what you’re looking to do with your site.

Let’s work on creating the actual Sermon archives page. Create a new file and name it sermon-list.php and copy the following code into it.

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

<?php get_header(); ?>
<div id="container">
<div class="pagepost">
<h2><?php the_title(); ?></h2>
<div class="pageentry">
<?php query_posts(array('post_type'=>'sermon_post', 'paged' => get_query_var( 'paged' ) ) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="sermonlist">
					<?php $thereisthumb = get_post_meta($post->ID, "_thumbnail", true);
						if($thereisthumb){ ?>
<div class="sermonthumb"><img src="<?php echo get_post_meta($post->ID,'_seriesimg', true); ?>" alt="" /></div>
						<?php }else{ ?>
						<?php } ?>
<div class="sermonspeaker">
					<?php echo get_the_term_list( get_the_ID(), 'speaker' ) ?>
						</div>
<!--.sermonspeaker-->
<div class="sermonlistdate">
						<?php echo get_post_meta($post->ID, '_date', true); ?></div>
<!--.sermonlistdate-->
<div class="sermontitle">
						<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<!--.sermontitle-->
<div class="sermonexcerpt">
						<?php $thereisdescription = get_post_meta($post->ID, "_description", true);
						if($thereisdescription){ ?>
							<?php echo get_post_meta($post->ID, "_description", true); ?>
						<?php }else{ ?>
						<?php } ?></div>
<!--.sermonexcerpt--></div>
<!--.sermonlist-->

		<?php endwhile; ?>
		<?php endif;?>
<div class="navigation">
				<?php if (function_exists("pagination")) {     					pagination($additional_loop->max_num_pages);
						} ?></div>
<!--.navigation--></div>
<!--.pageentry--></div>
<!--.pagepost--></div>
<!--#container-->

<?php get_footer(); ?>

Ok – there’s a lot here too. Let’s run down the important stuff.

<?php query_posts(array('post_type'=>'sermon_post', 'paged' => get_query_var( 'paged' ))); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

This is the Loop and the command that tells the loop to only retrieve the sermon post type. Very important.

<div class="sermonlist">
					<?php $thereisthumb = get_post_meta($post->ID, "_thumbnail", true);
						if($thereisthumb){ ?>
<div class="sermonthumb"><img src="<?php echo get_post_meta($post->ID,'_seriesimg', true); ?>" alt="" /></div>
						<?php }else{ ?>
						<?php } ?>
<div class="sermonspeaker">
					<?php echo get_the_term_list( get_the_ID(), 'speaker' ) ?>
						</div>
<!--.sermonspeaker-->
<div class="sermonlistdate">
						<?php echo get_post_meta($post->ID, '_date', true); ?></div>
<!--.sermonlistdate-->
<div class="sermontitle">
						<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<!--.sermontitle-->
<div class="sermonexcerpt">
						<?php $thereisdescription = get_post_meta($post->ID, "_description", true);
						if($thereisdescription){ ?>
							<?php echo get_post_meta($post->ID, "_description", true); ?>
						<?php }else{ ?>
						<?php } ?></div>
<!--.sermonexcerpt--></div>
<!--.sermonlist-->

This is the real important stuff. Here’s our actual list. You can see the thumbnail up top (and if no thumb is entered it nicely aligns to the left again. Honestly, the thumbnail & series images were added as a bit of an afterthought for this tutorial, so I’m sure you could style them better if you took the time)

After that, you see it pulling our speaker taxonomy (the sermonspeaker div), date (the sermonlistdate div), the actual title and link (the sermontitle div), and the excerpt which we entered in our “description field” (the sermonexcerpt div).

<div class="navigation">
				<?php if (function_exists("pagination")) {     					pagination($additional_loop->max_num_pages);
						} ?></div>
<!--.navigation-->

You don’t want your sermon list to go on forever, right? The max number of sermons shown is controlled through the “reading” settings menu in the dashboard. I use the excellent pagination function found at http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/. It’s absolutely fantastic and I won’t go into it much here. You can get the details over at their site. Or you can replace everything within the div with wordpress’ default navigation:

<?php posts_nav_link(); ?>

but I really recommend checking out the code over there.

Anyhow:

Let’s add some style to this…add the following to your style.css.

.pagepost {
	padding: 10px 0 5px 0;
}

.pagepost h2 {
	font-size: 26px;
	text-align: right;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
	text-transform: uppercase;
	margin: 0 10px 5px 0;
	letter-spacing: 3px;
}

.pageentry {
	line-height: 18px;
	background: #FFF;
	margin: 0 5px 0 5px;
	padding: 5px 15px 15px 15px;
	min-height: 300px;
	font-size: 13px;
}
.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: 5px 0 10px 0;
	padding: 0 0 0 10px;
}

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

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

Again – style that to fit your needs.

Ok – so we’ve made the Sermon Post Type and the Sermon Archives. We’ve got one more thing to do – create the speaker archives.

This is really easy. Copy everything in your sermon-list.php file into a new file and save it as taxonomy-speaker.php.

Then, right under <?php get_header(); ?>, put:

<?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); ?>

Then, replace

<?php query_posts(array('post_type'=>'sermon_post')); ?>

with:

<?php query_posts(array( 'post_type'=>'sermon_post', 'speaker'=>$term->slug, 'paged' => get_query_var( 'paged' ))); ?>

Now – if you’re looking at it right now, you may be getting 404 error. That’s ok – you just need to “flush” your permalinks. To do that, all you have to do is simply visit the permalinks settings in your dashboard. That’s it. If you feel like doing more, feel free to just save them .

Now, when you click on the speaker name (it should be a link) it should take you to a list of sermons by that speaker.

Ok, now let’s actually figure out how to add the sermon audio. Here’s the only part we use a plugin for. This is flexible, so if you have a different plugin you like or a way to do it without, feel free

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 sermon post (from the sermon custom post type)
5. At the very bottom, add to the “Podcast Episode” box in the “Media URL” Field. (this was added when you installed PowerPress).
6. Add your date to the “date field”, along with images you may have. Then, 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 “description” field.
7. Select the speaker from your taxonomy list.
8. Publish Post.

And that should be about it. Feel free to ask any questions in the comments and I’ll do my best to answer them (or if you find a better way of doing something!). Have fun with this and let me know if you end up using it!

Humongous credit for various help/tutorials/code goes to:

Custom Post Types – http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress
Custom Metaboxes – http://wptheming.com/2010/08/custom-metabox-for-post-type/
Custom Post Types – http://sixrevisions.com/wordpress/wordpress-custom-post-types-guide/
Custom Taxonomies – http://sixrevisions.com/wordpress/taxonomy/
Pagination – http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/