Using WordPress to Build Small Websites: Step by Step Tutorial

Using WordPress to Build Small Websites: Step by Step Tutorial

Update: This article has proven more popular than anticipated. If you find it useful, I would appreciate your leaving a comment as to how it could be made better. Also, any suggestions for other similar tutorials would be very welcome.

Recently I found myself – for one reason or another having to make a number of small websites. The kind that have a Simple home page, an “About us ” section, a “Products & services” (or free ebook Download) section, a Contact page and a blog/news page.

A large requirement in making these sites was that it didn’t take too much time and that post-launch, the sites would be editable by somebody who’s not me. Enter WordPress.

I determined to try my hand at using WordPress as a Content Management System (CMS). It worked marvelously and, being a process freak, I took notes which I’m now sharing here. So, here’s how to instantly build a basic website using WordPress as your CMS.

What you need :

1. A web hosting service that supports PHP and MySQL databases
2. Download the WordPress source code
3. A WordPress themes like this one : Fresh
4. perfectly, PHP and MySQL installed on your local machine for faster testing
5. If you have your own custom design / Css stylesheet, try to prepare the HTML in the following way
• Have a big “wrapper” div that contain the entire page
• Have a “header” div that includes the navigation menu
• The main navigation should be structured in a way so that the menu items are <li> tags
• Have separate “footer” div that contains the copyright notice, credits, etc
• put all the page content (article and sidebar, if any) enclosed within one “page” div
• If your “page” div contains a main section and a sidebar, make sure the sidebar markup comes after the page content.

Stair 01: Install WordPress

One.Create a new MySQL database on your server (local or remote) and take note of the host, username, password, and database name.

One:If you’re working locally on a Mac, your host name is likely to be “localhost:/tmp/mysql.sock”

Two:Unzip the WordPress source code into the folder where your website will be located

Three:Make sure the folder containing the WordPress files has permissions that allow anyone to “Read/Write”

Four: Navigate to the website URL in your browser, e.g.: http://localhost/~richardmuscat/newwebsite.local, and run through the install.

Five: If you already have done every thing properly you will be given an admin password and asked to login. Make sure you copy the password. [Update: If you use the latest version of WordPress (v.3.0+) you should be able to choose your own password rather than be given a randomly generated one.]

Stair 02: Setup Basic WordPress Settings

One: When you login to your new WordPress account, the first thing you should do is click on your username (“admin”) on the top right and changes your password to something more memorable than the random one WP gives you.

Two: Next, unzip the WordPress theme you downloaded and place it in the path: /yoursiteroot/wp-content/themes/newtheme

Three: In the WordPress control panel, click on the “Appearance” section on the left and activate the new theme

Four: Next, click on the “Pages” section on the left and add your website pages, e.g.: Home, About Us, Products & SErvices, News and Contact Us. You can go away the pages blank for now. Make sure you click on the “Publish” button when saving the pages.

Five: Finally, click on the “Settings” section on the left and then choose the “Reading” sub-section.

Six: Set the first option – Front page displays – to “Static” page

• Choose what you’d like to be your homepage from the drop down list.
• Then choose which of the pages you just created – e.g. News & Events – you’d like to be your “blog” page that shows latest news, articles, events etc.

Seven: Save your settings

Stair 03: Customizing your Themes

If you are pleased with the theme you’ve chosen, just go ahead and upload everything and you’re done! If however you have your own custom design for the website you will need to modify your chosen theme. Here’s how to do it assuming that you have an HTML/CSS version of your site’s layout.

One: Open up your website in your preferred HTML editor, e.g. Dreamweaver ,netbeans or TextMate

Two: Navigate to the theme folder and open it up. You should have a bunch of PHP files, a Css stylesheet (styles.css) and an images folder.

Three: Stylesheet: There is usually only stylesheet associated with a WordPress theme. You can do the following:

o    Either edit the existing stylesheet to match your requirements,

o    Replace the contents of “stylesheet.css” with your own pre-defined stylesheet, or

o    Leave the stylesheet as is and include your own stylesheet in addition by referencing it in the header.php file.

 Four: The PHP files: WordPress renders your page by ‘gluing’ a number of different php files together. The following image deconstructs what goes where:

What goes where

That is done! Well, I am sure it takes a bit more than that (it always does for me) but those are the principal steps. There’s a whole bunch of tutorials and other information on the web, especially on the WordPress forums and support sites.

Enjoy.