PLAN:

1. This is most important tip—work with a professional website designer-developer.
   • A professional web designer should have a collection of sites to share with you.
   • They should be able to provide you with references if asked, or you could just take it upon yourself to ask the website owners whose examples you are shown.
   • Their business should seem stable and solid, like they’ve been around for awhile and intend to be around for awhile more.
2. If you have something in mind tell the designer. It’s very helpful to share a list of sites you like and why, especially ones from your industry.
3. Make sure the designer knows who your audience is. Day spa customers are much different than computer network engineers.
4. Let the designer know before making a commitment if there are technology requirements like ASP, PHP, mySQL, and Cold Fusion. Most web designers are familiar with certain technologies but probably not all of them. We work mostly with PHP and mySQL plus some Flash. We would good or efficient doing a website project in ASP or Cold Fusion.
5. Use a designer-developer who can build a site that is easy to update. You may want to handle most of the updates yourself if you have the time and/or staff or the designer can do it. Either way it should be an easy process. The major search engines (Google, Yahoo, and MSN) like fresh content.
6. If you’re concerned about search engine optimization (SEO), you most likely should be, choose a designer who is familiar with the innumerable ins and outs of SEO.
7. As hard as it may be, try to have a starting point outline and maybe even some content. You and the designer-developer will refine your site as it develops so it doesn’t have to perfect or final. But it’s very helpful to have at least a rudimentary site structure (home, about us, contact us, services, products, sitemap, blog, etc.) and perhaps a rough draft for at least some of the pages. The designer should be able to help you with the site structure. FYI: as of this writing Google like to see 300 to 600 words per page for SEO purposes.
8. Use excellent photography or illustration if you plan to use it. Good imagery will make or a break a website. Hire a professional photographer or use high quality stock images if you need to.
9. Of course, get an estimate. Before getting an estimate you might consider asking the designer if there is a base fee or minimum for website design. If the base fee is more than you are willing to spend tell the designer thanks but no thanks. There’s no sense in wasting your time or the designer’s.

DESIGN:

1. After the designer has enough information and the initial materials to get started they get to work. The first step is to design some initial layouts so the designer, with your feedback, can develop the look. Some designers show one layout, some show more. We usually show two or three layouts, each consisting of a home page and one interior page. Sometimes we do them as working web pages and sometimes as PDFs or JPGs. It depends on the budget and time.

DEVELOP:

1. Once a layout is finalized, the designer creates the web pages. It can help avoid miscommunication and errors to use a designer who is willing to let you see the work at stages during the development. Once we have something presentable we give the client a URL so they can check on progress. It’s not so different from peeking through the plywood wall at a city construction site.
2. One caveat… let the designer do their job. There will be times when the site doesn’t look like you think it should or there’s a nasty error message instead of a beautiful web page. That’s all part of the development process. Missing images, the page not looking right and error messages could appear because the page has been uploaded but supporting scripts or other files have not been yet.
3. Good preparation will minimize changes and make the project go more quickly. However, there will almost certainly be changes from your side and maybe from the designer’s side as well. Language that you thought sounded right or the site structure that seemed logical on paper didn’t quite work on the web. Or an approved layout didn’t translate to HTML and CSS (cascading style sheets) as well as expected. Changes are always part of any web design project and should be expected.
4. Test. As the site is being developed the designer should be checking to make sure the web pages work in the major browsers on both PC and Mac. No one wants a nasty surprise at the end where the page doesn’t display right on a prospect’s computer. Also test that everything functions as it should, especially forms and shopping carts, on a variety of computers. You and/or the designer-developer should get colleagues, friends, family and the guy on the street to make check your site.

LAUNCH:

1. When everything is ready to go the web designer-developer will launch the site. There are number of ways this happens but it usually only take a few minutes.
2. Have another good look at the site to make sure everything is still working.

MAINTAIN:

1. The major search engines (Google, Yahoo, and MSN) like fresh content, so try to update the content on your site every so often, the more frequent the better. Having a site that is easy to update, either by you or the website designer-developer, is a consideration that should not be overlooked.
2. Track your site. Your designer-developer may have set-up a Google Analytics account. This is a very powerful, free tool that provides excellent visitor analysis.

I hope this helps clarify how to work with a website designer-developer. Please add your suggestions and comments below.

That said, I am currently writing a new post using a more advanced method. It uses the Thematic theme and a customized child theme. The advantages being Thematic has a lot of great features and using a child theme leaves the base code in tact. Please stand by.

You’ll need to know some basics:

• how to FTP to your site;
• how to set permissions;
• your database hostname (probably localhost), the database name, your username and your password for the database; and
• some CSS and XHTML basics.

Download and install WordPress

1. Download WordPress.
2. Install WordPress on your server in a new directory. Call it something user-friendly like ‘blog’ or ‘articles’. A separate folder for your blog helps keeps the your site organized and reduces the chance of accidentally overwriting an existing file with a file in the WordPress installation. Follow the easy five-minute installation instructions.
3. Complete the installation and make sure everything is working. See Common Installation Problems or add a comment below if you’re having trouble.
4. Right off the bat you may want to install the Akismet plugin to help keep the spam at bay.

NOTE: The steps below assume that you can edit files with a text or web editing program on your local computer and save them directly to your web server. Alternatively, you can work on the local files (the WordPress directory you downloaded) and upload them to your server as you work.

Initial set-up for your blog template

1. FTP into the WordPress installation on your server.
2. Go to the themes directory. It’s in /yourwordpressdirectory/wp-content/themes.
3. In the themes directory you’ll see that each theme has it’s own directory. Duplicate the classic directory, which houses the classic theme.
4. Think of a name for your new theme, like ‘My Theme’ or ‘Existential’. Let’s call this one My Theme’.
5. Rename the duplicated directory to your new theme’s name except use a server friendly name. Following the My Theme example, we’ll call the directory my_theme.
6. In the my_theme directory, open the file style.css with a text or web editing program, I like Adobe Dreamweaver and BBEdit (Mac only).
7. Change the following lines (should be about lines 2-7) to information about you and your theme:

   Theme Name: Your Theme Name
Theme URI: http://yourwebsite.com/
Description: A description for your theme.
Version: 1.0
Author: Your Name
Tags: tags, for, your, theme, separated, by, commas

8. Once that’s saved login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
9. Click on Appearance then on Themes if it isn’t already selected.
10. You should see your theme name, in this example, My Theme, with a thumbnail that looks exactly like the Classic theme thumbnail. That’s because we haven’t changed the thumbnail yet. Click on the thumbnail or the theme name. You’ll see a preview window that looks exactly like the Classic theme, then click on Activate “Your Theme Name” in the upper right corner of the preview window. Of course, in this example Activate “Your Theme Name” would be Activate “My Theme”.
11. View your blog in another browser window or tab to make sure it’s still working. For now it should look just like the Classic theme.

Make an empty skeleton page of your website

This part gets a little ugly before it gets better. You’re going to overwrite index.php in your new theme’s directory with a page from your existing website then fix broken links to style sheets, images, hyperlinks, includes and scripts. Later you’ll add the WordPress code as needed after the skeleton page is working correctly.

1. From your website, open an existing page that has a layout similar to the layout you would like for your blog. Consider the header, number of columns you’ll want, the footer and any other common parts. I will use my About Us page because it has the header, a simple 2-column content area the footer.
2. Save the file as index.php in /yourwordpressdirectory/wp-content/themes/yourthemename. Make sure you save the file in the correct directory so you don’t accidentally overwrite an important index file.
3. Leaving the page layout structure intact, delete the content from this file that you will not want in your blog. I deleted just the about us content and left the header, empty content area and footer as is. Preview your blog in another browser window or tab, it probably isn’t looking so great. Not to worry.
4. Make sure the CSS file links are OK. You can use relative links with dots like ../../../../styles/main-styles.css, absolute links like http://www.mywebsite.com/styles/main-styles.css or a reference to the root directory like /styles/main-styles.css. You’ll know it’s OK if your background and divs are working. Personally, all those dots confuse me. I prefer the reference to root directory method.
5. Fix links for hyperlinks, to images and to any scripts as above.
6. If there are header, footer or other files that are used in your skeleton page with a PHP include() statement, copy the files into the yourthemename directory. WordPress 2.7 does not recognize the PHP include() statement.
7. Replace the PHP include() statements with:

   Using include (TEMPLATEPATH . '/your_include_file.php'); is the WordPress 2.7 way to include a non-WordPress file. But as far as I know the file has to be in the template directory. I would be interested in learning an easier and better solution for this if anyone knows one.

8. Preview your skeleton page again. It should look and function OK but without blog content.

Create the header and footer files

1. Make a new PHP file and save it to the yourthemename directory naming it header.php. It will overwrite the existing header.php file. Again, make sure you save the file in the correct directory.
2. Make a duplicate of the index.php in the yourthemename directory and name it index-backup1.php or similar. This is a backup copy just in case.
3. Open index.php from the yourthemename directory if it isn’t already open. Cut (not copy) the code from the top of the page up to and including the closing head tag .
4. In the new header.php, replace all of the existing code with the code in your clipboard cut from the top of index.php.
5. Save both files.
6. Make another new PHP file and save it to the yourthemename directory naming it footer.php. It will overwrite the existing footer.php file.
7. From index.php, cut (not copy) the code beginning with your footer, just after the end of the content divs, and paste it into the new file footer.php, replacing any code that was there.

   You may need to customize this part some because this tutorial is assuming you are using well-defined div for the different areas of your skeleton page.

8. Save footer.php.

Put it back together and add the WordPress parts

1. Open index.php from the yourthemename directory if it isn’t already open.
2. Also open index.php from the classic directory.
3. Copy (not cut) the first PHP block, probably lines 1-7, from classic/index.php and paste it immediately above the body tag in yourthemename/index.php.
4. Save yourthemename/index.php and preview your file. You should see your header but no blog, footer or sidebar with categories, recent posts, search, etc.
5. Copy the last PHP block, it should be <?php get_footer(); ?> and paste it at the very end of yourthemename/index.php.
6. Save yourthemename/index.php and preview your file. You should see your header and footer but still no blog or sidebar.
7. Copy the middle section—everything between between the header block and the footer block—from classic/index.php and paste into the main content area of yourthemename/index.php.
   ^?View Code PHP

   ','   '); ?&gt; <div> id="post-"&gt; <h3 class="storytitle"><a rel="bookmark" href="&lt;?php the_permalink() ?&gt;"></a></h3> <div class="meta"> — @ </div></div>

8. Save yourthemename/index.php and preview your file. You should see your header, footer, your blog but no sidebar.
9. Open classic/footer.php. Copy the code <?php get_sidebar(); ?> from classic/footer.php and paste into the div in yourthemename/index.php where you want the sidebar to go.
10. Save yourthemename/index.php and preview your file. You should now see all of the basics.

Everything should be working now. Next you can customize sidebar if you want to or finish up with a screen shot.

Add the screenshot

The final step is to replace the screenshot of your blog.

1. Take a screen shot of your new blog.
2. Crop it to 300px wide by 225px high.
3. Save it as a png to the yourthemename directory as screenshot.png replacing the classic screenshot that is currently there.
4. Login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
5. Click on Appearance then on Themes if it isn’t already selected.
6. You should see the screenshot of your integrated blog. You may need to refresh the page.

In the blog you are reading this from, I modified the sidebar bar a bit. Please visit How to Customize the WordPress Sidebar.

I hope you find this tutorial useful and accurate. I would greatly appreciate comments, suggestions and corrections.