Gallery

How to build a website in two hours

Posted on 18 Jun 2009 at 10:57

With a little bit of help from wordpress, Kevin Partner reveals how to design and launch a website in a couple of hours.

6. In a web browser go to www.yourdomainname.co.uk/wp-admin/install.php

7. You should see a setup screen. Fill in your website name and an email address for the administrator account. This doesn't have to be on the same domain.

8. That's it: a WordPress admin account has now been created with a random password.

9. Use this to log in and you'll be taken straight to your new blog's dashboard.

10. Click Users on the left and float over the admin link. Click edit and change the password to a secure one that you'll remember.

11. Click "Visit site" at the top of the page to see your new blog/website in all its glory.

You'll probably be underwhelmed by its appearance, as WordPress's default theme is one of the most boring I've seen, but take heart as there are hundreds of free themes to choose from and all can be customised as much or as little as you like.

To give your new website a subtitle go to Settings | General Settings. In Settings | Discussion, deselect "Allow people to post comments on the article" and select "Users must be registered and logged in to comment" - because this is a website, not a blog and you therefore won't want people commenting on your page copy. You need to add a single blog post that will form the text of your homepage, and then select Visibility at the top right and click "Stick this post to the front page" to keep it at the front. (There's a way of forcing WordPress to go to a specific page whenever your site loads, but this is the easiest way to ensure the default page contains the text you want.) You can now use the Pages menu in the dashboard to add new pages and create the structure of your site.

Dressing it up

Now the content is in place, it's time to improve the look and feel of the site. Find a suitable theme by selecting Appearance | Themes from the dashboard, and under "Get More Themes" clicking WordPress Theme Directory. There are around 700 to choose from, so use the search box to hone in further: I wanted a blue design for Kool Driving School, so I typed "blue" into the search box. Scroll through the themes presented, clicking Preview to see how each might look, and if you like one click Download. Unzip the downloaded theme to a folder on your hard drive and then upload this folder structure to the wp-content/themes directory of your web server. Now return to Appearance | Themes and you should see a thumbnail of your theme, which you can activate by clicking and selecting Activate.

Editing the look and feel

If you're entirely happy with your new theme then go and make yourself a cup of coffee; if not, delve into the code to tweak it further. If you're going to do this I'd strongly recommend downloading the Web Developer plugin for Firefox, which will show you the CSS behind the design and help identify which bits you want to edit. Every WordPress site design includes widgets, blocks of pre-created content, including Calendar, Archive, lists of Pages and Categories. By selecting Appearance | Widgets and the appropriate container (usually a sidebar) you can add, remove or edit such widgets until you have just those you want on your site - for Kool Driving School I wanted only Pages and Links.

Now go to Appearance and select Editor, where you'll be offered a list of files on the right-hand side: you're most likely to want to edit style.css, so click on that. If you see the line "You need to make this file writable before you can save your changes" then find the file using your FTP program and set its permissions value to "666" (yes, really) - click on the file again in WordPress and it should now show an Update File button. I'd certainly recommend you fiddle with this file rather than with PHP source files, as you're much less likely to do any real harm. Open the home page in Firefox and from the Web Developer toolbar select CSS | View Style Information. Move your mouse over any part of the page you want to amend and you'll see its CSS selector displayed - in the WordPress editor open up style.css again, find that selector and amend it.