Converting older static html sites to WordPress is one of the most popular things for me to work on. Seems there are still a lot of older sites that have no CMS system and when people decide to finally convert these sites WordPress is one of the most popular options.
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.
- 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%/
- Installed the Blank theme in the WordPress Themes folder.
- I used FTP to upload the files into a new theme folder in WordPress.
- 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.
- 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.
- 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
- Created an Analytics.php file in the WordPress Theme to use throughout the site.
- Retrieved the code from Google to use for analytics.php
- 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
- 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.
- Created Single.php page
- Added a Tweet This button from Twitter.
- Created my Categories to match old site.
- The old site had headers for each item type which I converted to Categories.
- Copied each page from the old site into Textpad and removed any code that would interfere with WordPress.
- Pasted each page into WordPress as a Post.
- Created Tag Page.
- Tag page list the excerpt for each Post that is tagged.
- Created custom 404 page.
- The 404 page shows a tag cloud to visitors.
- Created Search page.
- Search page only shows title for a matched post.
- 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.
- Copied the index.php from the WordPress sub folder to the root and modified the code to use WordPress from the Sub Folder.
- Changed the Site Address within WordPress Admin to set the site in the root while leaving WordPress installed in the sub folder.
- Redirected the old pages to the new WordPress pages using PHP header calls.
- 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.
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…