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


24 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Jared
July 15, 2010 2:47 am

I have yet to attempt to do this myself, but it is a great post and something I plan to try at some point. It’s definitely really cool, but also more work than I time for right now 🙂

Hector Hurtado
July 9, 2010 1:13 pm

Alex,

Thanks for sharing your method. I gave post (category in my case) styling a try, but going the template route is definitely messier than what you propose. Me likes a lot 😀

Other than that, I fail to see why everyone calls this “art directed”… There’s so much more to art direction that I find such naming reducing, if not downright insulting 😛

Again, thanks for the tutorial and… Happy styling!

Hector Hurtado
July 9, 2010 9:17 pm
Reply to  Alex Denning

Just did… Post styling, category styling, episodical styling… The WordPress codex talks of themes giving an overall look and feel to a site, while also mentioning that exceptions can be handled per category or post, and this is exactly what it is.

Not everything must have a name, erroneus at that. But I don’t blame you, only the mass effect. In any case, we’re just chit-chatting here. As I said, your method is really good regardsless of any name. Cheers!

Nicole Bauer
July 9, 2010 10:21 am

That’s really cool and seems easy (I hope it really is :)). I’ll definitely try that out in my blog! Thanks!

Lee Willis
July 9, 2010 9:40 am

It might be arty, but setting width: 1110px; and overflow-x:hidden; is a surefire way to annoy anyway who’s browser window happens to smaller than your design size.

I’d have love to have commented on the actual article, but I couldn’t read huge chunks of it so I won’t …

Lee Willis
July 12, 2010 7:01 pm
Reply to  Alex Denning

Much better thanks Alex!

Theo
June 21, 2010 8:44 pm

Like this article very much, i post now because i look at it in IE8, the best IE browser (IE9 is on his way…). It`s very sad to see the difference… IE is so… 🙁

Tyler Dawson
June 8, 2010 12:50 am

After the last art post I was hoping you’d do a how-to. From a design point of view I really like the freedom this method seems to offer. I may have to give it a try!

Mark
June 8, 2010 12:29 am

Huuummm. Interesting. I’ll have to ponder this a bit. Yes, it does give a nice visual effect but does that automatically equate to an improved UX? Also, with the heavy use of images is that goes to compromise SEO? Finally, what about printing? Does this approach make visitors printing a post any less easy?

Anyone with any thoughts?

Paul Taylor
June 11, 2010 8:55 am
Reply to  Mark

Agreeing with Alex on this. This method shouldn’t have an impact on SEO unless you do splash images everywhere, if you create a style with SEO in mind then you wouldn’t have a problem. Plus, you could always use Alex’s suggested CSS text replacement.

UX — Again, agreeing with Alex, it looks fantastic but it’s down to you to create a style(s) that will be relevant to your target audience. It’s no good having a heavily stylised and designed page that demonstrates/uses multiple html5 and css3 advancements if all your audience is there to do is quickly read an article and wants it in an easily readable format. Using the code doesn’t necessarily mean always making major adjustments to your design, you could just use it to make minor changes to colours, typefaces, etc. It’s common sense really and knowing what you’re audience are there for.

Eric
June 7, 2010 7:32 pm

Thanks! Learned some new things to try out.

Amor
June 7, 2010 3:54 pm

So this is what you’re talking about! Awesome indeed!

I first learned about Art Directed posts from BinaryMoon few months ago and I’m so impressed so I started googling for other art directed posts. I thought it was hard to do and takes a lot of time. DesignInformer’s art directed posts are good too. Glad he created heartdirected. Really inspiring!

It’s fun to learn new things. I will give it a try one of these days. Will play around in my local WP install first. Codes saved as always, thanks! 🙂

Paul Taylor
June 7, 2010 3:40 pm

Last time I tried a simple approach like this, I found that it resulted in the need to place everything inside a “while()” loop. But that still works all the same. I recently posted on my site the code that I am using to take this approach and even added some extras.

Rather than having to use the Custom Field method as it is, I added a form so there is no need to use Custom Fields per-say.

I also a few lines to the code that allows a user to write the css directly into a field, rather than having to upload a css document and paste in the url.

While I haven’t taken full advantage of it yet, you can find the code here: http://www.goreki.com/blog/custom-css-per-post-in-wordpress/

Paul Taylor
June 7, 2010 8:02 pm
Reply to  Alex Denning

Definately, I’d love to hear of some other methods if you have or know of any as I’m always looking for different ways of doing this.

Ben
June 7, 2010 3:33 pm

Hey Alex – nice round-up and tutorial. One small thing is that Binary Moon doesn’t use custom page templates, you actually described basically what I do on Binary Moon 🙂

Ben
June 7, 2010 9:57 pm
Reply to  Alex Denning

That’s true actually, I do have a couple of custom templates, but I use the same one for pretty much everything. All it does is move the sidebar down beside the comments.