Static HTML to WordPress Conversion Case Study

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.

  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
  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…

7 thoughts on “Static HTML to WordPress Conversion Case Study

  1. Step by step is always great to see David. People usually don’t have any clue all the steps that are involved, and that each site presents it’s own unique challenges. Rarely do I see a project come through that is exactly like the last or any prior. Good stuff!

    Oh, and good luck getting your wife to kick down any cash, lol 😉

Leave a Reply

Your email address will not be published. Required fields are marked *