Best Music of 2011
Here’s a list of my five favorite albums that have come out in 2011. In no particular order:
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
New Website!
Just launched the newest version of this website! I’m excited about it for a few reasons:
- 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.
- It’s focused less on the blog (which I updated too rarely) and greatly improves the Portfolio (Work) section
- 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!
Portfolio Updated
I realized recently that I’ve built a lot of websites without updating my portfolio.
I went ahead and added some of my better stuff – so check it out!
New Website: Chrissy and David
So every once in a while you get a project where you can really have fun. Chrissy and David, two of our friends, are getting married in September and I thought it would be nice to create a unique and fun website to match their wedding and their personalities.
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
How to Create A Featured Image Section in WordPress without a Plugin
One of the things that you will see on just about every single church website is a featured image secion. Seriously though, it’s on almost all of them.
Generally for these you have two options if you’re building your site in WordPress:
- Use a plugin like Featured Content Gallery or Dynamic Content Gallery.
- 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:
- Slows down your site – the more plugins you use the slower it gets
- Can be confusing – Featured Content Gallery requires multiple steps and involves things that novices & people unfamiliar with obscure WordPress functions would have difficulty learning
- 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:
- Add jQuery Slider
- Add Theme Options to control it from the admin console
- 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;"> </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;"> </td></tr><tr><td colspan="2"> </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;"> </td></tr><tr><td colspan="2"> </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;"> </td></tr><tr><td colspan="2"> </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.
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.
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!