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:
- A web hosting service that supports MySQL databases and PHP
- Download the WordPress source code
- A WordPress theme like this one: Fresh
- Ideally, PHP and MySQL installed on your local machine for faster testing
- 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
- Create a new MySQL database on your server (local or remote) and take note of the host, username, password, and database name.
- If you’re working locally on a Mac, your host name is likely to be “localhost:/tmp/mysql.sock”
- Unzip the WordPress source code into the folder where your website will be located
- Make sure the folder containing the WordPress files has permissions that allow anyone to “Read/Write”
- Navigate to the website URL in your browser, e.g.: http://localhost/~richardmuscat/newwebsite.local, and run through the install.
- If you’ve done everything correctly you will be given an admin password and asked to login. Make sure you copy the password
Step 2: Setup Basic WordPress Settings
- 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.
- Next, unzip the WordPress theme you downloaded and place it in the path: /yoursiteroot/wp-content/themes/newtheme
- In the WordPress control panel, click on the “Appearance” section on the left and activate the new theme
- 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.
- Finally, click on the “Settings” section on the left and then choose the “Reading” sub-section.
- 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.
- 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.
- Open up your website in your preferred HTML editor, e.g. Dreamweaver or TextMate
- 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.
- 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.
- 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’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.
Enjoy.
–
If you liked this post follow me on Twitter, I’m @richardmuscat, or subscribe to this blog’s RSS feed.
Enjoyed your tutorial. Do you think that it is possible to build a good web site (maybe web presence is a better term) using just wordpress.com? Obviously in this case you cannot get under the hood much but would it be good enough for a personal or small business purpose?
Cheers.
granthamtech
March 25, 2009 at 7:16 pm
[...] more here: Using WordPress to Build Small Websites: Step by Step Tutorial … Posted in News | Tags: advertising, creativity, design, facebook, pages, Step By Step, [...]
Using Wordpress to Build Small Websites: Step by Step Tutorial … | Chicago Web Design
March 25, 2009 at 8:23 pm
As always it depends on what the web presence is for. I recently read an article (can’t remember where) that said a number of small/micro businesses are finding that even a Facebook page is good enough for their purposes.
WordPress.com has a lot of advantages: it’s free, can deal with huge traffic, constantly updated and plugs you into a social network.
For a small fee you can also get a proper domain name associated with a wordpress.com account without needing fully-fledged web-hosting.
Of course, If you want shopping, forums or other stuff it’s not a good choice there…
Richard Muscat
March 25, 2009 at 9:17 pm
[...] Original post: Using WordPress to Build Small Websites: Step by Step Tutorial … [...]
Using Wordpress to Build Small Websites: Step by Step Tutorial …
March 26, 2009 at 12:26 am
[...] Using WordPress to Build Small Websites: Step by Step Tutorial Serious Simplicity (tags: ping.fm) [...]
links for 2009-03-25 « Serious Simplicity
March 26, 2009 at 4:03 am
hi,
I’m new to the concept of web site designing.
nor do I know too much….so I’m progressing only learning from the Internet from people like you.
I’m trying to make a few web sites, very simple ones basically.
had been able to install WordPress and login.
then I tried making a post, and pressed on publish.
however. the web site still shows the same default page. there is no change.
also, based on some forum ; deleted the index.html file too from the road directly but still no change.
can someone guide me..
thanks
Doc
March 26, 2009 at 12:45 pm
sorry, that should read “deleted the index.html file too from the root directory but still no change”.
Doc
March 26, 2009 at 12:48 pm
I thought blog is for HTML dummies like myself. Your tips seem detailed but too difficult! Is there simpler way to do it?
PR Mania
March 29, 2009 at 5:14 pm
Sorry… that tutorial is not quite for dummies and newbies :-)
It’s meant for people who already know how to build websites. If you’re looking for a quick way to create your own website, I would suggest something like http://www.edicy.com/
Richard Muscat
March 29, 2009 at 5:36 pm
[...] Using WordPress to Build Small Websites: Step by Step Tutorial … [...]
Editor’s Picks: March 30-April 3, 2009 — Hobby Cash: Make Cash Blogging About the Things You Love
April 3, 2009 at 3:37 pm
Great work, thanks.
Just what the doctor ordered.
April 6, 2009 at 6:40 pm
Thanks, I will made one now itself. and will start publishing.
Jazlert
April 8, 2009 at 3:01 am
[...] Step by step tutorial on building small websites with WordPress [...]
Step by step tutorial on building small websites with WordPress | WPLover
April 13, 2009 at 2:02 am
[...] following an impressive response to my tutorial on using WordPress for small websites, I plan to write a detailed follow up tutorial that is less “techy” and more usable for [...]
A Warm Welcome to May « Serious Simplicity
May 1, 2009 at 10:12 am
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
Google Chrome Wallpapers
May 17, 2009 at 3:01 pm
great tutorial. there is further references for this type of project here: http://alphaorganic.wordpress.com/2009/06/05/diy-website/
I am going to post this tutorial under the one I created.
alphaorganic
June 18, 2009 at 6:13 am
[...] is a link to another similar tutorial: http://richardmuscat.wordpress.com/2009/03/25/using-wordpress-as-a-cms-step-by-step-tutorial/ Possibly related posts: (automatically generated)Transferring your wordpress blog over another [...]
DIY Website « Alpha Organic Blog
June 18, 2009 at 6:14 am
Fantastic Blog! It’s nice that people go to the trouble of making content like this available for beginners.
You did a fantastic job explaining everything and I think most people could follow this very easily.
Again Great Job!
Karl
Karl Internet Marketer
July 23, 2009 at 12:20 am
Great Post…I also found this tutorial useful.
http://aotutorial.wordpress.com/
alphaorganic
August 19, 2009 at 7:41 pm
Hi,
Your directions were pretty good by the way. But i am a designer wanting to move into web and would like to know how to use wordpress to upload my own designs and make it work.
If for example i have done a page in adobe illustrator, is there a way to upload that graphic or elents to wordpress?
Lee
August 28, 2009 at 11:55 am
There is no completely automated way that I know of to do that. To create a custom design for WP you will need to create your own theme… which does require quite a bit of HTML/CSS knowledge (though not necessarily PHP, depending on the complexity of your design).
I would suggest having a look at services like http://www.psd2html.com/ who get as close as possible to automating what you seem to be looking for at very good prices.
Richard Muscat
September 2, 2009 at 2:13 am
[...] this popular, text based, step by step tutorial, and is a great foundation for anyone who needs to build a series of small Websites with WordPress (about 4 pages with a blog [...]
How To Make A WordPress Theme | A WordPress How To Blog || DesnDev
September 2, 2009 at 9:19 pm
Excellent site, keep up the good work
Bill Bartmann
September 7, 2009 at 5:29 pm
[...] is a link to another similar tutorial: http://richardmuscat.wordpress.com/2009/03/25/using-wordpress-as-a-cms-step-by-step-tutorial/ // Subscribe to comments Comment | Trackback | Post Tags: Alpha Organic, CSS, DIY, Hosting, [...]
AO Tutorial & Review Blog » DIY Website
September 14, 2009 at 6:23 am
Nice tutorial, Richard. I have to say that most designers and also programmers have a lot of issues going beyond developing very simple layouts in WordPress and Joomla.
Using a service like ours works out much cheaper and hassle free for web designers.
ButterflyHTML - PSD to HTML
September 26, 2009 at 4:58 pm