Thursday, 18 July 2013

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 build a number of small websites. The kind that have a home page, an “About” section, a “Products” (or services) section, a Contact page and a blog/news page.
A big requirement in building 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 decided to try my hand at using WordPress as a Content Management System (CMS). It worked wonderfully and, being a process freak, I took notes which I’m now sharing here. So, here’s how to quickly build a basic website using WordPress as your CMS.
What you need:
  1. A web hosting service that supports MySQL databases and PHP
  2. Download the WordPress source code
  3. A WordPress theme like this one: Fresh
  4. Ideally, PHP and MySQL installed on your local machine for faster testing
  5. If you have your own custom design/stylesheet, try to prepare the HTML in the following way
    • Have a big “wrapper” div that encloses the entire page
    • Have a “header” div that includes the main navigation
    • 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
    • Keep 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.
Step 1: Install WordPress
  1. Create a new MySQL database on your server (local or remote) and take note of the host, username, password, and database name.
  2. If you’re working locally on a Mac, your host name is likely to be “localhost:/tmp/mysql.sock”
  3. Unzip the WordPress source code into the folder where your website will be located
  4. Make sure the folder containing the WordPress files has permissions that allow anyone to “Read/Write”
  5. Navigate to the website URL in your browser, e.g.: http://localhost/~richardmuscat/newwebsite.local, and run through the install.
  6. If you’ve done everything correctly 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.]
Step 2: Setup Basic WordPress Settings
  1. 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 change your password to something more memorable than the random one WP gives you.
  2. Next, unzip the WordPress theme you downloaded and place it in the path: /yoursiteroot/wp-content/themes/newtheme
  3. In the WordPress control panel, click on the “Appearance” section on the left and activate the new theme
  4. Next, click on the “Pages” section on the left and add your website pages, e.g.: Home, About Us, Products, News and Contact. You can leave the pages blank for now. Make sure you click on the “Publish” button when saving the pages.
  5. Finally, click on the “Settings” section on the left and then choose the “Reading” sub-section.
  6. 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.
  7. Save your settings
Step 3: Customising your Theme
If you’re happy 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.
  1. Open up your website in your preferred HTML editor, e.g. Dreamweaver or TextMate
  2. Navigate to the theme folder and open it up. You should have a bunch of PHP files, a stylesheet (styles.css) and an images folder.
  3. Stylesheet: There is usually only stylesheet associated with a WordPress theme. You can do the following:
    • Either edit the existing stylesheet to match your requirements,
    • Replace the contents of “stylesheet.css” with your own pre-defined stylesheet, or
    • Leave the stylesheet as is and include your own stylesheet in addition by referencing it in the header.php file.
  4. 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
What goes where
That’s it! Well, I’m 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.
Further Reading
This tutorial barely scratches the surface of WordPress development. If you need more in depth detail or more beginner’s guidance I recommend the following books:
Beginner:
Intermediate
Advanced

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)