HTML 101 to WordPress TransformationBy
I am an HTML 101 baby. I learned to code when the Internet was young and frames were cool. Then came tables, slicing images, and rollovers. About two years ago I started working with CSS and PHP. Wow! Making site wide changes became more efficient and I suddenly had to learn a lot of new stuff. I also started working with content management interfaces and WordPress has quickly become my favorite – not just for blogging either – for building interactive, content rich web sites.
This weekend I decided it was time to take one of my old sites, Printables for Kids, that I created and maintain for fun and move it from an HTML 101 format to WordPress. Now I just want to know why I didn’t do this sooner?
Let’s take a look at the transformation. Below is the screen shot of the before – the HTML, table structured, basic site with a PR of 3 and decent traffic:
Nice. Simple. But a PAIN to update.
I decided to use the Blue Zinfandel WordPress theme by Brian Gardner as my base.
I started by going through the CSS style sheet section at a time and making my customizations. I added the header and then reviewed. Then I set the colors and reviewed. I took each piece individually and tweaked it until I got the same general look and feel as the original site, but with all the WordPress power. (Thanks Randa for your tips along the way.)
And the final product:
The site is now much easier to update and I can leverage the power of Technorati, MyBlogLog, blog carnivals, memes, and other blogging tools to increase the traffic to the site.
And if you have kids (and even if you don’t), go road test it for me and tell me what needs to be tweaked.