Art Direction For WordPress

“Art direction”, custom post designs, whatever you want to call them have taken off in a big way recently. First it was Jason Santa Maria amongst others, then Smashing Magazine picked up on it and as a trend
it exploded. For good reason too;
they’re awesome and great fun to do.

My personal favourites are the ones on Design Informer and Binary Moon. Both, like WPShout, are powered by WordPress. Unlike WPShout, they’re using custom post templates, something I’ve found myself increasingly against as
they’re a pain once you change the design.
Sure, no way’s going to be perfect once you change a design, but some ways are
less of a pain than others.

Art direction is awesome and enhances your blog no end.

Here on WPShout I’m using CSS exclusively. This means the HTML doesn’t change one bit between non art directed posts and art directed posts; I just use a custom field to add in an extra stylesheet. When I first started dabbling in art direction a couple of months ago I found myself using inline styles through custom fields, but quickly realised that sucks because you can’t easily reuse the styles (find styles from last time, find file on FTP, load into text editor and so on) and, crucially, you can’t gracefully degrade your posts; the WPShout layout is over 1024px, thus visitors with that screen size just get the standard layout which, although still larger than 1024px, crucially the content area isn’t so posts are still readable. With external stylesheets I can selectively apply them and make new art directed posts quicker.

Using my CSS only way, it’s
fairly easy
to get started.

My “blank canvas” for WPShout

The three key rules of art.

1. I find that writing a post with the design in mind just doesn’t work. I have to write the post first and then fiddle around with the design. If you write trying to work out how you’ll style it, you’ll never get anything written.

2. Next, a simple reset of a couple of styles is a godsend. I’ve got a couple of styles I use as a reset and immediately my content area gets set to full width on a white background and pushes the sidebar down to level with the start of the comments. I’ve found keeping the header, sidebar, comments and footer just adds that extra bit of consistency which is important.

3. Finally, go crazy nuts with all the stuff you know is bad — use negative margins and a whole load of divs like there’s no tomorrow but crucially if you get rid of the stylesheet, everything goes back to normal and so you’re future proofed against any theme changes you make in the future.

The WordPress-ifying bit

As you might have been able to guess, we’re going to use custom fields to add our stylesheet to the post.

First thing to do is to upload the stylesheet — you’ll probably want it in your theme’s directory. Copy and paste the URL into a custom field “CSS”.

Next, pop open the header.php file and add the following, after your standard stylesheet:

<?php if (is_single()) { 

$css = get_post_meta($post->ID, 'css', true); if ($css) { ?>

<link type="text/css" rel="stylesheet" media='screen' href="<?php echo $css; ?>" />

<?php } } ?>

Here we’re assuming your theme makes the fairly standard (in more recent themes) step of running the loop to get various titles or tags for SEO, but if it doesn’t then you can either run the loop or get custom fields outside the loop (thanks @ThemeLab and @mus_hi).

The designing bit

So now you’ve written the post and loaded the stylesheet, the next step is to actually fill that stylesheet. I’ve found the nth-of-type pseudo selector to be a fantastic way round of wrapping each paragraph in a div — you want to float the third paragraph right so instead of using the HTML editor to add a div around the paragraph, you can instead do this:

.hentry p:nth-of-type(3){ float:right; }

Bear in mind that if you’ve got some meta information first, that might mean the third paragraph of post content is actually the fourth paragraph within the hentry div.

And then you’re off. It’s great fun just fiddling around with styles to get your content laid out in a unique way.

It’s that simple

It’s taken me a while to actually see how easy it is to “art direct” my posts, but with a simple reset and adding stylesheets easily through custom fields, it’s fantastic fun just playing around and making a unique experience for your readers. Go on, give it a try.

Icons by phenixheart and Olwaolska