WordPress Art Director

Design is an important form of communication. We know this because we’ve all seen or cited the common axiom “a picture is worth a thousand words” at some point in our lives. If executed well, the way we use design the elements of a webpage enhances the content on it, creating a more effective—and perhaps multi-sensory—user experience.

Yet how often do we come across websites that reek of templates? You know what I mean. Visit just about any blog and see how the same template is used for different posts. Every post is nearly identical, despite the words and ideas being communicated. And, if we design is as much a form of communication as the content, then we’re missing a huge opportunity to tell our ideas and stories better.

There are several ways to go about creating a custom design for each page and post on a website, but many are cumbersome and require to get our hands dirty with code. Assuming that not everyone is proficient to use a static site generator, I’m going to outline how to do this on a WordPress site. Or at least how I did it on a WordPress site.

Take Control of the Text

Our fonts communicate voice and tone as much as the words that use them, so it only makes sense that we would want to customize them. Google Web Fonts and Typekit make it stupid simple to add really nice fonts to any website to the point that the choices are overwhelming. If you’re looking for something other than standard web fonts and want to stand out from every other site set in Helvetica, these are good places to start.

While fonts are a fantastic way to communicate visually, it’s important to maintain some level of consistency in how we use them. So, even though I’m advocating custom designs on a per-page basis, we can’t go crazy to the point of ruining the user experience when navigating between pages and posts.

OK, so we have fonts. What do we do with them? Luckily, there are two jQuery plugins developed by Dave Rupert that give you total control over the presentation of your text. The first is Letterings.js, a powerful plugin that dynamically injects a CSS class for every character of a word or sentence, which allows you to control the style for each letter. So you can tweak every character to give them all their own, well, character. The second is FitText.js, which takes a headline fits to the space of the container it is in, while allowing you to set a minimum and maximum font size.

Taken together, these two tools combined with nice fonts provide a lot of possibilities for creating incredible custom designs.

Manhandle Your Templates

If you’re on WordPress, then chances are that your site uses the same template for every single post. Sure, you can manipulate the design for posts in a given category or tag, but then all of those posts look the same as one another. If the goal is to create a unique layout and design for each post, then we have to do a little more work.

Art Direction is a fantastic WordPress plugin that does just that. Install it and you will see two boxes in the editor for all of your posts that allows you to write CSS and Javascript for that particular entry. In other words, if you have a .banner class somewhere in your post, you can write styles for it that override the default styles in your stylesheet. Yes, it’s that sweet.

But there’s a catch. If you care about web performance at all and use any caching plugin on your site, like W3 Total Cache or Super Cache, then they disable the styles used in your posts. Don’t ask me why. They just do. In fact, I spent about three hours pulling out my hair trying to figure out why I could see my custom styles when I was logged into my WordPress dashboard, but not when I was logged out. Hopefully, this post saves you time and your hairline.

We can still get custom styles on our posts, but we have to do a little coding to make it happen. Add the following to your functions.php file and you will get a “Custom CSS” box in the editor of your posts. It will do exactly what the Art Direction plugin does, but with a little less bells and whistles that, honestly, I never used anyway.

// Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '';
	echo ''.get_post_meta($post->ID,'_custom_css',true).'';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '';
		endwhile; endif;
		rewind_posts();
	}
}

If you need or want to add custom Javascript to the post, it would be easy to use the same code and rename some of the variables.

Go Be Creative

Now you have the tools to make web layouts that are worthy of magazine publication. The hard part, like most things in life, is not the tools but the creativity in using them.

If you’re like me and need some inspiration to get your hamster wheel turning, here are a few examples of how to use custom page designs to enhance content:

• TrentWalton.com. Click through a few posts and see how Trent uses colors, images and fonts to create distinction between each post and how they work together to communicate voice and tone without ruining the consistency of the site as a whole. I can’t get enough of it.
• Lost World’s Fairs. I wish this site wasn’t another Trent Walton project but it’s just so darn awesome that it’s worth sharing because it illustrates how webpages can rival magazines when it comes to stunning layouts.
• New York Times Snow Fall. This is a perfect example of how to use media and design to enhance the content that surrounds it. This story definitely breaks whatever template other stories on the New York Times site use.