Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
When most people think about WordPress, they think about blogs. If you look at the front page of WordPress.org they talk a lot about blogging as well. What they don't tell you is that WordPress also doubles as a very powerful CMS; you just have to set it up properly. It can also be a bit tricky to get setup and working the way that you want. That is where I come in. In this 3-part tutorial series, I'm going to take you through the three steps of using WordPress as a CMS.
Also available in this series:
This tutorial includes a screencast available to Tuts+ Premium members.
The first part is going to be designing a simple layout in Photoshop. Part two will include coding the website as a static HTML template, and the last part will walk you through setting up WordPress and applying our new theme to it's template system.
If you're an experienced web developer these first two parts may be peanuts for you, but do yourself a favor and just skim over the content. You never know, you may pick up on something new, or a different way of doing things.
You're probably sick of reading so let's get our hands dirty!
Open up Photoshop and create a new blank canvas. I usually just choose 1024 x 768 from the web drop down.
I've gone ahead and created a quick color palette and locked it as a top layer. This way I can reference it without have to worry about losing it in the fray.
Fill in your background with the lightest color and get ready to make some guides.
We are going to create guides so we can pre-layout the look of our site before we start laying down graphic elements. If you don't have rulers turned on go ahead and hit ⌘-R to turn them on.
If you mouse over the ruler, click and move away your cursor will change and there will either be a horizontal or vertical line following the mouse. This is a guide. Let go to create on.
We are going to layout the sidebar, header and main content section. Make your guides look like mine, or somewhat like mine. We laid out the sidebar borders as well as the padding we want to include.
Every site needs a logo. The logo is going to sit right above the sidebar. If you have a logo, place it there now, otherwise we are going to create a speech bubble logo. Why? I like speech bubbles.
I added a little bit of solid drop shadow directly underneath it for some styling. Lets give our website a name. I'm going to call it Gear'd and use a little gear icon.
Our users need a way to navigate our site. We are going to place our navigation over top of our main content and align it over to the right. Take out our text tool and write out some navigation items.
We are going to pretend that we are selling a service. Let's say that gear'd is a web app and users can signup to buy different levels of membership.
Our navigation is going to include About, Plans & Pricing, FAQ and Contact. We want the user to know what page they are currently on, so lets make an active as well as a hover state for our navigation buttons.
For this I've just created a rounded square with a lighter colored text option. The hover state has a light color, just a bit bigger than the background color.
Our web app offers a few levels of membership that they user should be able to navigation through. We don't really want to have 100 different main navigation items because it's ugly. This is where the sidebar comes in.
Lets take the same styling we used to the navigation main, hover and active states and apply them to some sidebar navigation. The sidebar navigation is going to hold our secondary navigation for the main page we are on. This includes and pricing and signup information, or different areas of about or contact.
The page is looking a little empty, lets add some content.
We've added some header text as well as mini header text underneath. Just another visual indication of where the user currently is.
Next we've added a rounded box the entire width of our content area and threw an image inside of it.
Last, we added our body text.
Our site is starting to come together nicely. We've added all of our elements but one, our footer.
Our footer is going to hold our copyright as well as some more pages that don't really require some main navigation space.
Add a line break to split up the page a little bit and then lets put some copyright text in and align it all the way to the left guide.
We've just created a simple site that we can now convert into an HTML and CSS template. Feel free to spice the template up but for the sake of speed and ease of use we are going to move on from here.