Today Geoff Fox tipped me off to something ironic: the website for Republican congressional candidate Daria Novak is using a WordPress theme I designed back in 2008 for Obama supporters.

What’s interesting is that soon after Geoff made the observation, Novak’s web team removed all references to Obama from the CSS and templates, even changing the name of the /theme/ directory.

Keep in mind, Novak is a candidate who previously said:

Obama is the most dangerous official in our history, in my opinion. He is a globalist, an elitist and appears to be trying to drag this great nation down until it resembles a third world country.

But to look at the bigger picture, should the theme out of context really matter? Geoff wrote:

I knew Ms Novak (or any Republican candidate) wouldn’t want to be associated with anything having anything to do with Barack Obama no matter how tenuous the connection…What she was using was well designed and suited her (and I assume approved by her)–it just made a positive reference to Obama.

Why does that mere fact make it bad?

Fair enough. No reason design elements from a Pro-Obama theme can’t reasonably be remixed for an anti-Obama candidate’s purposes. The result is invisible to most visitors, save for those like Geoff who peek at the source code.

But if the point is to remove yourself from any Obama associations, why not choose a different WordPress theme altogether? Why knowingly choose a widely-distributed theme that plenty of bloggers already associate with Obama?

As Geoff mentions, it shouldn’t matter necessarily—but evidently it did to Novak’s web team, who made extra efforts to cover it up.

Last month I was lucky to be drafted into Dribbble by a fellow designer. It’s a private beta site with a lot of buzz. It will eventually grow and go public which got me thinking about the ramifications.

If you haven’t heard about it, Dribbble is a community created last year by Dan Cederholm and Rich Thornett. Designers can upload and share 400×300 samples of whatever they’re working on, kind of a visual corollary to Twitter’s “What’s happening?” Just like Twitter, you can follow others’ updates, comment on their work, mark favorites, and view the whole thing in a stream:

Notes about Dribbble

• Uploads. There’s a basketball theme so it counts as a “shot” on goal every time you upload something. 20 shots per month are allowed. Most are “leaks” or sneak peeks of upcoming design projects. You can also make “rebounds” which are visual responses to others’ designs.
• Streams. You can filter shots according to People You Follow, Most Popular, or Everything at once. This means that no matter how big it gets, you still have control over what you see. But there are downsides too, discussed below.
• Quantity. There are currently about 1000 members.
• Quality. The quality of designs on Dribbble is very very high. Nearly everything in my stream makes me click to view the details. Most any shot gets favorited a handful of times. I’m currently following 70 designers, almost 10% of Dribbble’s whole user base.

  True, you can’t deduce much from 400px crops. You don’t have insight into the projects they’re for. Many things can look great out of context but still not serve their project well. But there’s something addictive about seeing the sheer variety of styles in all these designers. So in terms of quantity and quality, Dribbble has them both in spades.

• Discovery. Dribbble has also introduced me to designers who are seemingly unknown in the blogging and Twitter world. Yet looking deeper into their work, it’s better than nearly anything you’ll find from the A-list designers we all follow.
• Discussion. Because the crops are small and somewhat inconclusive, Dribbble isn’t always ideal for workshopping an idea. Discussion is about 95% compliments, which is great for designer self-esteem, but doesn’t do much for critical thinking or the mutual back-patting that folks like Tim Van Damme noticed has gone on way too long in our industry.

  At the same time, certain feedback from a few great designers can open your eyes. It recently gave me the confidence to try out a radically new masthead idea for a project, which got approved by the client, against the odds.

• Openness. There are currently no third-party services or APIs until beta testing is complete.
• Privacy. I spoke with Dan this week who mentioned the public Dribbble will be visible to the public, but membership is required for participation. Facebook-style privacy filtering is not yet in the cards.

Intimacy

Finding intimacy among groups of friends and colleagues online isn’t always about limited numbers. Sometimes it’s just a matter of finding the right people. But once you’ve found an intimate place, how long can it last?

At some point in 2008-2009 everyone I’ve met in my entire 35 years got a Facebook account. Instead of trusted recent friends, my circle expanded to acquaintances from high school. People who I never intended on re-establishing contact were now privy to my every silly status update. I got self-conscious and had to create filters so that certain people didn’t get certain updates. This idea of relationship-filtering will continue being an uncomfortable part of our lives as social media grows.

Currently, Dribbble feels pretty intimate. Among the nearly 1000 members, there are still clusters of friends that form little subgroups. Within your trusted circle, you can be yourself and post private/client work without worrying much about it.

This intimacy is important as many of us designers spend our time maintaining an airtight wall of professionalism on our personal/portfolio sites. We publish only the most pixel-perfect portfolio samples. We still use the royal “we” when describing the work done at our one-man design studios. The web allows us to contrive whatever identity we want for ourselves.

Dribbble is a nice escape. You can be loose and be yourself. It’s more personal. There is no veil of professionalism. Because it is private, people post wacky stuff they might not share otherwise. There is less noise, more focus. You don’t feel lost in the shuffle.

Currently only a select group can offer invites and “draft” others into Dribbble. But eventually there will be more. And then….

The Public Dribbble

Some questions that come to mind:

• Will the feeling of intimacy disappear when Dribbble expands?
• Will the signal-to-noise ratio suffer?
• Will users feel less private and start thinking twice about what they post, re: client work and privacy?
• Will users feel obligated or subconsciously guilted into following people who follow them, as with Twitter? Will their stream become diluted, and eventually, less useful? Will Dan need to build in relationship filtering, like with Facebook?

It’s natural to get protective over an online community when you sense it’s changing. Same with bands and companies and media sources—there’s an impression that once they get big, they start to suck. Sometimes it feels genuinely true. Sometimes it’s a myth that the magic has gone. Sometimes, it’s you yourself that has mentally moved on.

Back in 2002, the MetaFilter community experienced a popularity surge. Up to that point, MeFi conversations had a reputation for being meaty and substantial. Users were overwhelmingly a smart bunch. There were lots of in-jokes and meetups. The mods closed memberships for awhile. When they opened them again, charging $5 for a membership, there were surges of new members. In the next few years, the site went from 10,000 to 60,000. Loyal community members complained that the level of conversation had changed and too many newbs spoiled the experience.

On the surface, that sounds like a snobby and short-sighted reaction. Should communities perpetually expand to include everyone? What happens if they don’t?

I’m curious what would happen if Dribbble went the Metafilter route and “pre-qualified” many of their existing members while slowly allowing in additional members for a small price, reminding people with that $5 fee that what they’re getting is not Just Another Social Network. Metafilter’s successful model has done wonders for that site’s manageability. It would be a monetary reminder that Dribbble is not for spamming, causing trouble, and so on.

Merit Systems and The Open Web

Any follower of Dan Cederholm knows his reputation as a very nice guy and brilliant designer. I doubt anyone believes he envisions Dribbble as an ivory tower where elite designers interact without sharing with the greater public.

Granted, the only invites in Dribbble’s early days were given to the top designers in the industry. Judging from comments of non-members, there was a perception of exclusivity, though really this crowd was simply beta-testing. I sympathize with Dan trying to make this distinction clear to the general public.

In the real world, there are exclusive restaurants, prestigious universities, private clubs and other institutions that require money, merits or influence to even gain acceptance. No one is trying to hide it—exclusivity is the entire point. Those institutions seek small numbers of like-minded people to qualify based on stringent standards. Some charge them with elitism.

The web is a different animal. Many services and communities are free and don’t require application, unlike universities. Can you imagine YouTube telling you you couldn’t use their software because your father was not a YouTube user and, considering the poor quality of your videos, you just weren’t YouTube material? The internet in 2010 has such a strong philosophical undercurrent of populism and open access, the idea of “applying” to a website is unthinkable.

Many think forward progress depends on the philosophies of the Open Web. Namely, sites should aspire to be transparent, decentralized, hackable and accessible to all. These notions are so overwhelmingly supported by pundits, I sympathize with the pressure anyone feels to abide by them, especially when trying to keep a community small and retain its intimacy.

In order to be all-inclusive while maintaining quality, there need to be more faders, filters and switches to tune your web experience more finely, or people will abandon ship and go elsewhere.

Maintaining Control

Just to be clear, I don’t want to imply the sky is falling when sites like Dribbble go public. And I’m not saying it’s net loss for the design community if the quality control at Dribbble gets a little muddy and the site becomes hard to sift through and feels a little less special.

Also I don’t think anyone consciously wants to discourage new, young designers from participating. But it is tough to reckon masses of people joining just to join. Following others, not because they’re fans of their design, but in hopes of being followed—joining for all the wrong reasons.

Think of when you get a new Twitter follower. You view their profile and see they’re also following 35,000 other people. They are clearly not there to exchange information or make intimate relationships. They’re serial networkers. They want a microphone and a gigantic audience. When they follow others, it’s merely an overture for you to follow them back. Which I never do. I would hate to see this kind of mentality invade Dribbble.

I think I’m just having a reaction to the general loss of control. This is why tools like Readability get created. A more calm web experience. More raw content. Less compulsive networking and and “me-too!” commenting. Smaller tribes rather than one tidal wave of unfiltered humanity.

At the beginning of each new year, I do some navel-gazing about where I should be career-wise. I look over my portfolio and take note of things I could have done differently.

This year I designed for some new platforms (iPhone, Symfony) that interested me. I considered whether I should learn to design on platforms which don’t interest me to diversify my skills or surprise myself.

I also considered whether it was smarter to market myself as a designer of WordPress-based sites, specifically, or a jack-of-all trades open to anything. I thought about what clients like to see in a portfolio vs. what I wanted to show.

One question I wonder each year is this:

Is it more attractive when designers can…

a) design like a chameleon in any style or genre appropriate to the project, or
b) design over a period of years in a consistent, signature style

What designers out there qualify for each of these categories? Which marry the two effectively? I’d love to know what others think, from the perspective of both fellow designers and people who have been in a client’s position.

In the WordPress core we have widgets, custom fields, custom taxonomies, and with version 2.9, an expansion of get_post_type. Add a few plugins and all sorts of post-types and custom write panels become a reality.

All this functionality is great so long as you, the developer, implement it in a way that is tough to break. Because once in the hands of the client, anything goes.

Flexible Layout

Then there is the issue of layout. For clients, moving content from one column to the other can be a technical hurdle, particularly for dynamic sites which rearrange content frequently to satisfy advertisers, audience demands, and so on.

Default drag-and-drop widgets are a great part of our arsenal, but adding your own custom widgets can really make life simpler for both developer and client.

Example Custom Widgets

In the quest to give more control to end users, Pro Theme has been experimenting with more custom widgets. Check out the demo for themes like The Local and Elemental for examples.

Below are widgets we’ve started including with most themes, including Mimbo Pro:

• Google Adsense. In the control panel you enter your Adsense ID and the widgets display ads accordingly. Works in any of the standard block sizes.
• Community Tweets. Aggregates Twitter activity according to location latitude/longitude. Contains fields for Number of Tweets and Mile Radius.
• Latest Tweets. Contains fields for Username and Number of Tweets
• Post Author Details. Contains author avatar, date and comments feed.
• Upcoming Posts. Displays a list of future-dated posts.
• More from this Author. For single-post pages. Displays five headlines from the same author.
• More from this Category. For single-post pages. Displays five headlines from the same category.
• Print Preview. Uses javascript to render the page print-friendly and free of images.
• Share This. Lets you post the current page to Twitter, StumbleUpon, Digg, Delicious and Facebook.
• YouTube. Displays a featured video with fields for Embed Code and Description
• Map Your Location. A Google Maps widget with fields for Location, Zoom Amount and Type of Map View (Roadmap, Satellite or Terrain).
• Popular Posts. Displays five headlines of most-commented posts.
• Subscribe to Feed. Includes an RSS icon and feed link.

We’ve gotten tons of great feedback from users who rely on positioning Google Adsense blocks and want to adjust their content accordingly. In the case of The Local, the entire homepage is 90% widgetized, with four columns to configure. Not to mention writers in the hyperlocal space who write unique content, but also rely on aggregating from other sites and social media sources.

How Do Custom Widgets Work

At the simplest possible level, custom widgets are implemented by 1) creating a class, and 2) registering a new widget. Forget about functionality within the widget for a moment and look at the basic setup which you would paste inside functions.php:

class My_Widget extends WP_Widget {
	function My_Widget() {
		parent::WP_Widget(false, 'Our Test Widget');
	}
function form($instance) {
		// outputs the options form on admin
	}
function update($new_instance, $old_instance) {
		// processes widget options to be saved
		return $new_instance;
	}
function widget($args, $instance) {
		// outputs the content of the widget
	}
}
register_widget('My_Widget');

That’s it. We can now visit our widgets panel to confirm:

Adding editable functionality into our widget is another story. Using the “Popular Posts” widget as an example, my partner Ben Gillbanks will walk us through creating the rest.

Creating a “Popular Posts” Widget

Firstly we have to name the widget class. I prefix my functions and classes with bm_ (Binary Moon) as it means there will never be any clashes with other functions and plugins.

We can then name the widget in the constructor, which is the first function, and it should have the same name as the class. This will be called when the class is first created and it defines the name you see in the widget editor.

Next up, I create the last method which is a form function which defines what data can be editable within the widget. In this case, it’s simply the title of the widget to be displayed on the blog. The update method can often remain as it is, although you may want to do some data validation (make sure the data input is safe/ allowed).

Then finally, the widget method. This is where the widget itself is displayed. You’ll notice I am actually passing the arguments to another function that is elsewhere in the theme. The reason I do this is because I like to split the display out separately so that I can use the function directly in the theme without widgets as well.

Notice the $args parameter in the widget method. These args are actually the arguments you pass to the register sidebar method, before_widget, after_widget etc. You can read more about these and creating custom widgets on the WordPress Codex Widget API page.

Here is the final code:

<?php
class bm_widget_popularPosts extends WP_Widget {

	function bm_widget_popularPosts() {
		parent::WP_Widget(false, 'Popular Posts');
	}

	function widget($args, $instance) {
		$args['title'] = $instance['title'];
		bm_popularPosts($args);
	}

	function update($new_instance, $old_instance) {
		return $new_instance;
	}

	function form($instance) {
		$title = esc_attr($instance['title']);
?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
<?php
	}
 }
function bm_popularPosts($args = array(), $displayComments = TRUE, $interval = '') {

	global $wpdb;

	$postCount = 5;

	$request = 'SELECT *
		FROM ' . $wpdb->posts . '
		WHERE ';

	if ($interval != '') {
		$request .= 'post_date>DATE_SUB(NOW(), ' . $interval . ') ';
	}

	$request .= 'post_status="publish"
			AND comment_count > 0
		ORDER BY comment_count DESC LIMIT 0, ' . $postCount;

	$posts = $wpdb->get_results($request);

	if (count($posts) >= 1) {

		if (!isset($args['title']) {
			$args['title'] = 'Popular Posts';
		}

		foreach ($posts as $post) {
			wp_cache_add($post->ID, $post, 'posts');
			$popularPosts[] = array(
				'title' => stripslashes($post->post_title),
				'url' => get_permalink($post->ID),
				'comment_count' => $post->comment_count,
			);
		}

		echo $args['before_widget'] . $args['before_title'] . $args['title'] . $args['after_title'];
?>

		<ol>
<?php
		foreach ($popularPosts as $post) {
?>
			<li>
				<a href="<?php echo $post['url'];?>"><?php echo $post['title']; ?></a>
<?php
			if ($displayComments) {
?>
			(<?php echo $post['comment_count'] . ' ' . __('comments', BM_THEMENAME); ?>)
<?php
			}
?>
			</li>
<?php
		}
?>
		</ol>

<?php
		echo $args['after_widget'];
	}
}
?>

Further Uses for Custom Widgets?

Clients frequently need special notifications and other dynamic bits to display on their site with minimal setup. What other content that’s frequently handled via plugins would make a great custom widget?