WordPress as a CMS: How To Think About Building a Website With WordPress

Plan your WordPress site design

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!