Roundups are awesome. Without the word inspiration, design would be extremely dull. There would also be one less channel on digital cable. I’ve rounded up a nice selection of items that gave me a warm fuzzy feeling all over. I also think its important to point out the good and the bad in each piece, perhaps just to force myself into experiencing a sensation of superiority.

Iron to Iron

I’m not normally a fan of the one-page brochure style site, but for some reason it works here. Beautiful textures and a perfectly subtle blend of colors make this design really stand out, but I’d still love to see it flow through to multiple pages. The highlight: the beautiful jQuery fueled “Services” section. A great way to illustrate the process that doesn’t overwhelm the user with buzzwords and lengthy descriptions.

Visit this Site

Teixidó

Great texture and contrast. The copy argues the actual effectiveness of a site’s content. Ironically, the site manages to present a great deal of copy in a very organized, effective way. The only real noticeable flaw is more of a pet peeve- a bit of glitchiness on the initial load before Typekit kicks in. Favorite aspect: the fluid layout that increases the image size without breaking the typography’s overall integrity.

Visit this Site

Pointless Corp.

I LOVE this site. The perfect blend of modern design with a vintage flair. I really don’t have anything to complain about. Great choice of color, illustration, and typography. The layered paper effect usually strikes me as a little played out, but it works here beautifully without making the content feel claustrophobic like contained designs normally do.

Visit this Site

Momento

I’m a sucker for a wood layout. I’m more of a sucker for it when the texture is effectively used as an element instead of just a nice background image. The inset wood sections really make the site pop. Especially the “Take a tour of Momento” section. I also appreciate the extra attention to the ribbon used as a title to make it a nice, organic element instead of a quick solution to designer’s block.

Visit this Site

Ben the Bodyguard

Ben the Bodyguard is a great example of the future of brochure sites. The awe inspiring scroll/stroll down the street does a great job at illustrating the app’s various features. I’m sure we have a long string of ripoffs to look forward to, but for now, this is a great case study for effective product marketing.

Visit this Site

McKinney

There might be a little bias here since I’m a former Durham local, but McKinney’s clean, bold designs have always been a great source of inspiration for effective corporate branding. I’m also a huge Bad Penny fan, and McKinney did an incredible job designing the packaging for Big Boss Brewery. The agency’s extensive history developing media gives them a great opportunity to utilize their huge image header, which really grabs the viewer’s attention.

Visit this Site

Elegant Seagulls

I’m a big fan of quirky illustration, if you haven’t noticed. Elegant Seagull’s mashup of bold patterns, delicate type, and rough sketches reminiscent of a Basquiat piece really work for me. Also, a series of extensive DNA tests confirmed the site’s claim of high levels of beard strength.

Visit this Site

You Know Who

This site features a color combination I’m not usually a fan of, but it works surprisingly well. I love the use of vintage stock and big type, which makes the content very easy on the eyes. The only weak link for me is the logo (or perhaps just the way the logo is contained), which seems a bit out of place in an otherwise very strong layout.

Visit this Site

Ferocious Quarterly

I like this website for reasons contradictory to those of most other websites. Some sections initially felt “broken” before I realized the layout was intentional, but the reason the site inspired me was its effective use of very neutral tones, a sweet banner menu, and the creative way of displaying the blog archive, an effect that would be hard to achieve without the beautiful art and photography each entry features.

Visit this Site

Lost World’s Fairs

Besides a very nice footer, the initial landing page for Lost World’s Fairs might seem a little… uninspired. Anyone who takes the time to click through the three featured links will enjoy the great use of typography and imagery. The Atlantis section specifically pisses me off with its excellence, since I had the idea to incorporate a similar elevator effect in a previous website, but just assumed it couldn’t work. Boohoo, right?

Visit this Site

Galpin

Galpin doesn’t need a whole lot of pretty pictures to make in impact. He seems to have quite a knack for speaking volumes with typography. The “process” flowchart is a beautiful break from the site’s common structure, and the seemingly unconventional color scheme fits in perfectly with the rest of the site. I wish the design would have been translated over to his Tumblr blog, though.

Visit this Site

Never End Design

I’ll start by saying I love everything from the bottom of the header down. I would have liked the header more if the illustration and structure was a little more fluid with the rest of the site, although I love the little seeds floating around the layout. Ah, childhood nostalgia. I love the layout of the rest of the site, though. The portfolio page is especially striking, with each screenshot seemingly randomly stacking together around the case study. An excellent use of whitespace on every page.

Visit this Site

Six months ago I released v1 of Forever Heavy. The flow of traffic and work coming in was enormous, to say the least, but those benefits were far outweighed by the sheer amount I learned putting together a new site. Working for free and for yourself can be a monumental pain in the ass. As the saying goes, you tend to be your biggest critic. On top of that, you’re steering yourself away from work that pays bills, feeds you, and keeps your fridge stocked with delicious beer and cake.

Every time I redesign my portfolio, I consider it a trip back to college (only this college is far more cost-effective. Imaginary college. Apply today.). Forcing myself to learn and apply new techniques not only improved the overall look and functionality of my website, but also added a few new techniques to my skill set. This translates to better work in less time, meaning I’m not only benefiting from the initial launch and buzz of my new site, but also further down the road with prospective clients.

I’ve been asked several times why I chose to redesign my site a mere 6 months after releasing Forever Heavy, and I think that probably about sums it up. With that said, I hope you enjoy the new site.

Using some simple jQuery and PHP, we’ll create a Recent Posts widget that you can filter by category without an annoying page refresh. No need to create extra WordPress pages and templates! We’ll also apply a little jQuery animation so your container height will glide smoothly into place.

NOTE: For a loose example of this tutorial in action, check out the sorter on my legacy portfolio.

1. Create Your Template

First, we need to create a file called querySort.php and place the following code inside of it:

<?php
	// load wordpress into template. dont touch me!
	$path = $_SERVER['DOCUMENT_ROOT'];
	define('WP_USE_THEMES', false);
	require($path .'/wp-load.php');
	// ah, wordpress is loaded. balance has been restored.
	query_posts($_GET["query"]);
?>

<div id="queryContainer">
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<!-- place your post template here. -->
	<?php endwhile; ?>
	<?php endif; ?>
</div>

This is your entire template for the widget’s output. By including wp-load.php, we’re able to avoid the annoying need to declare the file as a WordPress template, create an empty Page, and apply said template to it. The most important part of this file is this line:

query_posts($_GET["query"]);

Upon each load, query_post will grab our query from a variable that jQuery passes to it. This variable contains, by default, options for the number of posts and a default starting category.

Style the loop as necessary. As long as the div “queryContainer” and the loop are maintained, you may style the output any way you’d like.

2. Sprinkle in Some jQuery

Create another file called querySort.js and place the following code inside of it:

jQuery(document).ready(function($) {
	// replace these default settings with your own
	$.querySort = {
		path_to_template: 'http://www.YOURSITE.com/wp-content/themes/YOURTHEME/',
		number_of_posts: 5,
		default_category: ''
	}

	// do the initial load.
	$("#querySort").load($.querySort.path_to_template + 'querySort.php' + '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + $.querySort.default_category);

	//functions for the sorter
	$("#queryMenu a").click(function(){
		var thecat = $(this).attr("id");
		if (thecat == 'reset') {
			var query = '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + $.querySort.default_category;
		} else {
			var query = '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + thecat;
		}
		$("#querySort").animate({opacity: 0}, function() {
			$("#querySort").load($.querySort.path_to_template + 'querySort.php' + query, function() {
				height = $("#queryContainer").height() + 'px';
				$("#querySort").animate({opacity: 1, height:height});
			});
		});
		return false;
	});
});

Let’s break this down to make it easier to understand. Here are the default options provided by querySort:

	$.querySort = {
		path_to_template: 'http://www.YOURSITE.com/wp-content/themes/YOURTHEME/',
		number_of_posts: 5,
		default_category: ''
	}

You’ll need to add the absolute path to the template you’ll be using this with (dont forget the trailing forward slash). If you’ve installed WordPress in a subdirectory, make sure to update the url to reflect that. Number_of_posts controls precisely the number of visible posts at a time, and default_category is only really necessary if you wish to limit the visible posts to a specific category and its children.

// do the initial load.
	$("#querySort").load($.querySort.path_to_template + 'querySort.php' + '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + $.querySort.default_category);

This loads the default, unsorted query as soon as the DOM is ready. Using the .load() function, jQuery loads querySort.php, appending a variable called query, which is then accessed by the wordpress function query_posts(). The contents of the div #querySort are replaced with the results. (if you customize this script in any way to add more filters, be sure your query is urlencoded.)

//functions for the sorter
	$("#queryMenu a").click(function(){
		var thecat = $(this).attr("id");
		if (thecat == 'reset') {
			var query = '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + $.querySort.default_category;
		} else {
			var query = '?query=showposts%3D' + $.querySort.number_of_posts + '%26category_name%3D' + thecat;
		}
		$("#querySort").animate({opacity: 0}, function() {
			$("#querySort").load($.querySort.path_to_template + 'querySort.php' + query, function() {
				height = $("#queryContainer").height() + 'px';
				$("#querySort").animate({opacity: 1, height:height});
			});
		});
		return false;
	});

This is where the magic happens. This function accesses the div holding your sorting options, grabbing the ID of your link and replacing the query’s category name with its contents. Next, it fades out the #querySort div, loads the results of the new query, then fades them back in, fluidly adjusting the height of #querySort to match the new height of your content. This prevents ugly flickers or large gaps beneath the widget.

That’s all there is to it. One more step, and you should have a working widget!

3. Add the Widget to Your Theme

Now, assuming you know where you’re going to place the widget, you have but to place the following markup in your theme and apply your desired CSS styles.

<div id="queryMenu">
	<ul>
		<li><a href="#" id="categoryslug">Category Name</a></li>
		<li><a href="#" id="reset">All Posts</a></li>
	</ul>
</div>

<div id="querySort">
	<!-- leave me empty. -->
</div>

The #queryMenu div is very simple to set up. Each anchor you create must have to category’s slug as the id. This will be used by jQuery to execute the filter. IMPORTANT: To reset the sorter, create an anchor with ‘reset’ as the id. If, for some unimaginable reason, you have a category called Reset, you may want to change this to something else in your jQuery.

4. Enqueue and enjoy.

Upload your new files to your theme’s directory. Enqueue querySort.js and pat yourself on the back. You should now have a working jQuery sorter!

Drupal is an incredibly rich platform for content management, but its not always a walk in the park for front-end developers who need a quick solution. At the risk of insulting hardcore Drupal developers everywhere, here are some quick tips and useful snippets to help save you hours of development time and assist in keeping the hair-pulling-out to a minimum (hopefully).

1. Limit Blocks of Code Based on Authentication Status and Role
2. Place Block Regions In Any Template File
3. Print Views Programmatically
4. Create a Homepage Views Sandbar
5. Deploy a Views “Items Per Page” Filter

1. Limit Blocks of Code Based on Authentication Status and Role

The following snippet can be used to provide alternate content for unauthenticated users and vice versa:

<?php
global $user;
if ($user->uid) {
<!-- content for logged in user-->
} else {
<!-- content for unauthenticated user-->
}
?>

Restricting content by role is just as easy using the machine readable role name in the following snippet:

<?php
  global $user;
  if (in_array('YOUR_ROLE_HERE', array_values($user->roles))) {
<!-- content for specific role-->
  }
?>

Be sure to include the call to ‘global $user;’ when deploying these snippets, lest you be caught with your pants down.

2. Place Block Regions In Any Template File

By default, block regions are not accessible by normal means in views or node templates. There are two ways to access a block region outside of page.tpl.php. After you declare a region in your .info file, place the following snippet where you’d like the block to display:

<?php
	print theme('blocks', 'YOUR_REGION');
?>

The more acceptable way is to create a variable in your template.php,

<?php
function YOURTHEME_preprocess_views_view__index(&$vars, $hook) {
	  $vars['YOUR_REGION'] = theme('blocks', 'YOUR_REGION');
}
?>

then print the variable as you normally would in your template:

<?php
print $YOUR_REGION;
?>

3. Print Views Programmatically

The following snippet of code allows you to place a view right into your .tpl file. There are numerous pros and cons to this approach. Lucky for you, this is Quick and Dirty, so I’ll just give you the pros.

<?php
  $view_args = array();
  $display_id = 'default';
  $view = views_get_view('YOUR_VIEW_NAME');
       if (!empty($view)) {
        print $view->execute_display($display_id , $view_args);
  }
?>

The greatest advantage to this is the ability to quickly and easily use variables of the current page as dynamic arguments. Views 2 may give you access to some wonderful filters, but you may want to refine a view based solely on the variables of the current node (a related posts view that pulls a set of nodes with similar taxonomy terms, for example). I’ve also found it quite useful when deploying tabbed jQuery widgets (a good example is the “Popular” sidebar widget I built on http://governingpeople.com/).

Adding an argument to the view is as easy as updating this line:

 $view_args = array($place_variable_here);

It’s important to note that you must define your argument in the view for this to work correctly. Also, if you have multiple arguments and only want, say, the second argument to be programmatic, change the line to this:

 $view_args[1] = $place_variable_here;

You can also alter the display id to choose between your different view displays:

 $display_id = 'default';

I highly recommend NOT using a Page view. This WILL override the title of the entire page. Default has always worked fine for me.

4. Create a Homepage Views Sandbar

This is a great way to break a view apart for

IMPORTANT: This snippet is built for an Unformatted List view.

You’ll need to go ahead and create a template for you view named views-view-unformatted–YOURVIEWNAME.tpl.php (replacing with the correct machine readable of your view, respectively). If you already have one of these created using Views 2′s lovely “Theme Information” tab, you probably have a document that looks something like this:

<?php
// $Id: views-view-unformatted.tpl.php,v 1.6 2008/10/01 20:52:11 merlinofchaos Exp $
/**
 * @file views-view-unformatted.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes[$id]; ?>">
    <?php print $row; ?>
  </div>
<?php endforeach; ?>

Now, we’re going to take that lovely default template and gut it a bit. For the sake of simplicity, I’m removing everything that we dont need, including the title (you may choose to keep this and style the template any way you wish).

The first snippet of code accesses the view’s pager and creates two variables based on the Items Per Page. Right below this, we’ll make the split with a very simple for loop for each of the two sections:

<?php
$whole = $view->pager['items_per_page'];
$half = ceil($whole /2);

for( $i=0; $i<$half; $i++ ) {
	print $rows[$i];
}
?>

SANDBAR CONTENT GOES HERE

<?php
for( $i=$half; $i<$whole; $i++ ) {
	if ($rows[$i]) {
		print $rows[$i];
	}
}
?>

It may not be pretty, but it works wonders.

5. Deploy a Views “Items Per Page” Filter

I’m still surprised this option isn’t built in. Maybe I’m missing something. I’ll show you the simplest way to execute a pager with a set of links, but you can use this simple approach to build a dropdown with multiple choices with relative ease.

Open up your views-view.tpl template for the specific view you’ll be working with. It’s important that the view you created has its “Items to Display” option set equal to the highest option you will provide. If you want to have a maximum choice of 48, set you view’s limit to 48. If one of your choices exceeds the maximum, it just won’t show them. You’ll be able to set a default setting in the template.

<?php
$itemcount = $_GET['itemcount'];
if ($itemcount = 0) {
	$view->set_items_per_page(12);
} else {
	$view->set_items_per_page($itemcount);
}
?>

Place this snippet at the top of your views-view tpl an you’re already halfway there. Quite simply, attaching a variable to the end of the url (i.e. http://www.yoursite.com/yourview?itemcount=24) will set the new count before executing the view. If no variable is present, it is set to default to 12. Here is a sample of an “items per page” div you can place anywhere within your view:

<h3>Items per page:</h3>
<ul>
<li><a href="your-view-name?itemcount=6">6</a></li>
<li><a href="your-view-name?itemcount=12">12</a></li>
<li><a href="your-view-name?itemcount=24">24</a></li>
</ul>

Until Views ship with a better alternative, this is a quick and painless way to implement an items per page filter.