• Any WordPress Theme Can Be a Blank Framework
• How To Add Prologue-Theme Posting To Your WordPress Theme—in 2 minutes
• Coming Soon: My Personal WordPress Theme Starting Point

We’ll look at the general layout in great detail, via a wireframe of the main sections, and the details generally, with a bit of a writeup, in the form of notes, on what’s going on. Clicking on the wireframe opens up a full-size version. Feel free to use the wireframes in your own projects to help you get a handle on just where your stuff should be in a successful blog design.

Studying the masterworks and previous success is one of the key ways to breed success in your own designs. Let’s study up.

Lifehacker

My favorite thing about the Lifehacker template is the top posts of the day featured for maximum (literal, even) effect at the top of every page. Each featured item gets a thumbnail image, a category, a title and a cool hover effect.

The blog branding is almost a secondary item here but is still highlighted and serves to further highlight the search which is almost exactly in the middle of the above-the-fold screen. And note that the search takes up just as much visual area as the site logo. Can you make search anymore prominent? Anyway, the real Lifehacker brand is the reams and reams of excellent content. A fat logo and pretty header just gets in the way. In fact, all of the sites we’ll look at, mostly eschew cuteness and large headers that only serve to brand their site.

This is the only layout in this little study with a sidebar on the left. But the sidebar on the right is mostly negative space and really helps to focus your eye on what’s happening in the main content area.

PSD Tuts

The main content area of PSD Tuts (and all the ‘tuts sites) is a relatively massive 640px wide. PSD Tuts puts this to good use with post thumbnails and large images.

The category/page navigation is really well done with breadcrumbs, and drop down navigation sub-categories. It encourages further exploration into the site. And since the current version has been slightly reworked, in a recent network-wide redesign, from the previous iteration, I imagine it’s doing a good job of driving up pageviews and making the site stickier.

The footer. Wow. PSD Tuts has a huge footer. It’s almost 640px high and at 1024px by 768px screen resolution takes up almost the whole screen. Does it work? Absolutely.

Smashing Magazine

Smashing Magazine, famous for pointing to examples of terrific design in huge long lists, has probably the most utilitarian design. Is it a masterwork? Not really. It’s a simple two-column/three-column design. But it does get out of the way and let the content do it’s thing.

Probably the most bizarre thing about the site is the list of every post they’ve ever published in the sidebar. I don’t think I’ve ever seen that before. Would it be successful? I can imagine a new visitor really getting into the site and it’s heady series of lists and big images returning again and again to the list looking for something they’ve missed … which makes me think it’d be better as a page. Then again, there’s an SEO benefit here as well, having everyone of your pages inter-linked. It’s something to consider for your blog.

The National Post

The National Post is one of the best newspaper websites around and a good example of the magazine layout for a blog—only just try and pull it off without an army of writers. Which is something we should talk about before we think about using this for a blog design. Do you want your personal site to fail completley? Yes? Great. Adopt a magazine layout highlighting multiple categories, feature posts and lots of content. You may also enjoy heart attacks.

Do you have a 3-person blog publishing multiple pillar articles a day and want a better way to highlight your constantly changing content? The National Post site is a rich source of inspiration.

The two coolest things here are happening at the bottom of the page. The alltop-like array of categories and RSS feeds (highlighted in pink on the wireframe) and the super-slick carousel of likely-to-be-popular articles. I love that carousel.

The Hot Tags in the header are another cool feature. Much smarter, and far more attractive, than a tag cloud.

What can we learn about blog design from successful sites?

A good design is designed around the content and how it’s published. Keep that in mind when you’re looking for inspiration from successful sites around the web.

What do you think? What makes these sites work? What doesn’t work? Can you think of any other sites that deserve a wireframe analysis?

• We Need To Kill The Sidebar
• WordPress as a CMS: How To Think About Building a Website With WordPress
• The Holy Grail of Blog Design

• Monochromatic, A Thematic Child Theme
• An Interview with Ian Stewart on WordPress Child Themes
• Example Images for Thematic

• Junction, An Awesome New Thematic Child Theme
• Changes At ThemeShaper
• Boumatic, a Ridiculously Beautiful Thematic Child Theme

• How To Create Custom WordPress Content Types
• WordPress Theme Frameworks, Child Themes & Custom Theme Hooks & Filters
• WordPress as a CMS: How To Think About Building a Website With WordPress

• A Better Spot for The WordPress Meta
• LaunchPad, The WordPress Domain Parking Theme
• Thematic Version 0.3

• Justin Tadlock’s New WordPress Themes Club
• What’s new in Thematic 0.7
• Blamatic and Pinkatic for Thematic

• How To Create a Custom WordPress Write Panel
• New wp_page_menu() API
• The Ethics of WordPress Themes at a Premium

Figure out what sort of pages we’ll need

Before a visual design can begin, you need to do content design. Determine what exactly you’re going to say. Words, sentences and paragraphs are the building blocks of your site’s foundation. Make sure you’ve put them together correctly. And make sure you know what you need that foundation to do. I mean, think about how those words, sentences and paragraphs are going to effect your bottom line. Remember, we’re making this site for a reason. Whether it’s to get a laugh or make a buck, all those words, sentences and paragraphs need a reason for being there. They mean something.

Anyway, you’ve done all that right? We need to think about how we’re going to present that content. To put things really simply, once you know what you’re going to say with your content and what you want it to do site design comes down to designing series of page templates. That’s it really. As a practical matter, site design becomes a series of templates.

Blog design typically involves designing one template. I know good WordPress themes require a score of php templates in their respective directories but really, visually, all you’re seeing is one master template that offers up different content. Which is fine. Most blog designs serve the purposes of most blogs: highlight the latest post by placing it at the forefront of a reverse-chronological list and make it easy to find everything else. There’s a lot of different ways to do this but most blog design accomplishes this visually with one master template.

Web site design can do this too but there’s usually more variation happening between the header and footer. There’s often three or four templates that expand beyond the primary-content-sidebar mold; a home page presenting a hierarchical overview, a landing page for sales, a blog, a support forum, a store perhaps, with product pages, the list goes on. Each of these sections will need it’s own visual template and internal order that relates to the rest of the site. It all depends on the requirements of the content.

Think about why and how we’re going to use WordPress to do all this

We’ve decided that we’re going to do this with WordPress so before we start the visual design we need to consider our limitations and restrictions. We have to look at our tools.

In WordPress, we have pages and posts. Most people like to only think of pages when they consider WordPress as a content management system but posts  can be categorized by tags and well, categories. We shouldn’t forget to consider how posts can be used to good advantage in WordPress.

But since likely a lot of what we’re going to do is working with pages we also need to think about what can be accomplished with custom page templates and whether or not they need to be customized further by the end user on case-by-case basis. As it is, we often have to muddle through at this point and think about compromises. Sometimes you’ll want to have a plugin solution that offers up more customization options for the end user. Often it’s going to be easier to just directly edit custom page template code to insert custom HTML as opposed to interacting with the database through WordPress.

If you’re going to need to use really custom loops and interact with the database in a way you haven’t done before now would be a good time to make sure WordPress will actually let you do what you want to do—before you go getting your wireframes and mockups set in stone. In fact, I strongly suggest you dig into what you can do with a book like WordPress Theme Design. Or search through WordPress Trac and the WordPress Hackers Mailing List if you’re planning on doing something really intense with WordPress. While you’re there try and look to the future of WordPress and make sure you’re not going to make more work for yourself down the road when WordPress changes.

I also recommend thinking about how you’re going to use Widgets in your site design. WordPress widgets offer a good way of controlling short chunks of content in a site once the coding and design has been finished and the project has been handed off. If you need more control over when and how widgets appear, the Widget Logic plugin will let you use WordPress conditional tags with individual widgets.

Design your visual templates

Now that you’ve thought about the content, what it means and how you might have to interact with it when using WordPress you actually need to get down to building your set of visual templates.

I’ve made a short list of what that set might entail.

• Home Page
• Blog Index
• Single Post with Comments & Pingbacks
• Single Page
• Archive and Search Pages
• Custom Pages
  • Store and product sub pages
  • Landing page with content “buckets”
• bbPress forum
  • Better take a look at the default theme if you’re not that familiar with bbPress

The first thing you’ll want to do is sketch out a few designs and then move to either mocking something up in a program like Photoshop or proceeding directly to wireframing the site in XHTML and CSS. If you’ve got a good sketch and idea of what you need to do, I think proceeding directly to wireframing the site provides the best bang for your buck.

There’s two approaches to producing a wireframe when you’re going to be working with WordPress. One, you can just start writing plain old semantic HTML and start out from scratch or you can work directly with an existing WordPress Theme Framework. There’s obvious time savings when you start out with an existing theme but make sure the code of the theme is up to your standards before you start.

If you’re designing with a WordPress theme you’ll need dummy content to fill out your site. You might try WPCandy’s Sample Content or The Sandbox Dummy Content. I’m partial to The Sandbox content. It covers a lot of different possible post-content variables. But either one is great. Use the WordPress importer to import either one of these files into your WordPress blog and take a crack at making something beautiful.

Good luck!

• Blog Design That Works
• Use WordPress As a CMS: Plugins, The Bare Minimum
• Any WordPress Theme Can Be a Blank Framework

Rapid Site Development With Modular CSS

I’m doing my best to make Thematic a tool for rapid site development whether you’re digging into it and using it as the basis for a custom site design or using it as a theme framework with a WordPress Child Theme. How? By making the CSS completely modular. Let’s take a look at two of the folders in the library directory of Thematic; layouts and styles.

/layouts
  2c-l-fixed.css
  3c-r-fixed.css
  2c-r-fixed.css
  3c-fixed.css
 
/styles
  18px.css
  typography.css
  21px.css
  default.css
  images.css
  plugins.css
  reset.css

Each of these files can be imported into the stylesheet of either your Thematic-based theme or Child Theme with the @import rule—or copy-pasted if you want to make changes without having to override the CSS to make structural changes. Simply put, what that means is that you can bring each of these files into play in your stylesheet and rapidly build a WordPress theme by mixing and matching them. And I mean really rapidly. For example, here’s an example of a fully finished 3 column Thematic Child Theme, with a sidebar on either side of the content, that follows the default Thematic color styles—built by you, out of only a few lines of CSS.

/*   
Theme Name:  Thematic, 3-column
Theme URI: http://themeshaper.com/
Description: A 3-column version of Thematic
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
*/
 
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
 
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
 
/* Apply a basic 3 column layout */
@import url('../thematic/library/layouts/3c-fixed.css');
 
/* Apply the default Thematic style */
@import url('../thematic/library/styles/default.css');
 
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
 
/* Apply styles for popular plugins */
@import url('../thematic/library/styles/plugins.css');

That’s really all there is to it. And if you’re modifying Thematic instead of building a Child Theme, just take a look at the style.css included with it and start mixing and matching CSS files. It’s that easy.

But what if you want more of a blank template with just enough styles to build a WordPress theme from? I’ve got you covered there too with 18px.css and 21px.css. Each has just enough CSS styles to produce a blank theme based on a 18px or 21px line-height. Combine them with any of the layout styles included with Thematic—just like in the simple example above, using 18px or 21px instead of default—and you’ve saved yourself potentially hours of time.

Essentially, I’ve done all the boring CSS work that’s required to build 99% of all the WordPress themes you’ll ever see. You’re welcome.

And yes, now that there’s a default there might be more included styles in the future.

A Guide To Developing With Thematic

One thing that’s really been lacking with Thematic, and really should be included with all good WordPress themes, is a good ReadMe file. That’s been fixed with version 0.7. I’ve made it an xHTML file instead of the typical text file so you can check it out in your browser.

I’ll be adding a table of contents to it in the future as it inevitably grows. Which should be very soon since it’s already out of date! I completely forgot to update the list of Thematic Child Themes before I submitted it to the WordPress Themes directory. I’ll be fixing that in an update which should come in the next couple of weeks.

Download Thematic and Build Your Own WordPress Theme

Thematic is completely free and available for download at the WordPress Theme Directory.

For more information about changes to Thematic check out the ThemeShaper forum post, Changes in Thematic or browse through the posts on ThemeShaper tagged Thematic if you want to learn more about what you can do with a WordPress Theme Framework.

• How To Protect Your WordPress Theme Against Upgrades
• Thematic Version 0.6 Is Out
• A Revolution in Theming: WordPress Theme Frameworks

• Benedict Eastaugh on Child Themes in WordPress 2.7
• How To Protect Your WordPress Theme Against Upgrades
• A Proposal for Theme Management in WordPress

• How To Create a WordPress Child Theme
• Any WordPress Theme Can Be a Blank Framework
• A Revolution in Theming: WordPress Theme Frameworks

• Junction, An Awesome New Thematic Child Theme
• Blamatic and Pinkatic for Thematic
• Instinct & The Thematic Theme Framework

• WordPress Theme Preview: Theseus
• Updates to Theseus and MNML
• What’s new in Thematic 0.7