I used my holiday time to convert one of my own static sites. I wanted to use it as a case study in procedure and time. The site I converted was my Scripts and Database site, CyberCoded.com. This is one of my older sites and I have been too busy to convert it so I continued to manually add pages as needed.

I have about 10 hours invested in the whole process to convert this site. The bulk of the time is in the custom coding of a WordPress Theme from scratch to match an older site. There were 12 pages when I started and as some of the pages had different extensions I decided to convert the site using my favorite WordPress permalink structure and then redirect the old pages.

I used my Blank WordPress Theme so that I could start with a clean slate and match the design to the old site.

Here are the steps I took.

1. Installed WordPress in a Sub Folder
   • Set Privacy setting to OFF while I developed the site in a sub folder.
   • Modified the permalink to my favorite which is /%postname%/
2. Installed the Blank theme in the WordPress Themes folder.
   • I used FTP to upload the files into a new theme folder in WordPress.
3. Copied and matched elements from the old Style.css file into the WordPress Style.css
   • The blank theme has an empty CSS file.
   • The Body and Links were the only elements called out in the old CSS file.
   • Added Wrapper, Content, Header and Footer Divs to CSS.
4. Copied the Index.php file to home.php so I could have a custom Home page that would match the old page.
   • Simply copying the file like this makes a new home page with the home.php file.
5. Modified the WordPress code in the Home page to show each category and posts as lists.
   • Stripped out the common WordPress Loop
   • Created new code that loops through the categories and list each post per category.
   • Set the Category to sort in Descending order.
   • Set the Post titles to sort Title in ascending order
6. Created an Analytics.php file in the WordPress Theme to use throughout the site.
   • Retrieved the code from Google to use for analytics.php
7. Created a Header.php file within the WordPress Theme to add common header elements.
   • Modified the Title so that it would be SEO friendly, very similar to most popular SEO plugins.
   • Added a call to analytics.php file
8. Created a footer.php file in WordPress to add a common footer.
   • Used the code from the old static footer file for contact and info.
9. Created Single.php page
   • Added a Tweet This button from Twitter.
10. Created my Categories to match old site.
    • The old site had headers for each item type which I converted to Categories.
11. Copied each page from the old site into Textpad and removed any code that would interfere with WordPress.
12. Pasted each page into WordPress as a Post.
13. Created Tag Page.
    • Tag page list the excerpt for each Post that is tagged.
14. Created custom 404 page.
    • The 404 page shows a tag cloud to visitors.
15. Created Search page.
    • Search page only shows title for a matched post.
16. Widgetized and added a sidebar.
    • Create and set widgets in the functions.php file.
    • Add sidebar.php and corresponding code to use widgets.
    • Added a Facebook Like button.
    • Added RSS Button and link.
17. Copied the index.php from the WordPress sub folder to the root and modified the code to use WordPress from the Sub Folder.
18. Changed the Site Address within WordPress Admin to set the site in the root while leaving WordPress installed in the sub folder.
19. Redirected the old pages to the new WordPress pages using PHP header calls.
20. Installed and setup XML Sitemap Generator for WordPress Plugin

ALL DONE !

I copied the old Index file so we can see a before and after look.

Original Page versus New WordPress Site.

Most of the time was in the Theme setup. Each page took about 5 minutes to convert the content to a WordPress Post.

12 Pages, 10 hours

Think I will send my wife a bill and see if it gets paid, lol…

  Tweet

They are not necessarily in any particular order.

1. TextPad
2. Firefox with FireBug extension.
3. Chrome Browser
4. Skype
5. Google Talk
6. Google Reader
7. Twitter
8. Facebook
9. WordPress
10. Email (Gmail)

As an extra mention, most of these are used on my desktop and my iPhone. I am still doing 99.9% of my work on an HP Mini 311 Verizon Netbook, which is simply amazing.

  Tweet

However, there are several desktop applications that I have to install to be in my zone. I have been using each one of these for as long as I can remember. 

Sam Spade - Sam Spade is an integrated network query tool for Windows 95, 98, NT and Windows 2000. This tool allows me to keep several sites in the options as I am running traces, pings and whois calls.

Agent Ransack - Freeware graphical file searching that supports regular expressions for Windows. I keep a copy of all software I download, such as a copy of each WordPress Release. With Agent Ransack I can quickly find any reference to anything I am looking for in a very large file folder.

Process Explorer - Process Explorer, also known as procexp.exe, shows you information about which handles and DLLs processes have opened or loaded. If you want to know what is using up your resources on a Microsoft OS machine, this is the best way I have found. The biggest benefit to me is the ability to shut down and process without affecting the others.

TextPad - TextPad is an award winning text editor for Windows.  with powerful features that will increase your productivity. This is probably the most used tool I have. Everything I write or code gets passed through TextPad. There are so many features and reasons I could not possibly list them all.

Lynx Text Browser - Lynx is the text web browser. Recommended by Google to see what a site looks like to a Search Crawler. This package should be required of anyone who is working on website (blog) development. If you really want to know what it looks like, you have to check this out!

  Tweet