Many websites have a similar layout, basically dividing the screen into three main parts. This is the header, the content, and the footer. Additionally, websites often have the following layout features: A menu may be placed between the header and content; and/or a menu, or additional content area, may be placed to the left or right side of the content.
Converting a site with this type of layout to WordPress is incredibly simple. Most of the work can be done by simply using a stylesheet and the Hybrid theme. For this article, I will use a recent site I converted for a client: Windhaven Bed & Breakfast. The original website was designed in Dreamweaver, and the client was happy with the look of the site. The only problem was for site updates. The client either needed to purchase a copy of Dreamweaver, or ask the web designer to do the updates.
Essentially, all I needed to do was modify an existing stylesheet (style.css) that I use as a base child theme for the Hybrid theme framework. I also had to change how the top menu worked, as the original designer had used graphic images for each of the menu items. I therefore converted the background (without the text) and used it as a background image for the primary menu. The menu items are now text. A nice addition was using the ability to make the CSS glow change to yellow when hovering (Although I was disappointed that IE9 does things differently than Firefox, Chrome, and Opera – disappointed, but not surprised!). To add the additional side menu, I simply used a widget.
One critical requirement was to ensure that “404 page not found” errors didn’t occur, or were kept to a minimum. This was easily solved by installing John Godley’s excellent redirection plugin. This is one plugin that is 100% essential for converting a website to WordPress!
Here are the complete list of plugins used:
- Akismet – A testimonials page will be added soon, so cutting out comment based spam is essential. The Clean-Contact plugin also uses Akismet to stop spam submissions.
- Clean-Contact by Jason Morehouse – A very simple contact form
- Google Analytics for WordPress by Joost de Valk – Adds the Google Analytics tracking code to the site.
- Jetpack by WordPress.com – This adds the WordPress.com stats and the simple Sharedaddy buttons for emailing, printing, Facebook, and Twitter.
- Redirection by John Godley – Already mentioned, essential when converting a site to WordPress.
- W3 Total Cache by Frederick Townes – A very good caching package that can also minify and compress WordPress output, giving the speed (or better) than the original HTML based website.
- WordPress SEO by Joost de Valk – A very good SEO plugin that does everything I need for a basic website.
- WP-Cleanup by JortK – Keeps the WordPress database free of old data and wasted space. This is particularly useful after making many minor edits to pages.
As you can see from the second image, the site looks very similar to the original. There are some small differences, and now the client can easily update page content in the administration area of WordPress. The next small upgrade is adding an photo gallery to the site to replace the current gallery. Stay tuned!