This is a step-by-step tutorial for building a website quickly.
Some uses for this project are:
- Designing a simple to intermediately complex website — it can be as complex as you make it.
- Prototyping or wireframing a design.
- As an affiliate theme that can be modified slightly for any need.
- A starting point to learn: CSS, wordpress theme development.
The tools we will use to do this is:
- WordPress – We chose WordPress because it gives us a framework to build our website easily. No more hand-coding html, the heavy lifting is done for us!
- Thematic theme – To make our website presentable we need a theme that allows quick and easy customization. No altering gifs and jpgs. We can add those later.
- A text editor like notepad or (my favorite) Notepad++.
- Your own creativity – You provide the content for your pages and a color scheme (if you so desire).
Let’s go!
WordPress is great software if you want to design a blog, but we want to design a plain website that doesn’t include a blog. That’s ok, we’ll just use Pages. A Page is a static entity, like a single traditional HTML file you might have on your server. (WordPress explains the difference well here.) We’ll use these to create our non-dynamic content for our website.
Go create some pages for your website. In our example, I will create the following pages: Home, About, Contact, Products/Services. If you are doing this for your website, feel free to add images and headers, for your content. I will just be using dummy content.
Next, we will customize how these will display to your visitors, we want to put them in a logical order on our header toolbar (Home, About, Products/Services, Contact). You can do this with custom page order.
For each page, edit them in WordPress and locate the following drop down list. It allows you to change order of display for each page as you create them.
Page Order Caption
For our web pages, set the following values:
- Home – 0
- About – 1
- Products/Services – 2
- Contact – 3
Reload your webpage and verify the menu shows the correct order for your pages.
Display of altered menu list order
This is great, but you can still see there is a blog post on the front page and not our home page. Since we don’t want to use this as a blog right now, we will assign our “Home” page as the front page of the website. Fortunately, WordPress gives us an easy way to do this.
In your admin console, go to Settings->Reading. Here we see an option to change what the “Front page displays”. Select the radio button for “Static Page”. From the Front Page menu, select which page you want to display as the Home page. We already set up our page named Home, so select this and click the Save Changes button.
Reading Settings
Again, view our web page. Now our home page is correctly displayed first.
Next we want to change our theme to something that looks less like a blog theme and more like our website. This is where WordPress themes come in handy.
We want our website to have:
- Top header where we can put our title.
- A standard horizontal menu bar.
- The content area on each page.
To do this we install our Thematic theme. Thematic is a wordpress theme that is basically a blank slate you can hang your design on. It works great and is very simple and easy to fix the way we want with a minimum of effort.
Select it from your themes menu in your WordPress administration panel.
Again, view your web page. You can see we now have a good looking web page to display our company information.
Now this looks good and you can stop here if you are satisfied, but some of the proportions aren’t exactly what I think of as a standard web-site design.
I would prefer my generic website have the following features:
- Clearly defined sections (header, menu, content) with different colors to distinguish them.
- Each section aligned to look more unified as a single page.
- A defined background area with a different color to set off our content areas.
We can do this by creating a child theme that uses Thematic as it’s parent. This allows us to inherit what we like and change only what we need. The great thing about wordpress themes is that they can cascade allowing you to modify only what you need and inherit the rest of the styles and forms from another them or multiple themes. Neat-o!
Create a new folder under webhome/wp-content/themes called child-theme (or whatever you want).
Move or copy the file named style.css from webhome\wp-content\themes\thematic\thematicsamplechildtheme and into our child theme directory.
Open up the style.css we just copied in a text editor and add the following text at the bottom:
body {
background-color: #ccc; /* color to differentiate areas only*/
font-family: verdana, arial, sans-serif; /*specify a font*/
}
#branding {
background-color: #eee; /*set a color*/
padding: 50px 0 40px 0; /*adjust sizing for removed tagline, make header height smaller*/
/*padding: 50px 0 30px 0; /*uncomment if you add a tagline/description to the blog header*/
}
#blog-title {
text-align: center; /*center our title text*/
}
#blog-description {
text-align: center;/* if specified, center our title subtext description*/
}
#main {
width:940px; /*smaller size to align to the header/toolbars*/
background-color: #fff; /*set a color*/
}
/*MENU CSS STYLES*/
#access { /*surrounds the main menu bar*/
width: 940px; /*expand bar to fill page size*/
margin: 0 auto; /*center menu bar*/
background-color: #ddd; /*color “behind” the buttons on the toolbar*/
}
/*** THEMATIC SKIN ***/
.sf-menu li {
text-align: center; /*I just prefer centered button text. Looks less like content.*/
min-width: 160px; /*I set this if I only have a few buttons to make a short toolbar look more complete
won’t work on IE < 7 if that matters to you, can always use minmax javascripts */
}
Download the modified style.css. (Rename the file to style.css)
Now view the same website in your browser and see how it has changed to a standard page format and is aligned with clear delineation among the sections. 
You can now make any tweaks and adjustments to it as you need to (change colors and alignments in the new style.css) and you’re good to go.
What Next?
Obviously, we may want to make additional changes and I will cover these in future tutorials.
- Add a header banner image.
- Change the footer.
- Align drop-down menus with button width.
