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!
ThemeShaper 
57 responses
Great advice, Ian. I’ve been in perpetual state of redesign at my blog for the last 6 months, and I simply can’t come up with a design strategy — mostly because I completely lack the ability to make pretty things —
But for those who do actually *design WordPress sites, you’d be smart to read this article over and over.
I can’t agree with you more. It is very hard to make things look spiffy, mad props to designers.
Thanks, Nathan. I know what perpetual redesign feels like! I’ve got two half-finished WordPress themes in the can. Neither of which I’m really feeling (one of the reasons I wrote this post).
Thanks for this post Ian. I’m a beginning WordPress user/designer and I feel this will help me a lot exploring things more and better in my future use of WordPress for any project that comes up.
Also, this is my first comment although I’ve been reading ThemeShaper for a while now. I always get a blast when I see an update here XD!
It took me an embarrassingly long time to realize the importance of rigorous pre-planning. I am always chomping at the bit to get my hands dirty but I’ve come to learn that making your mistakes before you code will save you the most time in the long run.
Great article as usual, Ian.
You mention BBPress, but not SimpleForum – reason?
bbPress is moving closer to, and becoming easier to integrate with, WordPress, it’s free and open-source, it was created by Matt Mullenweg (in a weekend!), is backed by Automattic, and will soon evolve to become TalkPress.
Points taken,thanks! Is there useful noise, if wildly speculative, about how TalkPress will extend BBPress?
No noise yet, that I’ve heard. But bbPress 1.0 should be out in a few months.
I’m a huge believer in using WordPress for a CMS system, thanks for writing a great article focusing on this!
I have been following this website for some time, it is a great source of info! I am currently building a local association’s website using WordPress and the amazing Revolution wordpress themes. WordPress is such an amazingly flexible solution that with the addition of a few plugins here and there can turn it into something very powerful. I am also re-designing my old mobile disco website using WordPress and the Freshy 2.0 theme along with a handful of handy plugins. You can see this here…
http://www.produbdj.co.uk – The navigation is built using Pages with the “html on pages” plugin by Introsites. There’s all sorts of other SEO stuff going on as well.
Great post, Ian. And timely, to boot.
I have come back to WordPress after a few years hiatus and I am currently working on a site for a non-profit. I think it is really going to help them, and I will be using Thematic as a basis for the theme. Thanks for your hard work.
I have an interesting conundrum and maybe I am overthinking things here. This NGO has a variety of relief and development projects around the world, and I am considering making separate pages for each one. These pages will contain all of the general information about the projects.
In addition, I want to set things up so that staff can post news items relating to each project. Naturally I want to associate each of these news items with the relevant project(“for more information about this project…”) and vice versa (“Recent News Items About This Project”). Is there a good way to associate pages with posts? I have been trying, but most of my attempts seem pretty clumsy.
Would it be better to just have each general project page be a post instead? And then associate the posts by category?
I know this problem is probably fairly simple, but I have banging my head all week trying to figure out the most robust way to do this. It is essentially the main problem that I face as I am attempting use WordPress as a CMS.
Being able to associate various content types with each other within the site…
This is exactly the problem (well, one of them) I’m having in switching to WP from a CMS I can no longer use because of server issues/their update of same. Would be grateful to hear if you have found a solution to this.
[…] WordPress as a CMS: How To Think About Building a Website With WordPress This is short and easy to see whole picture […]
[…] has been a lot of buzz regarding using WordPress as a CMS lately, with many clever solutions that come up. Today, […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress […]
I use it as a CMS on at least two sites and it seems to work great so far. The oldest is over two years old, and i was just testing it out when i first tried it.
[…] on ThemeShaper: WordPress as a CMS: How To Think About Building a Website With WordPress « 2006 Terra Barossa […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress […]
I think the only thing you’re missing, in your list of page templates, is a 404 page. Granted, a really well designed site should have minimal use for an error page, but, still, a good 404 page can, I think make a difference. I’ve been thinking about themes lately, in particular with CMS in mind and a good 404 seems to be an important touch.
Great article, though. Lots and lots to think about.
Thanks for sharing it.
I’ve been searching in vain for a WordPress mailing list, as the WordPress forums are useless at best and hostile at worst (or vice versa).
Thanks for the link to wp-hackers!
I started using wordpress a year ago. I like that I could start where I was at and find a way in the future. I understand from reading posts like this that challenges will come with success but I feel confident that trasitions, changes and the like can be made semi-seemlessly if I’m will to learn what is needed and do the work. I find comfort in that. What if there was no wordpress or cms. Well not sure with you and your reader, as I’m sure some would be fine, but I’d be, whats commonly referred to as….screwed.
WoW! – You have covered so much there that my head is spinning a bit mate!
I would LOVE to be able to design my own wordpress templates, as I think wordpress offers much compared to many other Content Management Systems that I have seen.
What are your thoughts on the SEO friendliness of wordpress???
WordPress is considered one of the more SEO friendly CMS systems, along with Drupal.
Absolutely, I have a brief affair with Drupal but stuck with Joomla! and WordPress eventually.
The thing with WOrdPRess is that you don;t have to wrestle it to the ground and fight with it to get it SEO compliant, whereas the older Joomla! versions were a nightmare – especially the duplicate content stuff.
Cool, thanks for the info… But,
Is wordpress considered SEO friendly ‘out of the box’ as it were, or does it need modifications to achieve this?
I ask because I have wordpress as an option in fantastico in cpanel, and I am considering whether I should install from there, or look for a pre modified/ SEO friendlier version I can download and install.
Any Advice?
A base-theme like Thematic + Good permalinks and a decent SEO plugin are all you need—as long as you have good, well-linked-to content. Bad SEO plus good content will always win.
I’ve built a few sites for clients, CMS for antique shops. I use posts and categories for the items presented, very “image gallery” oriented. Now I’ve been looking at frameworks, playing with Thematic. Working with posts is a bit of a challenge because it leans so heavily towards blogging. The post header kind of tripped me up. I like the idea of clients being able to “blog” too of course. What do you think of Thematic for this kind of site? I did read the turtorial on the post header, by the way.
I think it’s great for any site with less than 50 pages that wants a blog and nothing more. Anything else and I would consider using another CMS, most likely Drupal.
But it’s really great for most small sites.
Actually, I’ve built quite a few sites around WordPress with tens of thousands of pages, including a newspaper with archives dating back to 1996 that includes more than 50K stories (set up as posts). In that case, the built-in archives by date (daily) and categories (news, sports, etc.) was ideal.
I’ve also built a children’s library that’s up to about 3K book titles set up similarly, but which we expect to go higher as we scan in books, convert the results to XML and import them into WordPress.
Both projects involved challenges, but the thousands of WordPress plugin solutions and great documentation made them solvable. It also made it easy to pass the projects on to other developers because of the large number of people with WordPress experience.
This is a discussion I’m interested in pursuing… when to use WordPress, when Drupal. We’ve been creating some small sites using WordPress-as-cms. Most difficult is secondary nav if you don’t want to use dropdowns. I’m an accessibility devotee as well as web standards, so I don’t do dropdowns. We’ve figured out a solution, but it’s not perfect yet.
Right now, I’m also investigating WordPress MU for a business directory site, where we’ll have categories, and individual business pages/posts. Any words of advice?
I chose wordpress about 6 months ago, self taught… I really want to stick with wordpress. I think I’ve learned a bit about php just working with wordpress, and the challenge of learning drupal is a bit intimidating (I’m trying to make a living). For me, I might need 500 posts for inventory that displays images and information. No shopping cart. Of course, I want my clients to have a cms that they can maintain and at the same time, function well.
Couldn’t agree more, used to use mambo, haven’t looked back since, have been very happy with the recent update aswell. What more do you want, its free its easy to use, it comes in all languages, you don’t need to be a coder, there are some great magazine themes already out there for free or paid. I could go on… NIce post anyway. ATB George
[…] How to “plan and think of WordPress as a CMS” […]
[…] Lee el articulo “Cómo planear y pensar a WordPress como un CMS”. […]
[…] How to “plan and think of WordPress as a CMS” […]
[…] How to “plan and think of WordPress as a CMS” […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress (tags: wordpress cms) […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress — 6:42pm via […]
Ian, this is very to the point and very helpful ,thanks.
hey guys , i have used wordpress as a CMS in my Project .
here it is http://www.jollyhits.com
I think it’s a good idea to build a website based on wordpress
but one problem is people go to your site still think it’s a blog, not a website.
How can I get this thought away from their brain?
[…] WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS. […]
[…] WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS. […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress […]
[…] WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS. […]
Thanks for this article. I’ve got a WP design that I generally like, but it feels pretty flat compared to professional-grade themes like Thematic or Carrington. I’ve been meaning to re-imagine the design for a while now but I never got around to it because I wasn’t sure where to start. You’ve given me a great overview of where to go from where I am now, and I’m looking forward to putting this into practice.
[…] WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS. […]
[…] WordPress as a CMS: How to Think About Building a Website with WordPress (使用 WP 建立 CMS：使用 WP 建立网站应该如何考虑) – 使用 WP 建立 CMS 概述。 […]
[…] WordPress as a CMS: How to Think About Building a Website with WordPress A good article by Ian Stewart that discusses planning and setting up your site correctly. […]
[…] WordPress como un CMS: Cómo pensar en construir una página web con WordPress – Una gran visión de conjunto y un tutorial para el establecimiento de WP como un CMS. […]
I know this is a real old post..
Just released a new plugin that adds multiple editable “blocks” to WordPress page templates. Sort of fills need of having more than 1 content region per page.
Info page: http://blog.page.ly/multiedit-plugin/
Plugin download: http://wordpress.org/extend/plugins/pagely-multiedit/
I’m just starting to work with wordpress and the idea is to build our new website on it. However, I need to do it in english and spanish, your very elegant Kirby theme is supposed to be translation-ready, and I’m using the xlanguage plug-in for the content, but how can I get the other texts such as “posted by” “categories” etc, to work in the spanish version?
[…] WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS. […]
[…] WordPress as a CMS: How To Think About Building a Website With WordPress […]
I’ve been meaning to re-imagine the design for a while now but I never got around to it because I wasn’t sure where to start. You’ve given me a great overview of where to go from where I am now, and I’m looking forward to putting this into practice.
[…] thanks to the support forums. Plus there are so many sites with tutorials on how to start, such as this one by Ian […]